D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
sytpp
Full window
Github gist
Tree Map | DataTools
<!DOCTYPE html> <meta charset="utf-8"> <html> <body> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto; position: relative; width: 800px; margin-top: 10px; } form { position: absolute; right: 10px; top: 10px; } .node { border: solid 3px white; color: white; line-height: 19px; overflow: hidden; position: absolute; text-indent: 5px; } </style> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = 800 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // var color = d3.scale.category10(); var color = d3.scale.ordinal() .domain(d3.range(3)) .range(["#013986","#FF2718","#7A7A7A"]); var treemap = d3.layout.treemap() .size([width, height]) .sticky(true) .value(function(d) { return d.size; }); var div = d3.select("body").append("div") .style("position", "relative") .style("width", (width + margin.left + margin.right) + "px") .style("height", (height + margin.top + margin.bottom) + "px") .style("left", margin.left + "px") .style("top", margin.top + "px"); d3.json("flare.json", function(error, root) { var node = div.datum(root).selectAll(".node") .data(treemap.nodes) .enter().append("div") .attr("class", "node") .call(position) .style("background", function(d) { return d.children ? color(d.name) : null; }); node.append("text") .text(function(d) { return d.children ? null : d.name; }) .style("font-size",function(d) { return d.children ? null : d.size; }); d3.selectAll("input").on("change", function change() { var value = this.value === "count" ? function() { return 1; } : function(d) { return d.size; }; node .data(treemap.value(value).nodes) .transition() .duration(1500) .call(position); }); }); function position() { this.style("left", function(d) { return d.x + "px"; }) .style("top", function(d) { return d.y + "px"; }) .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); } </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js