<style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .node circle {<!-- [et_pb_line_break_holder] --> fill: #fff;<!-- [et_pb_line_break_holder] --> stroke: steelblue;<!-- [et_pb_line_break_holder] --> stroke-width: 3px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .node text {<!-- [et_pb_line_break_holder] --> font: 12px sans-serif;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .link {<!-- [et_pb_line_break_holder] --> fill: none;<!-- [et_pb_line_break_holder] --> stroke: #ccc;<!-- [et_pb_line_break_holder] --> stroke-width: 2px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><svg width="960" height="900"></svg><!-- [et_pb_line_break_holder] --><script src="https://spreys.com/wp-content/uploads/2018/09/d3.v4.min_.js"></script><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --> d3.csv("https://spreys.com/wp-content/uploads/2018/09/categories.csv", function(error, data) {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (error) throw error;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var svg = d3.select("svg"),<!-- [et_pb_line_break_holder] --> width = +svg.attr("width"),<!-- [et_pb_line_break_holder] --> height = +svg.attr("height"),<!-- [et_pb_line_break_holder] --> g = svg.append("g").attr("transform", "translate(40,0)");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var i = 0,<!-- [et_pb_line_break_holder] --> duration = 750,<!-- [et_pb_line_break_holder] --> root;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // declares a tree layout and assigns the size<!-- [et_pb_line_break_holder] --> var treemap = d3.tree().size([height, width]);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> data.forEach(function(d) {<!-- [et_pb_line_break_holder] --> if (d.parentId == "null") { d.parentId = null}<!-- [et_pb_line_break_holder] --> if (d.parentName == "null") { d.parentName = null}<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Assigns parent, children, height, depth<!-- [et_pb_line_break_holder] --> root = d3.stratify()<!-- [et_pb_line_break_holder] --> .id(function(d) { return d.id; })<!-- [et_pb_line_break_holder] --> .parentId(function(d) { return d.parentId; })<!-- [et_pb_line_break_holder] --> (data);<!-- [et_pb_line_break_holder] --> root.x0 = height / 2;<!-- [et_pb_line_break_holder] --> root.y0 = 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Collapse after the second level<!-- [et_pb_line_break_holder] --> root.children.forEach(collapse);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> update(root);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Collapse the node and all it's children<!-- [et_pb_line_break_holder] --> function collapse(d) {<!-- [et_pb_line_break_holder] --> if(d.children) {<!-- [et_pb_line_break_holder] --> d._children = d.children<!-- [et_pb_line_break_holder] --> d._children.forEach(collapse)<!-- [et_pb_line_break_holder] --> d.children = null<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function update(source) {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Assigns the x and y position for the nodes<!-- [et_pb_line_break_holder] --> var treeData = treemap(root);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Compute the new tree layout.<!-- [et_pb_line_break_holder] --> var nodes = treeData.descendants(),<!-- [et_pb_line_break_holder] --> links = treeData.descendants().slice(1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Normalize for fixed-depth.<!-- [et_pb_line_break_holder] --> nodes.forEach(function(d){ d.y = d.depth * 180});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // ****************** Nodes section ***************************<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Update the nodes...<!-- [et_pb_line_break_holder] --> var node = svg.selectAll('g.node')<!-- [et_pb_line_break_holder] --> .data(nodes, function(d) {return d.id || (d.id = ++i); });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Enter any new modes at the parent's previous position.<!-- [et_pb_line_break_holder] --> var nodeEnter = node.enter().append('g')<!-- [et_pb_line_break_holder] --> .attr('class', 'node')<!-- [et_pb_line_break_holder] --> .attr("transform", function(d) {<!-- [et_pb_line_break_holder] --> return "translate(" + source.y0 + "," + source.x0 + ")";<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .on('click', click);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add Circle for the nodes<!-- [et_pb_line_break_holder] --> nodeEnter.append('circle')<!-- [et_pb_line_break_holder] --> .attr('class', 'node')<!-- [et_pb_line_break_holder] --> .attr('r', 1e-6)<!-- [et_pb_line_break_holder] --> .style("fill", function(d) {<!-- [et_pb_line_break_holder] --> return d._children ? "lightsteelblue" : "#fff";<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add labels for the nodes<!-- [et_pb_line_break_holder] --> nodeEnter.append('text')<!-- [et_pb_line_break_holder] --> .attr("dy", ".35em")<!-- [et_pb_line_break_holder] --> .attr("x", function(d) {<!-- [et_pb_line_break_holder] --> return d.children || d._children ? -13 : 13;<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .attr("text-anchor", function(d) {<!-- [et_pb_line_break_holder] --> return d.children || d._children ? "end" : "start";<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .text(function(d) { return d.data.name; });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // UPDATE<!-- [et_pb_line_break_holder] --> var nodeUpdate = nodeEnter.merge(node);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Transition to the proper position for the node<!-- [et_pb_line_break_holder] --> nodeUpdate.transition()<!-- [et_pb_line_break_holder] --> .duration(duration)<!-- [et_pb_line_break_holder] --> .attr("transform", function(d) {<!-- [et_pb_line_break_holder] --> return "translate(" + d.y + "," + d.x + ")";<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Update the node attributes and style<!-- [et_pb_line_break_holder] --> nodeUpdate.select('circle.node')<!-- [et_pb_line_break_holder] --> .attr('r', 10)<!-- [et_pb_line_break_holder] --> .style("fill", function(d) {<!-- [et_pb_line_break_holder] --> return d._children ? "lightsteelblue" : "#fff";<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .attr('cursor', 'pointer');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Remove any exiting nodes<!-- [et_pb_line_break_holder] --> var nodeExit = node.exit().transition()<!-- [et_pb_line_break_holder] --> .duration(duration)<!-- [et_pb_line_break_holder] --> .attr("transform", function(d) {<!-- [et_pb_line_break_holder] --> return "translate(" + source.y + "," + source.x + ")";<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // On exit reduce the node circles size to 0<!-- [et_pb_line_break_holder] --> nodeExit.select('circle')<!-- [et_pb_line_break_holder] --> .attr('r', 1e-6);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // On exit reduce the opacity of text labels<!-- [et_pb_line_break_holder] --> nodeExit.select('text')<!-- [et_pb_line_break_holder] --> .style('fill-opacity', 1e-6);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // ****************** links section ***************************<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Update the links...<!-- [et_pb_line_break_holder] --> var link = svg.selectAll('path.link')<!-- [et_pb_line_break_holder] --> .data(links, function(d) { return d.id; });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Enter any new links at the parent's previous position.<!-- [et_pb_line_break_holder] --> var linkEnter = link.enter().insert('path', "g")<!-- [et_pb_line_break_holder] --> .attr("class", "link")<!-- [et_pb_line_break_holder] --> .attr('d', function(d){<!-- [et_pb_line_break_holder] --> var o = {x: source.x0, y: source.y0};<!-- [et_pb_line_break_holder] --> return diagonal(o, o)<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // UPDATE<!-- [et_pb_line_break_holder] --> var linkUpdate = linkEnter.merge(link);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Transition back to the parent element position<!-- [et_pb_line_break_holder] --> linkUpdate.transition()<!-- [et_pb_line_break_holder] --> .duration(duration)<!-- [et_pb_line_break_holder] --> .attr('d', function(d){ return diagonal(d, d.parent) });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Remove any exiting links<!-- [et_pb_line_break_holder] --> var linkExit = link.exit().transition()<!-- [et_pb_line_break_holder] --> .duration(duration)<!-- [et_pb_line_break_holder] --> .attr('d', function(d) {<!-- [et_pb_line_break_holder] --> var o = {x: source.x, y: source.y};<!-- [et_pb_line_break_holder] --> return diagonal(o, o)<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .remove();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Store the old positions for transition.<!-- [et_pb_line_break_holder] --> nodes.forEach(function(d){<!-- [et_pb_line_break_holder] --> d.x0 = d.x;<!-- [et_pb_line_break_holder] --> d.y0 = d.y;<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Creates a curved (diagonal) path from parent to the child nodes<!-- [et_pb_line_break_holder] --> function diagonal(s, d) {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> path = `M ${s.y} ${s.x}<!-- [et_pb_line_break_holder] --> C ${(s.y + d.y) / 2} ${s.x},<!-- [et_pb_line_break_holder] --> ${(s.y + d.y) / 2} ${d.x},<!-- [et_pb_line_break_holder] --> ${d.y} ${d.x}`;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> return path<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Toggle children on click.<!-- [et_pb_line_break_holder] --> function click(d) {<!-- [et_pb_line_break_holder] --> if (d.children) {<!-- [et_pb_line_break_holder] --> d._children = d.children;<!-- [et_pb_line_break_holder] --> d.children = null;<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> d.children = d._children;<!-- [et_pb_line_break_holder] --> d._children = null;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> update(d);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></script>

For my second assignment for the Data Visualisation course with Coursera, I have decided to build an interactive hierarchy tree of the Trade Me categories to display the relationship between different categories. I have used the complete tree with 6,734 nodes and 6,733 edges. To prevent the viewers from being overwhelmed, I have decided to make the tree collapsable, but at the same time allow the users can drill down into the specific sections of the chart as they see fit. This diagram is a directed tree and a hierarchy. Each of the categories can have multiple sub-categories (children elements), but only one parent.

The diagram is built with the help of the fourth version of D3.js. The source code is available below:


<script src="d3.v4.min.js"></script>
<svg width="960" height="900"></svg>
<script>
d3.csv("categories.csv", function(error, data) {
if (error) throw error;
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(40,0)");
var i = 0,
duration = 750,
root;
var treemap = d3.tree().size([height, width]);
data.forEach(function(d) {
if (d.parentId == "null") { d.parentId = null}
if (d.parentName == "null") { d.parentName = null}
});
// Assigns parent, children, height, depth
root = d3.stratify()
.id(function(d) { return d.id; })
.parentId(function(d) { return d.parentId; })
(data);
root.x0 = height / 2;
root.y0 = 0;
// Collapse after the second level
root.children.forEach(collapse);
update(root);
// Collapse the node and all it's children
function collapse(d) {
if(d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null
}
}
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// Normalize for fixed-depth.
nodes.forEach(function(d){ d.y = d.depth * 180});
// ****************** Nodes section ***************************
// Update the nodes…
var node = svg.selectAll('g.node')
.data(nodes, function(d) {return d.id || (d.id = ++i); });
// Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on('click', click);
// Add Circle for the nodes
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
// Add labels for the nodes
nodeEnter.append('text')
.attr("dy", ".35em")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) { return d.data.name; });
// UPDATE
var nodeUpdate = nodeEnter.merge(node);
// Transition to the proper position for the node
nodeUpdate.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
// Update the node attributes and style
nodeUpdate.select('circle.node')
.attr('r', 10)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
})
.attr('cursor', 'pointer');
// Remove any exiting nodes
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
// On exit reduce the node circles size to 0
nodeExit.select('circle')
.attr('r', 1e-6);
// On exit reduce the opacity of text labels
nodeExit.select('text')
.style('fill-opacity', 1e-6);
// ****************** links section ***************************
// Update the links…
var link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d){
var o = {x: source.x0, y: source.y0};
return diagonal(o, o)
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function(d){ return diagonal(d, d.parent) });
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y};
return diagonal(o, o)
})
.remove();
// Store the old positions for transition.
nodes.forEach(function(d){
d.x0 = d.x;
d.y0 = d.y;
});
// Creates a curved (diagonal) path from parent to the child nodes
function diagonal(s, d) {
path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`;
return path
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
}
});
</script>

view raw

digram.js

hosted with ❤ by GitHub

 

https://gist.github.com/sprejjs/6fe45e1fb8ec4cb1f698eaece0ed134a.js