Skip to content

Instantly share code, notes, and snippets.

@emmasaunders

emmasaunders/d3Functions.json

Last active August 6, 2016 17:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emmasaunders/21a30b30a583ca1a815f67cfd33371df to your computer and use it in GitHub Desktop.
Save emmasaunders/21a30b30a583ca1a815f67cfd33371df to your computer and use it in GitHub Desktop.
Download ZIP
d3 commands (v3)
Raw
readme.md

##Explanation If viewing as a d3 block on tree diagrams, click Open below the graphic to see the full graphic. Shows (nearly) all d3 commands in diagrammatic form. D3 commands can be added along a path, e.g. d3.time.format.utc is a legitimate command. Taken from the d3 API in May 2016.

Raw
d3Functions.json
{
"name": "d3",
"children": [
{
"name": "svg",
"children": [
{"name":"axis"},
{ "name":"line", "children": [{"name":"radial"}]},
{ "name":"area", "children": [{"name":"radial"}] },
{ "name":"diagonal", "children": [{"name":"radial"}]},
{ "name":"arc" },
{ "name":"symbol" },
{ "name":"chord" },
{"name":"brush"}
]},
{
"name": "layout",
"children": [
{"name":"bundle" },
{"name":"chord" },
{"name":"cluster" },
{"name":"force" },
{"name":"hierarchy" },
{"name":"histogram" },
{"name":"pack" },
{"name":"partition" },
{"name":"pie" },
{"name":"stack" },
{"name":"tree" },
{"name":"treemap" }
]},
{
"name": "geo",
"children": [
{"name":"path" },
{"name":"graticule" },
{"name":"circle" },
{"name":"area" },
{"name":"bounds" },
{"name":"centroid" },
{"name":"distance" },
{"name":"interpolate" },
{"name":"length" },
{"name":"rotation" },
{"name":"projection" },
{"name":"Albers et al." },
{"name":"stream" },
{"name":"transform" },
{"name":"clipExtent" }
]},
{
"name": "geom",
"children": [
{"name":"voronoi" },
{"name":"quadtree" },
{"name":"polygon" },
{"name":"hull" }
]},
{
"name": "behavior",
"children": [
{"name":"drag" },
{"name":"zoom" }
]},
{
"name": "time",
"children": [
{"name":"scale" },
{"name":"interval" },
{"name":"day, week, et al." },
{"name":"format", "children": [{"name":"multi"},{"name":"iso"},{"name":"utc"}] }
]},
{
"name": "scale",
"children": [
{"name":"ordinal" },
{"name":"linear" },
{"name":"log" },
{"name":"quantize" },
{"name":"quantile" },
{"name":"threshold" },
{"name":"identity" },
{"name":"pow" },
{"name":"sqrt" },
{"name":"category10()" },
{"name":"category20()" },
{"name":"category20b()" },
{"name":"category20c()" }
]},
{
"name": "",
"children": [
{"name":"rgb" },
{"name":"hsl" },
{"name":"hcl" },
{"name":"lab" }
]},
{
"name": "",
"children": [
{"name":"xhr" },
{"name":"json" },
{"name":"text" },
{"name":"html" },
{"name":"xml" },
{"name":"csv" },
{"name":"tsv" },
{"name":"dsv" }
]},
{
"name": "",
"children": [
{"name":"select" },
{"name":"selectAll" },
{"name":"selection" }
]},
{
"name": "",
"children": [
{"name":"nest" },
{"name":"map" },
{"name":"set" }
]},
{
"name": "",
"children": [
{"name":"event" },
{"name":"mouse" },
{"name":"touch" },
{"name":"touches" }
]},
{
"name": "",
"children": [
{"name":"transition" },
{"name":"ease" },
{"name":"timer" },
{"name":"dispatch" },
{"name":"interpolate" }
]}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node circle:hover {
fill: steelblue;
cursor: pointer;
}
.node {
font: 11px sans-serif;
fill: gray;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.rectLabel {
fill: white;
opacity: 1;
}
</style>
<body>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script>
var d = document, e = d.documentElement, w = e.clientWidth, h = e.clientHeight ;
var width = w,
height = h*2;
var cluster = d3.layout.cluster()
.size([height, width -500]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var svg = d3.select("body").select("svg").append("g")
.attr("transform", "translate(80,0)");
d3.json("d3Functions.json", function(json) {
var nodes = cluster.nodes(json);
var gapY = nodes[1].y; //we rotate tree diagram so level 1 y value equals horizontal distance between 'd3' and 'svg'
var nodes2 = nodes.map(function(d) { return {children: d.children, depth: d.depth, name: d.name, parent: d.parent, x: d.x, y: d.depth * gapY};});
var links1 = cluster.links(nodes2);
var links2 = links1.map(function(d) { return { source: {children: d.source.children, depth: d.source.depth, name: d.source.name, parent: d.source.parent, x: d.source.x, y: d.source.depth * gapY}, target: {children: d.target.children, depth: d.target.depth, name: d.target.name, parent: d.target.parent, x: d.target.x, y: d.target.depth * gapY}};});
var link = svg.selectAll("path.link")
.data(links2)
.enter().append("path")
.attr("class", "link")
.attr("d", elbow);
var node = svg.selectAll("g.node")
.data(nodes2)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.filter(function(d){ return d.name.length>0; })
.attr("r", 4);
node.append("text")
.filter(function(d){ return d.name.length>0; })
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("class","textLabel")
.attr("id",function(d,i){ return "txt"+i; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
var objs = document.querySelectorAll("text.textLabel");
var widths = [];
for (var o=0; o<objs.length; o++) {
var obj = document.getElementById(objs[o].id);
var bb = obj.getBoundingClientRect();
widths.push(bb.width);
}
node.append("rect")
.filter(function(d){ return d.name.length>0; })
.attr("x", function(d,i){ return d.children ? (-1*widths[i])-12 : 9 ;})
.attr("class","rectLabel")
.attr("id",function(d,i){ return "rect"+i; })
.attr("y", -4)
.attr("height","10")
.attr("width", function(d,i) { return widths[i] + 4; });
node.append("text")
.filter(function(d){ return d.name.length>0; })
.attr("dx", function(d) { return d.children ? -8 : 8; })
.attr("class","textLabel")
.attr("id",function(d,i){ return "txt"+i; })
.attr("dy", 3)
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.name; });
});
function elbow(d, i) {
return "M" + d.source.y + "," + d.source.x
+ "V" + d.target.x + "H" + (d.target.y-0);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment