D3.js
データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方
- 作者: 古籏一浩
- 出版社/メーカー: SBクリエイティブ株式会社
- 発売日: 2014/07/01
- メディア: Kindle版
- この商品を含むブログを見る
第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); }