Hierarchical data in VizPacker

[former_member258631]

Hi,

I am creating an extension of tree layout for lumira. I have implemented d3 part of it, but i am facing issue while using same in vizpacker. I am uploading data from csv file. Inside my d3 code i am recieving csv data as array of json objects, i am using d3.nest() to create hierarchical data and this way i am able to draw my graph but with vizpacker, format of data is different.

[{"Set 1":["Population over 60","India","2002"],"NumericMeasure":["7.01"]},{"Set 1":["Population under 15","India","2002"],"NumericMeasure":["33.42"]},{"Set 1":["Population over 60","India","2003"],"NumericMeasure":["7.08"]},{"Set 1":["Population under 15","India","2003"],"NumericMeasure":["33.03"]},{"Set 1":["Population over 60","India","2004"],"NumericMeasure":["7.15"]},{"Set 1":["Population under 15","India","2004"],"NumericMeasure":["32.62"]}]

I want to nest elements first by country and then by Indicators followed by NumericMeasure like this

{"country": "India","children": [{"Indicator": "population under 15","children": [{"year": "2002","numericMeasure": "30.1"},{"year": "2003","numericMeasure": "31.5"},{

"year": 2004,"numericMeasure": "32.9"}]},{"Indicator": "population over 60","children": [{"year": "2002","numericMeasure": "7.1"},{"year": "2003","numericMeasure": "7.5"},{"year": 2004,"numericMeasure": "7.0"

}]}]}

How should i do it? Thanks in advance!

Regards,

Ashish.

[Former Member · Accepted solution]

Hey Ashish,

I'm currently in an [R] headspace, so coming back to JS/VizPacker may require some additional time to go through your code with you.

As an employee I would highly recommend that you revert internally, as there are some great resources for you (be sure to check out the JAM page; Jan should be able to guide you) - and then you can come back and post the solution to your question.

This example in d3 is pretty straight-forward though:

var data = [
  { "name" : "Level 2: A", "parent":"Top Level" },
  { "name" : "Top Level", "parent":"null" },
  { "name" : "Son of A", "parent":"Level 2: A" },
  { "name" : "Daughter of A", "parent":"Level 2: A" },
  { "name" : "Level 2: B", "parent":"Top Level" }
  ];

// *********** Convert flat data into a nice tree ***************
// create a name: node map
var dataMap = data.reduce(function(map, node) {
 map[node.name] = node;
 return map;
}, {});

// create the tree array
var treeData = [];
data.forEach(function(node) {
 // add to parent
 var parent = dataMap[node.parent];
 if (parent) {
 // create child array if it doesn't exist
 (parent.children || (parent.children = []))
 // add node to child array
 .push(node);
 } else {
 // parent is null or missing
 treeData.push(node);
 }
});

// ************** Generate the tree diagram *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
 width = 960 - margin.right - margin.left,
 height = 500 - margin.top - margin.bottom;
 
var i = 0;

var tree = d3.layout.tree()
 .size([height, width]);

var diagonal = d3.svg.diagonal()
 .projection(function(d) { return [d.y, d.x]; });

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

root = treeData[0];
  
update(root);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
 links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Declare the nodes…
  var node = svg.selectAll("g.node")
 .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter the nodes.
  var nodeEnter = node.enter().append("g")
 .attr("class", "node")
 .attr("transform", function(d) { 
  return "translate(" + d.y + "," + d.x + ")"; });

  nodeEnter.append("circle")
 .attr("r", 10)
 .style("fill", "#fff");

  nodeEnter.append("text")
 .attr("x", function(d) { 
  return d.children || d._children ? -13 : 13; })
 .attr("dy", ".35em")
 .attr("text-anchor", function(d) { 
  return d.children || d._children ? "end" : "start"; })
 .text(function(d) { return d.name; })
 .style("fill-opacity", 1);

  // Declare the links…
  var link = svg.selectAll("path.link")
 .data(links, function(d) { return d.target.id; });

  // Enter the links.
  link.enter().insert("path", "g")
 .attr("class", "link")
 .attr("d", diagonal);

}

(see the full example here: D3.js tree diagram generated from 'flat' data)

If you haven't done so already, I would highly recommend you go through Matt Lloyd's tutorials for the VizPacker (Part 1, Part 2, Part 3).

• What is the d3 example that you are looking at?
• Can you confirm that your method works externally in HTML - and that you're not getting your intended output from the Lumira side, please?

//bijan

[Henry_Banks]

Hey Ash

please could you revert your question internally, then at a later date we can publish additional help guides for the benefit of our customers

thanks!

H