Skip to content
This repository has been archived by the owner on Oct 30, 2019. It is now read-only.

alphagov/service-explorer-tree-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Service Explorer Tree Map

Build Status

What is it

D3 Treemap visualisation to be used on the Service Explorer project.

How to use it

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>

Example

About

Treemap Javascript layout, to be used by Service Explorer

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published