forked from mbostock's block: Radial Dendrogram
Last active
July 17, 2018 09:28
-
-
Save ale0xb/e08dbceff36b122bc564339318714582 to your computer and use it in GitHub Desktop.
Thesaurus Visualization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 | |
border: no | |
height: 900 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.node circle { | |
fill: #999; | |
} | |
.node text { | |
font: 10px sans-serif; | |
} | |
.node--internal circle { | |
fill: #555; | |
} | |
.node--internal text { | |
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; | |
} | |
.link { | |
fill: none; | |
stroke: #555; | |
stroke-opacity: 0.4; | |
stroke-width: 1.5px; | |
} | |
</style> | |
<svg width="960" height="900"></svg> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script> | |
var burrow = function(table) { | |
// create nested object | |
var obj = {}; | |
table.forEach(function(row) { | |
// start at root | |
var layer = obj; | |
// create children as nested objects | |
row.taxonomy.forEach(function(key) { | |
layer[key] = key in layer ? layer[key] : {}; | |
layer = layer[key]; | |
}); | |
}); | |
// recursively create children array | |
var descend = function(obj, depth) { | |
var arr = []; | |
var depth = depth || 0; | |
for (var k in obj) { | |
var child = { | |
name: k, | |
depth: depth, | |
children: descend(obj[k], depth+1) | |
}; | |
arr.push(child); | |
} | |
return arr; | |
}; | |
// use descend to create nested children arrys | |
return { | |
name: "root", | |
children: descend(obj, 1), | |
depth: 0 | |
} | |
}; | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"), | |
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + (height / 2 + 20) + ")"); | |
var stratify = d3.stratify() | |
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf("->")); }); | |
var radius = 480; | |
var tree = d3.tree() | |
.size([360, 360]) | |
.separation(function(a,b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }) | |
d3.csv("thesaurus.csv", function(error, data) { | |
if (error) throw error; | |
data = data.filter(d => d['Picture_id'] == "4") | |
data.forEach(row => { | |
row.taxonomy = row.Hierarchy.split("->"); | |
}) | |
var root = d3.hierarchy(burrow(data)); | |
tree(root) | |
var link = g.selectAll(".link") | |
.data(root.descendants().slice(1)) | |
.enter().append("path") | |
.attr("class", "link") | |
.attr("d", function(d) { | |
return "M" + project(d.x, d.y) | |
+ "C" + project(d.x, (d.y + d.parent.y) / 2) | |
+ " " + project(d.parent.x, (d.y + d.parent.y) / 2) | |
+ " " + project(d.parent.x, d.parent.y); | |
}); | |
var node = g.selectAll(".node") | |
.data(root.descendants()) | |
.enter().append("g") | |
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) | |
.attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; }); | |
node.append("circle") | |
.attr("r", 2.5); | |
node.append("text") | |
.attr("dy", "0.4em") | |
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : 0; }) | |
.attr("y", function(d) { return d.depth % 2 == 0 ? 4 : -6; }) | |
.style("text-anchor", function(d) { return d.x < 180 === !d.children ? "end" : "middle"; }) | |
.style("font-size", 4) | |
.attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; }) | |
.text(function(d) { return d.data.name; }); | |
}); | |
function project(x, y) { | |
var angle = (x - 90) / 180 * Math.PI, radius = y; | |
return [radius * Math.cos(angle), radius * Math.sin(angle)]; | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |