Visualizing Trade Me Category Tree

<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>