tl;dr
How to make Radial Tidy Tree work with JSON tree data from networkx's
node_link_data(G[, attrs])ortree_data(G, root[, attrs])?How to make D3 Cluster Dendrogram work with JSON tree data from networkx's
node_link_data(G[, attrs])ortree_data(G, root[, attrs])?How to make D3 Tidy Tree work with JSON tree data from networkx's
node_link_data(G[, attrs])ortree_data(G, root[, attrs])?
The examples don't use the JSON format, but a CSV-style input.
The long version
Hi,
I am using Python and networkx to generate graph data (which is mostly tree-like). I can export the data to JSON using the networkx functions mentioned on their page:
node_link_data(G[, attrs]): Return data in node-link format that is suitable for JSON serialization and use in Javascript documents.adjacency_data(G[, attrs]): Return data in adjacency format that is suitable for JSON serialization and use in Javascript documents.tree_data(G, root[, attrs]): Return data in tree format that is suitable for JSON serialization and use in Javascript documents.
The documentation of networkx explicitly mentions:
tree like in the d3.js example
However, the linked example doesn't seem to make use of the JSON tree format, but uses a csv type of input. As my javascript-skilz are essentially zero, I do not understand how to make Mike Bostock's example work with the JSON data I have. Can you help?
Example JSON
{
"issueid": "3295658",
"issuetype": "Portfolio-Epic",
"status": "In Progress",
"pirank": 24,
"id": "ATROB-2523",
"children": [
{
"issueid": "3288189",
"issuetype": "Epic",
"status": "Implementation",
"id": "ATTDATA-233",
"children": [
{
"issueid": "3305730",
"issuetype": "Task",
"status": "Implementation",
"id": "ATTDATA-363"
},
{
"issueid": "3305723",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-361"
},
{
"issueid": "3301728",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-336"
},
{
"issueid": "3297381",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-300"
},
{
"issueid": "3295913",
"issuetype": "Task",
"status": "Review",
"id": "ATTDATA-290"
},
{
"issueid": "3295893",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-289"
},
{
"issueid": "3291658",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-256"
},
{
"issueid": "3291653",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-255"
},
{
"issueid": "3291530",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-253"
},
{
"issueid": "3290232",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-247"
},
{
"issueid": "3287061",
"issuetype": "Task",
"status": "Resolved",
"id": "ATTDATA-226"
}
]
},
{
"issueid": "3300899",
"issuetype": "Request",
"status": "REJECTED",
"id": "ATI-1478"
}
]
}
tl;dr
How to make Radial Tidy Tree work with JSON tree data from networkx's
node_link_data(G[, attrs])ortree_data(G, root[, attrs])?How to make D3 Cluster Dendrogram work with JSON tree data from networkx's
node_link_data(G[, attrs])ortree_data(G, root[, attrs])?How to make D3 Tidy Tree work with JSON tree data from networkx's
node_link_data(G[, attrs])ortree_data(G, root[, attrs])?
The examples don't use the JSON format, but a CSV-style input.
The long version
Hi,
I am using Python and networkx to generate graph data (which is mostly tree-like). I can export the data to JSON using the networkx functions mentioned on their page:
node_link_data(G[, attrs]): Return data in node-link format that is suitable for JSON serialization and use in Javascript documents.adjacency_data(G[, attrs]): Return data in adjacency format that is suitable for JSON serialization and use in Javascript documents.tree_data(G, root[, attrs]): Return data in tree format that is suitable for JSON serialization and use in Javascript documents.
The documentation of networkx explicitly mentions:
tree like in the d3.js example https://bl.ocks/mbostock/4063550
However, the linked example doesn't seem to make use of the JSON tree format, but uses a csv type of input. As my javascript-skilz are essentially zero, I do not understand how to make Mike Bostock's example work with the JSON data I have. Can you help?
Example JSON
{
"issueid": "3295658",
"issuetype": "Portfolio-Epic",
"status": "In Progress",
"pirank": 24,
"id": "ATROB-2523",
"children": [
{
"issueid": "3288189",
"issuetype": "Epic",
"status": "Implementation",
"id": "ATTDATA-233",
"children": [
{
"issueid": "3305730",
"issuetype": "Task",
"status": "Implementation",
"id": "ATTDATA-363"
},
{
"issueid": "3305723",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-361"
},
{
"issueid": "3301728",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-336"
},
{
"issueid": "3297381",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-300"
},
{
"issueid": "3295913",
"issuetype": "Task",
"status": "Review",
"id": "ATTDATA-290"
},
{
"issueid": "3295893",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-289"
},
{
"issueid": "3291658",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-256"
},
{
"issueid": "3291653",
"issuetype": "Task",
"status": "Closed",
"id": "ATTDATA-255"
},
{
"issueid": "3291530",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-253"
},
{
"issueid": "3290232",
"issuetype": "Task",
"status": "Open",
"id": "ATTDATA-247"
},
{
"issueid": "3287061",
"issuetype": "Task",
"status": "Resolved",
"id": "ATTDATA-226"
}
]
},
{
"issueid": "3300899",
"issuetype": "Request",
"status": "REJECTED",
"id": "ATI-1478"
}
]
}
- Can you share an example output json for a simple tree (say 3-8 nodes)? – Andrew Reid Commented Sep 6, 2018 at 15:46
- if your python skills are good then a fast read on the mozilla website on how to do it in Javascript would not be a problem. – rioV8 Commented Sep 6, 2018 at 15:50
- @rioV8 : Sorry, I (re-)started learning python only two weeks ago.... :/ Could you add a link to where I could start reading? Thanks :) – hcc23 Commented Sep 6, 2018 at 15:55
1 Answer
Reset to default 5Mike Bostock's linked example converts CSV data into hierarchical form using d3.stratify:
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
[... later in the code...]
var root = tree(stratify(root));
In your case, your data is already in hierarchical form, so you can run it through d3.hierarchy to convert it into a d3-type hierarchy and then create a chart with it:
var root = tree(d3.hierarchy(data));
You will also need to change the function that pulls in the data from d3.csv to d3.json:
// assume your data is in `data.json`
d3.json("data.json", function(error, data) {
So the top of the script now looks like this:
<script type="text/javascript">
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");
var tree = d3.tree()
.size([2 * Math.PI, 300])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
d3.json("data.json", function(error, data) {
if (error) throw error;
var root = tree(d3.hierarchy(data));
Here's a .block with the tree from the JSON data you supplied above.