All geek questions in one place

Creating a D3.js data collector from CSV data

This might be a bit of a dumb question for those of you who are more familiar with d3, but I'm pretty new to this, and I can't figure out how to make this work:

I am trying to achieve this: http://bl.ocks.org/robschmuecker/7880033

But I would like to pass data from flat CSV, not JSON.

The problem is that the CSV that I have is formatted like this:

Parent Name | Child Name ------------------------- Parent Name | Child Name ------------------------- Parent Name | Child Name so on...

Can someone point me in the right direction? I know that the d3.csv function works somehow, but I have no idea how to “connect it” to the above example.

I'm sorry, I know it sounds like this: “Do your homework for me,” but I honestly gave him a good move, and I think I'm stuck.

Thanks. Appreciated.

+6
source share
1 answer

I did not see what you were looking for before, but this is a combination of creating a tree from flat data (which requires a bit of manipulation of the data to improve it in the correct structure), and the standard loading of data and an external source using d3.

Unfortunately, I cannot configure bl.ock to demonstrate live code, EDIT: Here is a live version of the executable code on bl.ocks.org, and the next one is the html file, which is a combination of two methods;

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Collapsible Tree Example</title> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } </style> </head> <body> <!-- load the d3.js library --> <script src="http://d3js.org/d3.v3.min.js"></script> <script> // ************** 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 [dy, dx]; }); 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 + ")"); // load the external data d3.csv("treedata.csv", function(error, data) { // *********** 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); } }); 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) { dy = 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(" + dy + "," + dx + ")"; }); 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); } </script> </body> </html>

And the next csv file that I tested is with it (named treedata.csv in the html file);

 name,parent Level 2: A,Top Level Top Level,null Son of A,Level 2: A Daughter of A,Level 2: A Level 2: B,Top Level

Kudos should go to nrabinowitz to describe data conversion here .

+6
source

Source: https://habr.com/ru/post/980897/

More articles:


All Articles