Old school D3 from simpler times

All examples By author By category About

hdickie

Full window Github gist

hw 4 SUNBURST

Built with blockbuilder.org

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tree Demo</title>

<script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900|Source+Code+Pro:300" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">

<script src="helpers.js"></script>
  <script src="tooltip.js"></script>
</head>

<body>
<h2>Sunburst</h2>
<svg id="sunburst"></svg>

<script>
// used to color node by depth
var color = d3.scaleOrdinal();

// accessor functions for x and y
var x = function(d) { return d.x; };
var y = function(d) { return d.y; };

// normal line generator
var line = d3.line()
  .curve(d3.curveLinear)
  .x(x)
  .y(y);

// configure size, margin, and circle radius
var config = {
    w: 900,
    h: 450,
    r: 4,
    pad: 10
};

// maximum diameter of circle is minimum dimension
config.d = Math.min(config.w, config.h);

var file = "java8.csv";

d3.csv(file, convert, callback);

function convert(row) {
  var parts = row.name.split(".");
  row.id = row.name;
  row.name = parts[parts.length - 1];
  row.value = +row.size;
  return row;
}

function callback(error, data) {
    if (error) {
        console.warn(file, error);
        return;
    }

var stratify = d3.stratify().id(function(d) {
    return d.id;
  })
  .parentId(function(d) {
    return d.id.substring(0,d.id.lastIndexOf("."));
  });
  
  var nested = d3.nest()
  	.key(function(d){return d.parent}).sortKeys(d3.ascending).entries(data);
  
  nested = nested[0].values;
  
  var root = stratify(nested);
  
  root.sort(function(a, b) {
    if (a.height != b.height) {
      return d3.ascending(a.height, b.height);
    }
    else {
      return d3.ascending(a.value, b.value);
    }
  });
  
  
  	color.domain(d3.range(root.height + 1));
    color.range(d3.schemeRdYlGn[root.height + 1]);

drawSunburst("sunburst", root.copy());
}

function drawNodes(g, nodes, raise) {
  g.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
      .attr("r", function(d) { return d.r ? d.r : config.r; })
      .attr("cx", x)
      .attr("cy", y)
      .attr("id", function(d) { return d.data.name; })
      .attr("class", "node")
      .style("fill", function(d) {return color(d.depth)})
      .on("mouseover.tooltip", function(d) {
        show_tooltip(g, d3.select(this));
        d3.select(this).classed("selected", true);
        if (raise) {
          d3.select(this).raise();
        }
      })
      .on("mouseout.tooltip", function(d) {
        g.select("#tooltip").remove();
        d3.select(this).classed("selected", false);
      });
}

function drawLinks(g, links, generator) {
  var paths = g.selectAll("path")
    .data(links)
    .enter()
    .append("path")
    .attr("d", generator)
    .attr("class", "link");
}

function drawSunburst(id, root){
  var svg = d3.select("body").select("#" + id);
  svg.attr("width", config.w);
  svg.attr("height", config.h);

var g = svg.append("g");
  g.attr("id", "plot");
  g.attr("transform", translate(config.pad, config.pad));
  
  var xshift = config.w/2 - config.pad;
  var yshift = config.h/2 - config.pad;
  g.attr("transform", translate(xshift, yshift));

// calculate sum for arcs
  root.sum(function(d) { return d.value; });

// setup node layout generator
  var partition = d3.partition()
    .size([ 2*Math.PI,
            config.d/2]);
  
  var t = d3.scaleLinear()
  	.domain([0,2*Math.PI])
  	.range([0,2*Math.PI]);
  
  var r = d3.scaleLinear()
  	.domain([0,config.d/2])
  	.range([0,config.d/2]);

// run layout to calculate x0, y0, x1, and y1 attributes
  partition(root);

var arc = d3.arc()
    .startAngle(function(d) { return t(d.x0); })
    .endAngle(function(d) { return t(d.x1); })
    .innerRadius(function(d) { return r(d.y0); })
    .outerRadius(function(d) { return r(d.y1); })
  	.padAngle(0.001);
  
  var arcs = g.selectAll("path")
  	.data(root.descendants())
  	.enter()
  	.append("path")
  	.attr("d",arc)
  	.attr("id", function(d){ return d.data.name})
    .attr("class", "node")
  	.style("fill", function(d){ return color(d.depth)})
  	.style("stroke","none")
  	.on("mouseover.tooltip", function(d) {
      show_tooltip(g, d3.select(this));
      d3.select(this).classed("selected", true);
      d3.select(this).raise();
    })
    .on("mouseout.tooltip", function(d) {
      g.select("#tooltip").remove();
      d3.select(this).classed("selected", false);
    })
  	.on("click",click);
  
		function click(d){
      svg.transition()
      .duration(750)
      .tween("scale", function() {
        console.log(d);
        var xd = d3.interpolate(t.domain(), [d.x0,d.x1]),
            yd = d3.interpolate(r.domain(), [d.y0, d.y1]),
            yr = d3.interpolate(r.range(), [d.y0 ? 5 : 0, 37.5]);
        return function(d) { 
          t.domain(xd(d)); 
          r.domain(yd(d)).range(yr(d)); };
      })
    .selectAll("path")
      .attrTween("d", function(d) { return function() { return arc(d); }; });
    };
}
</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js