##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.
Last active
August 6, 2016 17:51
-
-
Save emmasaunders/21a30b30a583ca1a815f67cfd33371df to your computer and use it in GitHub Desktop.
d3 commands (v3)
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
| { | |
| "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" } | |
| ]} | |
| ] | |
| } | |
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: #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