Last active
March 5, 2016 20:15
-
-
Save midnightfreddie/67126b4cd3fcc62446a3 to your computer and use it in GitHub Desktop.
In reply to https://www.reddit.com/r/d3js/comments/4912bm/how_hard_would_it_be_to_tweak_this_and_insert_it/
This file contains hidden or 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> | |
| <html> | |
| <!-- NOTE: This code started with a copy of index.html from https://bl.ocks.org/mbostock/4063570 which is: --> | |
| <!-- LICENSE: GPL version 3 https://opensource.org/licenses/GPL-3.0 --> | |
| <head> | |
| <style> | |
| <meta charset="utf-8"> | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .node { | |
| font: 10px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 1280, | |
| height = 1024; | |
| var graphData = { | |
| "name" : "Root", | |
| "children" : [ | |
| { "name" : "First Thingy", "size" : 10, "color" : "red" }, | |
| { "name" : "Second Thingy", "size" : 20, "color" : "green" }, | |
| { "name" : "Thrid Thingy", "size" : 30, "color" : "blue" }, | |
| { "name" : "Fourth Thingy", "size" : 40, "color" : "orange" }, | |
| { "name" : "Fifth Thingy", "size" : 50, "color" : "purple" }, | |
| ] | |
| } | |
| var cluster = d3.layout.cluster() | |
| .size([height, width - 160]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(50,0)"); | |
| // Replace this inline function with a d3.json call to fetch external data; see mbostock's original code | |
| (function(root) { | |
| var nodes = cluster.nodes(root), | |
| links = cluster.links(nodes); | |
| var link = svg.selectAll(".link") | |
| .data(links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal) | |
| .style("stroke", function(d) { return d.target.color }) | |
| .style("stroke-width", function(d) { return d.target.size * 2 }) | |
| .style("stroke-opacity", "0.222222") | |
| .style("stroke-linecap", "round") | |
| ; | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) | |
| node.append("circle") | |
| .attr("r", function(d) { return d.size }) | |
| .attr("fill", function(d) { return d.color }) | |
| .attr("fill-opacity", "0.522222") | |
| .style("stroke", function(d) { return d.color }) | |
| ; | |
| node.append("text") | |
| .attr("dx", function(d) { return d.children ? -8 : 8; }) | |
| .attr("dy", 3) | |
| .style("text-anchor", "middle") | |
| .style("font-size", "2em") | |
| .style("font-weight", "bold") | |
| .text(function(d) { return d.name; }); | |
| })(graphData); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See rendered output: https://rawgit.com/midnightfreddie/67126b4cd3fcc62446a3/raw/dendrogram.html