Skip to content

Instantly share code, notes, and snippets.

@abrahamdu

abrahamdu/.block

Last active April 1, 2019 01:50
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abrahamdu/e8a046fac87688aafaced8a10705dabf to your computer and use it in GitHub Desktop.
Save abrahamdu/e8a046fac87688aafaced8a10705dabf to your computer and use it in GitHub Desktop.
Download ZIP
Structure of D3 TSV Module
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
svg {
width: 100%;
height: 100%;
position: center;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.text-anchor { font-size: 22px; font-weight: bold; }
</style>
</head>
<svg width="900" height="580"></svg>
<body>
<script>
var tsv_tree = {
"name": "d3.dsvFormat",
"value": "16",
"level": "steelblue",
"children": [
{
"name": "csv",
"value": "12",
"level": "red",
"children": [
{
"name": "parse",
"value": "10",
"level": "maroon",
"children": [
{
"name": "d3.csvParse",
"value": "8",
"level": "maroon"
},
{
"name": "d3.csvParseRows",
"value": "8",
"level": "maroon"
}
]
},
{
"name": "format",
"value": "10",
"level": "pink",
"children": [
{
"name": "d3.csvFormat",
"value": "8",
"level": "pink"
},
{
"name": "d3.csvFormatRows",
"value": "8",
"level": "pink"
}
]
}
]
},
{
"name": "tsv",
"value": "12",
"level": "gold",
"children": [
{
"name": "parse",
"value": "10",
"level": "orchid",
"children": [
{
"name": "d3.tsvParse",
"value": "8",
"level": "orchid"
},
{
"name": "d3.tsvParseRows",
"value": "8",
"level": "orchid"
}
]
},
{
"name": "format",
"value": "10",
"level": "lime",
"children": [
{
"name": "d3.tsvFormat",
"value": "8",
"level": "lime"
},
{
"name": "d3.tsvFormatRows",
"value": "8",
"level": "lime"
}
]
}
]
}
]
};
var margin = {top: 30, right: 80, bottom: 30, left: 40};
var width = 900 - margin.left - margin.right;
var height = 900 - margin.top - margin.bottom;
var tree = d3.tree()
.size([height - 300, width - 200]);
var nodes = d3.hierarchy(tsv_tree, function(d) {
return d.children;
});
nodes = tree(nodes);
var g = d3.select("svg")
.append("g")
.attr("transform", "translate(" + margin.left*4 + "," + margin.top + ")");
var link = g.selectAll(".link")
.data(nodes.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.style("stroke", function(d) { return d.data.level; })
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
var node = g.selectAll(".node")
.data(nodes.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf");})
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
node.append("circle")
.attr("r", function(d) { return d.data.value; })
.style("fill", function(d) { return d.data.level; });
node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? (d.data.value ) * -1 : d.data.value})
.text(function(d) { return d.data.name; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.style("font-size", "22px")
.attr("fill", "silver");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment