fbreitwieser / d3-hiervis

:cactus: Hierarchical visualization with D3

🌵 d3-hiervis - Hierarchical visualization with D3

"Many datasets are intrinsically hierarchical. Consider geographic entities, such as census blocks, census tracts, counties and states; the command structure of businesses and governments; file systems and software packages. And even non-hierarchical data may be arranged empirically into a hierarchy, as with k-means clustering or phylogenetic trees." d3-hierarchy README

This module is based on d3 hierarchy and makes it easier to use and switch between several popular techniques for visualizing hierarchical data, including sunburst, sankey and partition.

Demo at https://bl.ocks.org/fbreitwieser/31e4be931541c74732dd6807ccb98daf

Usage

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://rawgit.com/fbreitwieser/d3-hiervis/master/src/hiervis.js"></script>
<script src="https://rawgit.com/fbreitwieser/d3-hiervis/master/src/TreeColors.js"></script>
<svg width="100%" height="400"> </svg>
<script>
d3.csv("https://raw.githubusercontent.com/fbreitwieser/d3-hiervis/master/data/d3.csv").then(function(data) {
    chart = hiervis(d3.select("svg"), data, {nameField: "path", pathSep: "/", valueField: "size", stat: "sum"});
    chart.draw("sankey")
  });
</script>

Installing

If you use NPM, npm install d3-hiervis. Otherwise, download the latest release.

API Reference

TODO

Options

Data import:

• default: data is already in hierarchical form, i.e. data is an object representing the root node
• if pathSep is specified: data is tabular, with nameField defining a path, delimited by pathField
• else if parentFiled is specified: data is tabular, with parentField defining the parent of nameField

Partition and Icicle (vertical partition)

Based on Mike Bostock's Zoomable Icicle

Sunburst

Based on Vasco Asturiano's Zoomable Sunburst with Labels.

Sankey

based on timelyportfolio's interactive parttree.

# hiervis()

Planned features (contributions are highly welcome!)

• Add a dropdown menu in the SVG to change visualizations
• When changing visualizations, transform rather than replace the nodes