Hierarchical visualizations with D3

d3.csv

hierD3.js

hierD3 =  new function() {
  "use strict";
  var self = this;
  const defaults = {
    viz: "sunburst",
    rootName: "root",
    title: "100vw", // 100% viewport width
    width: "100vh", // 100% viewport height
    height: null,
    valueField: "size",
    colorField: null,
    stat: "identity",  // possible choices: identity, sum, and count
    buttons: false, // show buttons to switch layout
    transitionDuration: 350,
    showNumbers: false,
    numberFormat: ",d",
    sunburstLabelsRadiate: false,
    circleNumberFormat: ".2s",
    stratify: false,
    stratifyId: "id",
    stratifyParentId: "parent"
  };

  var opts = defaults;
  var root = null;
  var nodes = null;
  var totalSize = null;
  var svg = null;
  var boundingBox = null;
  var width, height, maxRadius = null;
  //var el = null;

  //var colorScale = null;
  const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  var formatNumber = null;
  var formatCircleNumber = null;

  self.viz = function(svg1, data, viz, o = null) {
    for (var opt in o) { opts[opt] = o[opt]; }

    formatNumber = d3.format(opts.numberFormat);
    formatCircleNumber = d3.format(opts.circleNumberFormat);

    //svg = d3.select(el).append('svg')
    //              .style("width", opts.width).style("height", opts.height)
    //              .attr('viewBox', `${-width / 2} ${-height / 2} ${width} ${height}`);
    svg = d3.select(svg1);
    console.log("boundingbox");
    //boundingBox = svg.node().getBBox(); // doesn't work in observablehq
    boundingBox = { width: 1000, height: 1000 };
    console.log(boundingBox);
    width = boundingBox.width;
    height = boundingBox.height;
    maxRadius = Math.min(width, height)/2 -5;
 
    //        .style("width", "100%")
    //        .style("height", "auto")
    
    svg.append("style").text(`
.slice { cursor: pointer; }
.slice .main-arc { stroke: #fff; stroke-width: 1px; }
.slice .hidden-arc { fill: none; }
.slice text { pointer-events: none; dominant-baseline: middle; text-anchor: middle; }
.slice .text-countour { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; }
rect { stroke: #fff; }
`);

    //attr('viewBox', `${-width / 2} ${-height / 2} ${width} ${height}`);

    //svg = d3.select(el).append('svg')
    //              .attr("width", width).attr("height", height);

    if (opts.stratify) {
      var stratify = d3.stratify()
                       .id(d => d[opts.stratifyId])
                       .parentId(d => d[opts.stratifyParentId]);
      console.log(data)
      data = stratify(data)
    }


    root = d3.hierarchy(data);
    nodes = root.descendants();
    //TODO: Check that root.data.children[0] has field valueField!

    switch(opts.stat) {
      case "sum":
        root.sum(d => typeof d[opts.valueField] !== undefined? d[opts.valueField] : 0);
        break;
      case "count":
        root.count();
        break;
      default: //identity by default
        root.each(function(node) { node.value = node.data[opts.valueField]; });
        root.value = d3.sum(root.children, d => d.value);
        break;
    }

    root.data.name = opts.rootName;
    totalSize = root.value;

    const visualizations = [ "icicle", "treemap", "partition", "pack", "sunburst" ];

    //button_form = d3.select(el).append('form')

    switch(viz) {
      case "icicle":
        this.icicle();
        break;
      case "treemap":
        this.treemap();
        break;
      case "partition":
        this.partition();
        break;
      case "pack":
        this.pack();
        break;
      //case sunburst:
      default:
        this.sunburst();
        break;
    }
    return svg.node();
  }

  self.pack = function() {
    // from Bostock - Zoomable circle packing
    const margin = 20,
        diameter = width


    const pack1 = svg.append("g")
                  .attr("transform", "translate("+diameter/2+","+diameter/2+")")

    var pack = d3.pack().size([diameter, diameter]).padding(2);

    var circle = pack1.selectAll("circle")
                  .data(pack(root).descendants())
                  .enter().append("circle")
                  .style("fill", color)
  }

  self.treemap = function() {
    // Make it look nicer - see ganeshv's block
    self.icicle(false, true)
  }

  self.partition = function() {
    self.icicle(true);
  }

  self.icicle = function(horizontal=false, is_treemap=false) {
    if (is_treemap) {
      const treemap = d3.treemap()
                      .tile(d3.treemapResquarify)
                      .size([width, height])
                      .round(true)
                      .paddingInner(1);
      treemap(root);
      nodes = root.leaves()
    } else {
      var partition = d3.partition()
                        .padding(0)
                        .round(true);
      if (horizontal) {
        partition.size([height, width])
      } else {
        partition.size([width, height])
      }

      partition(root);
    }

    const x = d3.scaleLinear()
                .range([0, width]);
    const y = d3.scaleLinear()
                .range([0, height]);

    var icicle = svg.selectAll(".node")
                    .data(nodes).enter().append("g")

    var x0 = "x0",
        x1 = "x1",
        y0 = "y0",
        y1 = "y1"

    if (horizontal) {
      x0 = "y0"
      x1 = "y1"
      y0 = "x0"
      y1 = "x1"
    }

    var rect = icicle.append("rect")
               .attr("id", (_, i) => "rect-" + i)
               .attr("x", d => d[x0] )
               .attr("y", d => d[y0] )
               .attr("width", d => d[x1] - d[x0])
               .attr("height", d => d[y1] - d[y0])
               .attr('fill', color)
               .style("cursor", "pointer")
               .on("click", clicked);

    rect.append('title')
        .text(d => d.data.name + '\n' + formatNumber(d.value));

    icicle.append("clipPath")
          .attr("id", (d, i) => "clip-" + i)
          .append("use")
          .attr("xlink:href", (_, i) => "#rect-" + i);

    var text = icicle.append("text")
           .attr("clip-path", (_, i) => "url(#clip-" + i + ")")
           .attr("x", d => d[x0] )
           .attr("y", d => d[y0] )
           .style("cursor", "pointer")
           .style("dominant-baseline", "hanging")
           .text(d => d.data.name)
           .on("click", clicked)

    text.append('title')
        .text(d => d.data.name + '\n' + formatNumber(d.value));

    function clicked(d) {
      if (horizontal) {
        x.domain([d[x0], width]).range([d.depth? width / 10 : 0, width]);
        y.domain([d[y0], d[y1]]);
      } else {
        x.domain([d[x0], d[x1]]);
        y.domain([d[y0], height]).range([d.depth? height / 10 : 0, height]);
      }


      rect.transition().duration(opts.transitionDuration)
          .attr("x", d => x(d[x0]))
          .attr("y", d => y(d[y0]))
          .attr("width", d => x(d[x1]) - x(d[x0]))
          .attr("height", d => y(d[y1]) - y(d[y0]));

      text.transition().duration(opts.transitionDuration)
          .attr("x", d => x(d[x0]))
          .attr("y", d => y(d[y0]))

    }

  }

  self.sunburst = function() {
    var partition = d3.partition();
    partition(root);

    svg.attr('viewBox', `${-width / 2} ${-height / 2} ${width} ${height}`);
    svg.on('click', () => focusOn()); // Reset zoom on canvas click
    const x = d3.scaleLinear()
                .range([0, 2 * Math.PI])
                .clamp(true);

    const y = d3.scaleSqrt()
                .range([maxRadius*.1, maxRadius]);

    const arc = d3.arc()
              .startAngle(d => x(d.x0))
              .endAngle(d => x(d.x1))
              .innerRadius(d => Math.max(0, y(d.y0)))
              .outerRadius(d => Math.max(0, y(d.y1)));

    const middleArcLine = d => {
      const halfPi = Math.PI/2;
      const angles = [x(d.x0) - halfPi, x(d.x1) - halfPi];
      const r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);

      const middleAngle = (angles[1] + angles[0]) / 2;
      const invertDirection = middleAngle > 0 && middleAngle < Math.PI; // On lower quadrants write text ccw
      if (invertDirection) { angles.reverse(); }

      const path = d3.path();
      path.arc(0, 0, r, angles[0], angles[1], invertDirection);
      return path.toString();
    };

    const slice = svg.selectAll('g.slice').data(nodes);
    slice.exit().remove();

    const newSlice = slice.enter()
                          .append('g').attr('class', 'slice')
                          .on('click', d => {
                            d3.event.stopPropagation();
                            focusOn(d);
                      });

    newSlice.append('title')
            .text(d => d.data.name + '\n' + formatNumber(d.value));

    newSlice.append('path')
            .attr('id', (_, i) => `mainArc-${i}`)
            .attr('class', 'main-arc')
            .style('fill', color)
            .attr('d', arc);

    newSlice.append("clipPath")
            .attr("id", (_, i) => "clip-" + i)
            .append("use")
            .attr("xlink:href", (_, i) => "#mainArc-" + i);

    newSlice.append('path')
            .attr('class', 'hidden-arc')
            .attr('id', (_, i) => `hiddenArc${i}`)
            .attr('d', middleArcLine);

    const text = newSlice.append('text');
	if (opts.sunburstContour) {
      // Add white contour
      text.append('textPath')
          .attr('startOffset','50%')
          .attr('xlink:href', (_, i) => `#hiddenArc${i}` )
          .text(d => d.data.name)
          .attr('class', 'text-contour');
    }

    if (opts.sunburstLabelsRadiate) {
      // TODO: fix that
      text
        .attr("transform", function(d) {
          var angle = (x(d.x0) + x(d.x1))*90/Math.PI - 90
          var res= "translate("+arc.centroid(d)+")rotate("+ ((angle > 90 || angle < -90)? angle - 180 : angle) +")"
          return res;
        })
        .text(d => opts.showNumbers? (d.data.name + '\n' + formatCircleNumber(d.value)) : d.data.name);
    } else {
      text
        .attr("clip-path", (_, i) => "url(#clip-" + i + ")")
        .append('textPath')
        .attr('startOffset','50%')
        .attr('xlink:href', (_, i) => `#hiddenArc${i}` )
        .text(d => opts.showNumbers? (d.data.name + '\n' + formatCircleNumber(d.value)) : d.data.name);
    }


    function focusOn(d = { x0: 0, x1: 1, y0: 0, y1: 1 }) {
        // Reset to top-level if no data point specified

      const transition = svg.transition()
                            .duration(opts.transitionDuration)
                            .tween('scale', () => {
                              const xd = d3.interpolate(x.domain(), [d.x0, d.x1]),
                                    yd = d3.interpolate(y.domain(), [d.y0, 1]);
                              return t => { x.domain(xd(t)); y.domain(yd(t)); };
                            });

      transition.selectAll('path.main-arc')
                .attrTween('d', d => () => arc(d));

      transition.selectAll('path.hidden-arc')
                .attrTween('d', d => () => middleArcLine(d));

      moveStackToFront(d);


      function moveStackToFront(elD) {
        svg.selectAll('.slice').filter(d => d === elD)
                               .each(function(d) {
                                 this.parentNode.appendChild(this);
                                 if (d.parent) { moveStackToFront(d.parent); }
                               })
      }
    }
    function computeTextRotation(d) {
      return ((d.x0 + d.x1)/2 - Math.PI / 2) / Math.PI * 180;
    }
  }

  // Internal functions and constants
  const CHAR_SPACE = 6;

  const color = function(d) {
    if (opts.colorField !== null) {
      return d.data[opts.colorField];
    }
    return(colorScale(d.data.name));
    /*else if (d.children) {
      return d3.rgb(colorScale(d.data.name)).brighter(d.depth/5);
    } else {
      return d3.rgb(colorScale(d.parent.data.name)).brighter(d.depth/5);
    } */
  };

}

index.html

<!DOCTYPE html>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="hierD3.js"></script> 
<svg id="h1" width=960 height=960> </svg>
<svg id="h2" width=960 height=960> </svg>
<svg id="h3" width=960 height=960> </svg>
<script>
  hierD3.viz("svg#h1", data, "partition", {valueField: "size", stat: "sum"})
  hierD3.viz("svg#h2", data, "sunburst", {valueField: "size", stat: "sum"})
  hierD3.viz("svg#h3", data, "icicle", {valueField: "size", stat: "sum"})
</script>