D3 Treemap visualisation to be used on the Service Explorer project.
Given an HTML table annotated with data-title
and data-volume
attributes:
<table>
<tbody>
<tr data-title="Service 1" data-volume="100">...</tr>
<tr data-title="Service 2" data-volume="100">...</tr>
<tr data-title="Service 3" data-volume="100">...</tr>
</tbody>
</table>
The following script will convert the table into a tree and apply the tree map layout.
<script src="javascripts/d3.js"></script>
<script src="javascripts/table-to-tree-map.js"></script>
<script>
var tree = Tree.fromHtmlTable(d3.selectAll("tbody tr"), 200);
TreeMapLayout.display("services-treemap", tree);
</script>