D3.js ver.4 ツリーマップサンプル
forked from shimizu's block: D3 v4 - Treemap
Created
February 28, 2018 04:57
-
-
Save smokbel/c115baf81dbad6d4f51fbca519a5d6c5 to your computer and use it in GitHub Desktop.
D3 v4 - Treemap
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
| license: gpl-3.0 |
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 3 columns, instead of 2 in line 1.
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
| id,value1,value2 | |
| school, | |
| school.level, | |
| school.level.Doctorate,281,380 | |
| school.level.Masters,256,410 | |
| school.level.Bachelors,224,420 | |
| school.level.College,151,590 |
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> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>D3 v4 - treemap</title> | |
| <style> | |
| html, body, #graph { | |
| padding:0xp; | |
| margin:0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="graph"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script> | |
| <script> | |
| (function treemap(){ | |
| var width,height | |
| var chartWidth, chartHeight | |
| var margin | |
| var svg = d3.select("#graph").append("svg") | |
| var chartLayer = svg.append("g").classed("chartLayer", true) | |
| var color = d3.scaleOrdinal(d3.schemeCategory20) | |
| d3.csv("data.csv", cast, main) | |
| function cast(d) { | |
| d.value1 = +d.value1 | |
| d.value2 = +d.value2 | |
| return d | |
| } | |
| function main(data) { | |
| setSize() | |
| var toggle = function(){ | |
| var fn = arguments; | |
| var l = arguments.length; | |
| var i = 0; | |
| return function(){ | |
| if(l <= i) i=0; | |
| fn[i++](); | |
| } | |
| } | |
| var stratify = d3.stratify() | |
| .parentId(function(d) {return d.id.substring(0, d.id.lastIndexOf(".")); }); | |
| var root1 = stratify(data).sum(function(d) { return d.value1 }) | |
| var root2 = stratify(data).sum(function(d) { return d.value2 }) | |
| var treemap = d3.treemap() | |
| .size([chartWidth, chartHeight]) | |
| .padding(1) | |
| .round(true); | |
| treemap(root2) | |
| treemap(root1) | |
| var changeDraw = toggle(function(){ | |
| drawChart(root1) | |
| }, | |
| function(){ | |
| drawChart(root2) | |
| }) | |
| setInterval(changeDraw, 6000) | |
| changeDraw() | |
| } | |
| function setSize() { | |
| width = document.querySelector("#graph").clientWidth | |
| height = document.querySelector("#graph").clientHeight | |
| margin = {top:0, left:0, bottom:0, right:0 } | |
| chartWidth = width - (margin.left+margin.right) | |
| chartHeight = height - (margin.top+margin.bottom) | |
| svg.attr("width", width).attr("height", height) | |
| chartLayer | |
| .attr("width", chartWidth) | |
| .attr("height", chartHeight) | |
| .attr("transform", "translate("+[margin.left, margin.top]+")") | |
| } | |
| function drawChart(root) { | |
| //data bind | |
| var node = chartLayer | |
| .selectAll(".node") | |
| .data(root.leaves(), function(d){ return d.id }) | |
| node | |
| .selectAll("rect") | |
| .data(root.leaves(), function(d){ return d.id }) | |
| node | |
| .selectAll("text") | |
| .data(root.leaves(), function(d){ return d.id }) | |
| // enter | |
| var newNode = node.enter() | |
| .append("g") | |
| .attr("class", "node") | |
| newNode.append("rect") | |
| newNode.append("text") | |
| // update | |
| chartLayer | |
| .selectAll(".node rect") | |
| .transition() | |
| .delay(function(d,i){ return i * 100 }) | |
| .duration(2000) | |
| .attr("x", function(d) { return d.x0 }) | |
| .attr("y", function(d) { return d.y0 }) | |
| .attr("width", function(d) { return d.x1 - d.x0 }) | |
| .attr("height", function(d) { return d.y1 - d.y0}) | |
| .attr("fill", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); }) | |
| chartLayer | |
| .selectAll(".node text") | |
| .transition() | |
| .delay(function(d,i){ return i * 100 }) | |
| .duration(2000) | |
| .text(function(d,i){return d.id }) | |
| .attr("y", "1.5em") | |
| .attr("x", "0.5em") | |
| .attr("font-size", "1.0em") | |
| .attr("transform", function(d){ return "translate("+[d.x0, d.y0]+")" }) | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment