D3.js
データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ＆チャートの作り方
- 作者: 古籏一浩
- 出版社/メーカー: SBクリエイティブ株式会社
- 発売日: 2014/07/01
- メディア: Kindle版
- この商品を含むブログを見る
第13章 ツリーマップレイアウトまで。 データをビジュアル化する際には、見た目のインパクトも必要なのかな。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>SVG</title> <link href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../node_modules/octicons/octicons/octicons.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script> <![endif]--> <style media="screen"> .file { stroke: black; fill: #777; } .name { font-size: 10pt; text-anchor: middle; } svg { width: 800px; height: 800px; border: 1px solid black; } </style> </head> <body> <script src="../node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script> <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script> <div class="container"> <h1>使用文字数をスライス表示</h1> <div class="row"> <div class="col-sm-4"> <svg id="myGraph1"></svg> </div> <div class="col-sm-4"> </div> <div class="col-sm-4"> </div> </div> <script src="sample13_3.js" charset="utf-8"></script> </div> </body> </html>
var svgEle = document.getElementById("myGraph1"); var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width")); var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height")); d3.text("sample13/sample.txt", function(error, data) { var count = []; for (var i = 0; i < data.length; i++) { var c = data.charAt(i); if (!count[c]) { count[c] = 1; } else { count[c] += 1; } } var temp = []; for(i in count) { temp.push({ name: i, value: count[i] }); } var dataset = { children: temp }; drawTreemap(dataset); }); function drawTreemap(dataset) { // ツリーマップレイアウト var treemap = d3.layout.treemap() .size([svgWidth, svgHeight]); // .size([svgWidth, svgHeight]) // .mode("slice"); // ツリーマップの描画 var tmap = d3.select("#myGraph1") .selectAll("rect") .data(treemap.nodes(dataset)); // 分割マップ領域を追加 tmap.enter() .append("rect") .attr("class", "file") .attr("x", function(d, i) { return d.x; }) .attr("y", function(d, i) { return d.y; }) .attr("width", function(d, i) { return d.dx; }) .attr("height", function(d, i) { return d.dy; }) .style("opacity", 0) .transition() .delay(function(d, i) { return d.depth * 500; }) .style("opacity", function(d, i) { return d.depth / 5; }); // マップ内に文字を追加 tmap.enter() .append("text") .attr("class", "name") .attr("transform", function(d, i) { return "translate(" + (d.x + d.dx / 2) + ", " + (d.y + d.dy / 2) + ")"; }) .attr("dy", "0.2em") .text(function(d, i) { if ((d.depth == 0) || (d.children)) { return null; } return d.name; }) .style("font-size", function(d, i) { return (d.dx * d.dy) / 200; }); }
