D3 Examples - what we buy

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    text-align:center;
    font-family: "Helvetica Neue", Helvetica, Arial;
  }
.node {
  cursor: pointer;
}
​
.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}
​
.node--leaf {
  fill: white;
}
​
.label {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
​
.label,
.node--root,
.node--leaf {
  pointer-events: none;
}
​
</style>
<svg width="920" height="920"><!-- <svg width="520" height="520"> -->
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
<script>
​
const svg = d3.select("svg"),
    margin = 2,
    diameter = +svg.attr("width"),
    g = svg
            .append("g")
            .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"),
   renderForExport = false
​
const group_colors = d3.scaleOrdinal(d3.schemeAccent)
​
const pack = d3.pack()
    .size([diameter - margin, diameter - margin])
    .padding(0.5);
​
​
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
​
  const stratData = d3.stratify()(data),
                root = d3.hierarchy(stratData)
                .sum(function (d) { return d.data.size })
                /*.sort(function(x, y){
            return d3.ascending(x.data.data.group, y.data.data.group) || 
              d3.descending(x.value, y.value)
          })*/
                .sort(function(x, y){return d3.descending(x.value, y.value)})
​
  var focus = root,
      nodes = pack(root).descendants(),
      view
​
  const circle = g.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
        .style("fill", function(d) {
            return d.children ? 'white' : group_colors(d.data.data.group)
        })
        .style("stroke", function(d) {
        return d.children ? 'white' : chroma(group_colors(d.data.data.group)).darken()
      })
      .style("stroke-width", 1 )
      .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
    
  const text = g.selectAll("text")
    .data(nodes)
  .enter().append("text")
    .filter(function(d) {
      if (renderForExport) {return d.value > 100000000}
      return d.depth > -99
    })
    .attr("class", "label")
    .style("fill-opacity", function(d) {
      if (renderForExport) {return 'inline'}
      return d.parent === root ? "inline" : "none"; 
    })
    .style("display", function(d) {
      if (renderForExport) {return 'inline'}
      return d.parent === root ? "inline" : "none"; 
    })
    .style("text-anchor", "middle")
    .text(function(d) { return label(d.data.data.label, d.value); })
    
  var node = g.selectAll("circle,text");
​
  svg
      //.style("background", color(-1))
      .on("click", function() { zoom(root); });
​
  zoomTo([root.x, root.y, root.r * 2 + margin]);
​
  function zoom(d) {
    var focus0 = focus; focus = d;
​
    var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
          return function(t) { zoomTo(i(t)); };
        });
        if (renderForExport != true) {
      transition.selectAll("text")
        .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
          .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
          .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
          .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
    }
  }
​
  function zoomTo(v) {
    let k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; })
    circle.attr("r", function(d) { return d.r * k; });
  }
})
​
function label(s, num) {
  if (num > 1000000000) {
    return s + ' $' + (num / 1000000000).toFixed(1) + 'bn'
  }
  return s + ' $' + (num / 1000000).toFixed(0) + 'm'
}
</script>
​
    