D3.js

D3.js JavaScript

データビジュアライゼーションのためのD3.js徹底入門　Webで魅せるグラフ＆チャートの作り方

データビジュアライゼーションのためのD3.js徹底入門　Webで魅せるグラフ＆チャートの作り方

付録 フィッシュアイプラグインを利用する まで。

github.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>
    <script src="./fisheye.js" charset="utf-8"></script>
    <style media="screen">
      text { font-size: 10pt; text-anchor: middle; fill: black; opacity: 0; }
      circle { stroke: none; opacity: 0.25; }
      svg { width: 320px; height: 320px; border: 1px solid black; }
    </style>
  </head>
  <body>
    <h1>フィッシュアイプラグインを利用する</h1>
    <svg id="myGraph"></svg>
    <script src="./sample_ex6.js" charset="utf-8"></script>
  </body>
</html>

var svgEle = document.getElementById("myGraph");
var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));

var dataset = {
  name: "全国", value: 128057352,
  children: [
    { name: "東京都", value: 13159388 },
    { name: "大阪府", value: 8865245 },
    { name: "愛知県", value: 7410719 },
    {
      name: "長野県", value: 2152449,
      children: [
        { name: "長野市", value: 381511 },
        { name: "松本市", value: 243037 },
        { name: "塩尻市", value: 67670 }
      ]
    }
  ]
};

var colors = d3.scale.category10();
var bubble = d3.layout.pack()
  .size([svgWidth, svgHeight]);
var pack = d3.select("#myGraph")
  .selectAll("g")
  .data(bubble.nodes(dataset))
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    return "translate(" + d.x + ", " + d.y + ")";
  });
var circle = pack.append("circle")
  .attr("r", function(d) {
    return d.r;
  })
  .style("fill", function(d, i) {
    return colors(i);
  });

pack.append("text")
  .style("opacity", 1.0)
  .text(function(d, i) {
    if (d.depth == 1) {
      return d.name;
    }
    return null;
  });

var fisheye = d3.fisheye.circular()
  .radius(100)
  .distortion(3);

d3.select("#myGraph").on("mousemove", function() {
  fisheye.focus(d3.mouse(this));
  circle.each(function(d, i) {
    d.fisheye = fisheye(d);
    d.r = d.r;
  })
  .attr("r", function(d) { return d.fisheye.z * d.r; });
});

f:id:yossk:20150627202337j:plain