javascript - Hierarchical JSON into flare.json format for use in Bilevel Partition -

i have csv want convert hierarchical json use bilevel partition.

the bilevel partition wants json data in format similar flare.json file. leaf nodes have name , size properties , in between has name , children properties.

here code attempting convert csv file hierarchical json.

code

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; }) })     .entries(data) } 

the above code works far giving data required hierarchical structure, but labels wrong. instead of name, children , size gives me key , values only, way leaf nodes, similar this file.

so read around, , found this question on so, isn't bilevel partition, thought same principle apply, since both layouts need hierarchical json data.

so set doing same, can't work. first of in code not have size() function mentioned in question. here whole code pretty copied official example:

code

d3.csv('data/partition.csv', function (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; }) })     .entries(data)   }    // compute initial layout on entire tree sum sizes.   // compute full name , fill color each node,   // , stash children can restored descend.   partition     .value(function(d) { return d.values; })     .nodes(root)     .foreach(function(d) {       d._children = d.values;       d.sum       = d.value;       d.key       = key(d);       d.fill      = fill(d);     });    // redefine value function use 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 / 4)     .style('fill-opacity', '.2')     .style('cursor', 'pointer')     .on("click", zoomout);    center.append("title")     .text("zoom out");    var path = svg.selectall("path")     .data(partition.nodes(root).slice(1))   .enter().append("path")     .attr("d", arc)     .style("fill", function(d) { return d.fill; })     .style('cursor', 'help')     .each(function(d) { this._current = updatearc(d); })     .on("mouseover", update_legend)     .on("mouseout", remove_legend)     .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 specified new root.   function zoom(root, p) {     if (document.documentelement.__transition__) return;      // rescale outside angles match 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 outside , exit inside.     // entering outside arcs start 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 inside , exit outside.     // exiting outside arcs transition 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; })           .style('cursor', 'help')           .on("mouseover",update_legend)           .on("mouseout",remove_legend)           .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 = [];   var p = d;   while (p.depth) k.push(p.key), 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.key));   c.l = luminance(d.sum);   return c; }  function arctween(b) {   var = 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}; } 

all above gives me in browser :(

any appreciated.

you should able re-use rest of code transforming hierarchical output of d3.nest() same format flare.json dataset, this:

(should run after definition of root)

  //rename object keys generated d3.nest() 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;   } 

you change accessor functions d3.layout.partition() object match new object, @ minimum need change structure of original object leaf nodes not store values in same field name children. solution above simplest way things working quickly.