jsl6906/data.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    In response to: http://stackoverflow.com/questions/26866368/hierarchical-json-into-flare-json-format-for-use-in-bilevel-partition

  
## data.csv

          
            ccgname
            practicename
            diagnosisname
            numpatientswithdiagnosis

            
              ccg1
              practice1
              diagnosis1
              95

            
              ccg1
              practice1
              diagnosis1
              71

            
              ccg1
              practice1
              diagnosis1
              73

            
              ccg1
              practice1
              diagnosis1
              92

            
              ccg1
              practice5
              diagnosis1
              77

            
              ccg1
              practice5
              diagnosis1
              64

            
              ccg1
              practice5
              diagnosis1
              88

            
              ccg1
              practice8
              diagnosis1
              84

            
              ccg1
              practice9
              diagnosis1
              21

            
              ccg10
              practice1
              diagnosis1
              6

            
              ccg11
              practice11
              diagnosis11
              1

            
              ccg11
              practice11
              diagnosis11
              75

            
              ccg11
              practice11
              diagnosis11
              71

            
              ccg11
              practice1
              diagnosis11
              72

            
              ccg11
              practice1
              diagnosis11
              31

            
              ccg16
              practice1
              diagnosis11
              81

            
              ccg17
              practice17
              diagnosis11
              55

            
              ccg17
              practice17
              diagnosis11
              84

            
              ccg17
              practice17
              diagnosis11
              54

            
              ccg17
              practice17
              diagnosis11
              55

            
              ccg17
              practice21
              diagnosis11
              21

            
              ccg17
              practice1
              diagnosis22
              81

            
              ccg17
              practice1
              diagnosis22
              79

            
              ccg17
              practice1
              diagnosis22
              46

            
              ccg17
              practice25
              diagnosis22
              55

            
              ccg17
              practice26
              diagnosis22
              92

            
              ccg17
              practice26
              diagnosis22
              17

            
              ccg28
              practice1
              diagnosis22
              27

            
              ccg29
              practice1
              diagnosis22
              67

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
  circle,
  path {
    cursor: pointer;
  }
  circle {
    fill: none;
    pointer-events: all;
  }
</style>
<script>

var margin = {top: 350, right: 480, bottom: 350, left: 480},
    radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10;

var hue = d3.scale.category10();

var luminance = d3.scale.sqrt()
    .domain([0, 1e6])
    .clamp(true)
    .range([90, 20]);

var svg = d3.select("body").append("svg")
    .attr("width", margin.left + margin.right)
    .attr("height", margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var partition = d3.layout.partition()
    .sort(function(a, b) { return d3.ascending(a.name, b.name); })
    .size([2 * Math.PI, radius]);

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx - 0.01 / (d.depth + 0.5); })
    .innerRadius(function(d) { return radius / 3 * d.depth; })
    .outerRadius(function(d) { return radius / 3 * (d.depth + 1) - 1; });

d3.csv('data.csv', function (error, data) {

  var root = { "key": "Leeds CCGs", "values": d3.nest()
    .key(function(d) { return d.ccgname; })
    .key(function(d) { return d.practicename; })
    .key(function(d) { return d.diagnosisname; })
    .rollup(function(leaves) { return d3.sum(leaves, function(d) { return +d.numpatientswithdiagnosis; }); })  //ADDED: coerce text value to number;
    .entries(data)
  };

  //rename object keys generated from d3.nest() to match flare.json format
  renameStuff(root);
  function renameStuff(d) {
    d.name = d.key; delete d.key;
    if (typeof d.values === "number") d.size = d.values;
    else d.values.forEach(renameStuff), d.children = d.values;
    delete d.values;
  }

  // Compute the initial layout on the entire tree to sum sizes.
  // Also compute the full name and fill color for each node,
  // and stash the children so they can be restored as we descend.
  partition
      .value(function(d) { return d.size; })
      .nodes(root)
      .forEach(function(d) {
        d._children = d.children;
        d.sum = d.value;
        d.key = key(d);
        d.fill = fill(d);
      });

  // Now redefine the value function to use the previously-computed sum.
  partition
      .children(function(d, depth) { return depth < 2 ? d._children : null; })
      .value(function(d) { return d.sum; });

  var center = svg.append("circle")
      .attr("r", radius / 3)
      .on("click", zoomOut);

  center.append("title")
      .text("zoom out");
console.log(root);
  var path = svg.selectAll("path")
      .data(partition.nodes(root).slice(1))
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return d.fill; })
      .each(function(d) { this._current = updateArc(d); })
      .on("click", zoomIn);

  function zoomIn(p) {
    if (p.depth > 1) p = p.parent;
    if (!p.children) return;
    zoom(p, p);
  }

  function zoomOut(p) {
    if (!p.parent) return;
    zoom(p.parent, p);
  }

  // Zoom to the specified new root.
  function zoom(root, p) {
    if (document.documentElement.__transition__) return;

    // Rescale outside angles to match the new layout.
    var enterArc,
        exitArc,
        outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);

    function insideArc(d) {
      return p.key > d.key
          ? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
          ? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
          : {depth: 0, x: 0, dx: 2 * Math.PI};
    }

    function outsideArc(d) {
      return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
    }

    center.datum(root);

    // When zooming in, arcs enter from the outside and exit to the inside.
    // Entering outside arcs start from the old layout.
    if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);

    path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });

    // When zooming out, arcs enter from the inside and exit to the outside.
    // Exiting outside arcs transition to the new layout.
    if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);

    d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
      path.exit().transition()
          .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
          .attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
          .remove();

      path.enter().append("path")
          .style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
          .style("fill", function(d) { return d.fill; })
          .on("click", zoomIn)
          .each(function(d) { this._current = enterArc(d); });

      path.transition()
          .style("fill-opacity", 1)
          .attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });
    });
  }
});

function key(d) {
  var k = [], p = d;
  while (p.depth) k.push(p.name), p = p.parent;
  return k.reverse().join(".");
}

function fill(d) {
  var p = d;
  while (p.depth > 1) p = p.parent;
  var c = d3.lab(hue(p.name));
  c.l = luminance(d.sum);
  return c;
}

function arcTween(b) {
  var i = d3.interpolate(this._current, b);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

function updateArc(d) {
  return {depth: d.depth, x: d.x, dx: d.dx};
}

</script>
ccgname	practicename	diagnosisname	numpatientswithdiagnosis
ccg1	practice1	diagnosis1	95
ccg1	practice1	diagnosis1	71
ccg1	practice1	diagnosis1	73
ccg1	practice1	diagnosis1	92
ccg1	practice5	diagnosis1	77
ccg1	practice5	diagnosis1	64
ccg1	practice5	diagnosis1	88
ccg1	practice8	diagnosis1	84
ccg1	practice9	diagnosis1	21
ccg10	practice1	diagnosis1	6
ccg11	practice11	diagnosis11	1
ccg11	practice11	diagnosis11	75
ccg11	practice11	diagnosis11	71
ccg11	practice1	diagnosis11	72
ccg11	practice1	diagnosis11	31
ccg16	practice1	diagnosis11	81
ccg17	practice17	diagnosis11	55
ccg17	practice17	diagnosis11	84
ccg17	practice17	diagnosis11	54
ccg17	practice17	diagnosis11	55
ccg17	practice21	diagnosis11	21
ccg17	practice1	diagnosis22	81
ccg17	practice1	diagnosis22	79
ccg17	practice1	diagnosis22	46
ccg17	practice25	diagnosis22	55
ccg17	practice26	diagnosis22	92
ccg17	practice26	diagnosis22	17
ccg28	practice1	diagnosis22	27
ccg29	practice1	diagnosis22	67
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	circle,
	path {
	cursor: pointer;
	}
	circle {
	fill: none;
	pointer-events: all;
	}
	</style>
	<script>

	var margin = {top: 350, right: 480, bottom: 350, left: 480},
	radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10;

	var hue = d3.scale.category10();

	var luminance = d3.scale.sqrt()
	.domain([0, 1e6])
	.clamp(true)
	.range([90, 20]);

	var svg = d3.select("body").append("svg")
	.attr("width", margin.left + margin.right)
	.attr("height", margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var partition = d3.layout.partition()
	.sort(function(a, b) { return d3.ascending(a.name, b.name); })
	.size([2 * Math.PI, radius]);

	var arc = d3.svg.arc()
	.startAngle(function(d) { return d.x; })
	.endAngle(function(d) { return d.x + d.dx - 0.01 / (d.depth + 0.5); })
	.innerRadius(function(d) { return radius / 3 * d.depth; })
	.outerRadius(function(d) { return radius / 3 * (d.depth + 1) - 1; });

	d3.csv('data.csv', function (error, data) {

	var root = { "key": "Leeds CCGs", "values": d3.nest()
	.key(function(d) { return d.ccgname; })
	.key(function(d) { return d.practicename; })
	.key(function(d) { return d.diagnosisname; })
	.rollup(function(leaves) { return d3.sum(leaves, function(d) { return +d.numpatientswithdiagnosis; }); }) //ADDED: coerce text value to number;
	.entries(data)
	};

	//rename object keys generated from d3.nest() to match flare.json format
	renameStuff(root);
	function renameStuff(d) {
	d.name = d.key; delete d.key;
	if (typeof d.values === "number") d.size = d.values;
	else d.values.forEach(renameStuff), d.children = d.values;
	delete d.values;
	}

	// Compute the initial layout on the entire tree to sum sizes.
	// Also compute the full name and fill color for each node,
	// and stash the children so they can be restored as we descend.
	partition
	.value(function(d) { return d.size; })
	.nodes(root)
	.forEach(function(d) {
	d._children = d.children;
	d.sum = d.value;
	d.key = key(d);
	d.fill = fill(d);
	});

	// Now redefine the value function to use the previously-computed sum.
	partition
	.children(function(d, depth) { return depth < 2 ? d._children : null; })
	.value(function(d) { return d.sum; });

	var center = svg.append("circle")
	.attr("r", radius / 3)
	.on("click", zoomOut);

	center.append("title")
	.text("zoom out");
	console.log(root);
	var path = svg.selectAll("path")
	.data(partition.nodes(root).slice(1))
	.enter().append("path")
	.attr("d", arc)
	.style("fill", function(d) { return d.fill; })
	.each(function(d) { this._current = updateArc(d); })
	.on("click", zoomIn);

	function zoomIn(p) {
	if (p.depth > 1) p = p.parent;
	if (!p.children) return;
	zoom(p, p);
	}

	function zoomOut(p) {
	if (!p.parent) return;
	zoom(p.parent, p);
	}

	// Zoom to the specified new root.
	function zoom(root, p) {
	if (document.documentElement.__transition__) return;

	// Rescale outside angles to match the new layout.
	var enterArc,
	exitArc,
	outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);

	function insideArc(d) {
	return p.key > d.key
	? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
	? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
	: {depth: 0, x: 0, dx: 2 * Math.PI};
	}

	function outsideArc(d) {
	return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
	}

	center.datum(root);

	// When zooming in, arcs enter from the outside and exit to the inside.
	// Entering outside arcs start from the old layout.
	if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);

	path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });

	// When zooming out, arcs enter from the inside and exit to the outside.
	// Exiting outside arcs transition to the new layout.
	if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);

	d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
	path.exit().transition()
	.style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
	.attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
	.remove();

	path.enter().append("path")
	.style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
	.style("fill", function(d) { return d.fill; })
	.on("click", zoomIn)
	.each(function(d) { this._current = enterArc(d); });

	path.transition()
	.style("fill-opacity", 1)
	.attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });
	});
	}
	});

	function key(d) {
	var k = [], p = d;
	while (p.depth) k.push(p.name), p = p.parent;
	return k.reverse().join(".");
	}

	function fill(d) {
	var p = d;
	while (p.depth > 1) p = p.parent;
	var c = d3.lab(hue(p.name));
	c.l = luminance(d.sum);
	return c;
	}

	function arcTween(b) {
	var i = d3.interpolate(this._current, b);
	this._current = i(0);
	return function(t) {
	return arc(i(t));
	};
	}

	function updateArc(d) {
	return {depth: d.depth, x: d.x, dx: d.dx};
	}

	</script>