D3.js

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

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

第14章 ヒートマップまで。 すごいけど、どう使うか。 今日棒グラフを試してみたが、基本コピペだかすごい苦労した。苦労したあげく、軸があわなかった。修行が足りん。

<!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]-->
  </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>
    <script src="../node_modules/three/three.min.js" charset="utf-8"></script>
    <h1>ヒートマップをWebGLで表示</h1>
    <div id="myGraph1"></svg>
    <script src="sample14_6.js" charset="utf-8"></script>
  </body>
</html>
var webglWidth = 320;
var webglHeight = 320;

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(webglWidth, webglHeight);
renderer.setClearColor(0xffffaf);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(70, 1.0, 1, 1000);
camera.position.set(0, 0, 70);
var scene = new THREE.Scene();
var cube = [];
var light = new THREE.DirectionalLight(0xffffff, 1.25);
light.position.set(70, 120, 2000);
scene.add(light);

var blockSize = 20;
var dataset = [
  0, 1, 2, 3, 3, 4, 5, 4,
  0, 0, 0, 3, 4, 4, 5, 3,
  1, 0, 0, 0, 0, 0, 0, 0,
  2, 6, 8, 7, 0, 0, 0, 2,
  4, 8, 9, 8, 0, 0, 1, 0,
  2, 6, 8, 6, 4, 0, 0, 0,
  2, 5, 3, 0, 2, 0, 0, 0,
  1, 2, 0, 0, 0, 0, 0, 0,
  1, 0, 0, 0, 0, 7, 8, 9,
  0, 0, 0, 0, 7, 9, 9, 9,
  0, 0, 0, 7, 8, 8, 9, 7,
  0, 0, 0, 6, 6, 7, 6, 5
];

var color = d3.interpolateHsl("blue", "yellow");
var maxValue = d3.max(dataset);

var heatMap = d3.select("#myGraph")
  .selectAll("div")
  .data(dataset);

heatMap.enter()
  .call(function(d) {
    var count = 0;
    for (var y = 0; y < 12; y++) {
      for (var x = 0; x < 8; x++) {
        cube[count] = new THREE.Mesh(
          new THREE.BoxGeometry(5, 5, 5),
          new THREE.MeshLambertMaterial({ color: 0x00ff00 })
        );
        cube[count].position.x = x * 8 - 25;
        cube[count].position.y = y * 8 - 45;
        scene.add(cube[count]);
        count += 1;
      }
    }
  });

setInterval(function() {
  for (var i = 0; i < dataset.length; i++) {
    var n = ((Math.random() * 3.5) | 0) - 2;
    dataset[i] += n;
    if (dataset[i] < 0) { dataset[i] = 0; }
    if (dataset[i] > maxValue) { dataset[i] = maxValue; }
  }

  heatMap.data(dataset);
  for (var i = 0; i < dataset.length; i++) {
    cube[i].material.color = new THREE.Color(color(dataset[i] / maxValue));
  }
}, 1000);

cubeAnime();

function cubeAnime() {
  requestAnimationFrame(cubeAnime);
  for (var i = 0; i < cube.length; i++) {
    cube[i].rotation.x -= 0.01;
    cube[i].rotation.y += 0.02;
    cube[i].rotation.z += 0.02;
  }
  camera.rotation.z += 0.01;
  renderer.render(scene, camera);
}

f:id:yossk:20150618223223j:plain f:id:yossk:20150618223234j:plain