みなさんは『インフォグラフィック』という言葉を聞いたことがありますか？
『インフォグラフィック』とは情報を視覚的に表現し、ひと目で伝えたいことを伝えられるように工夫した図や資料などを意味しています。視覚的に伝えることに主眼を置いているので「図形、数字、イラスト」等から成り立っているものがほとんどです。
全員がデータサイエンティストである必要もなく、そして言語が異なる相手であっても、伝えたいことを相手に伝えることができるという点が『インフォグラフィック』の最大のメリットなのではないでしょうか。
今回は非デザイナー、かつ入社１年目の僕が、あえてWEB上で『インフォグラフィック』の制作に挑戦してみようと思います。
目指すところは都道府県別人口分布図、まずは下ごしらえを
何事においてもチャレンジにはゴールが必要。目標なくして挑戦はなしです。
そこで今回の挑戦のゴール地点は、日本地図上に総務省統計局から取得した都道府県別の人口分布図を“カッコよく”表示させる所までとします。
まずは表示させるためには日本地図が必要です。オネショで作った地図を使用というわけにもいきませんので、地図制作から挑戦スタート！ ここで見誤ってしまうと、仕上がりがダサい地図になりかねませんので、細心の注意を払います。
ちなみに言語はJavaScriptを使用。そしてグラフデータの扱いに長けている「D3.js」というJavaScriptライブラリを利用してみました。
そして作成したものをChromeブラウザ上で表示させたのが下の画像です。
![[bitwabe]インフォグラフへの取り組み第1回_20160804](https://bitwave.showcase-tv.com/wp-content/uploads/2016/08/580ec54bf001ae714d9faf78396e2e09.png)
参考までにソースコードも記載しておきます。
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>D3 Test</title> </head> <body> <svg id="viewport" width="600" height="500"></svg> <script src="//d3js.org/d3.v3.min.js"></script> <script src="scripts/viewer.js"></script> <script> d3.json('data/data.json?' + (+new Date()), function(error, dataset) { var viewer = new Viewer(dataset); viewer .resize() .draw(); }); </script> </body> </html> |
【JavaScript】scripts/viewer.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
(function (global) { 'use strict;'; // Define / local variables ---------------------------- var _self = null, _e = {}, _dataset = null, _sizes = null, _color = null, _DEBUG = true; // Class ------------------------------------------------ function Viewer(dataset) { _self = this; _e.viewport = d3.select('#viewport'); _dataset = dataset; _sizes = _getSizes(dataset); _color = d3.scale.category20(); } // Public methods ----------------------------------------------- Viewer.prototype.draw = draw; Viewer.prototype.resize = resize; // Implementation --------------------------------------- /** * draw * * @return void */ function draw() { try { _e.nodes = _e.viewport.selectAll('g').data(_dataset).enter() .append('g') .attr({ transform: function(d) {return 'translate(' + d.x + ',' + d.y + ')';}, }); _e.nodes.append('circle') .attr({ r: function(d) {return d.r;}, fill: function(d,i) {return _color(i);}, opacity: .9 // ,stroke: "white" }); _e.nodes.append('text') .attr({ 'text-anchor': 'middle', dy: '.35em', fill: 'white', 'font-size': '10px' }) .text(function(d) {return d.name;}); return _self; } catch (ex) { console.error(ex.message,ex.stack || ""); _DEBUG && alert(ex/message); throw ex; } } /** * resize * * @return void */ function resize() { try { _e.viewport.attr({ // width: _sizes.w, // height: _sizes.h, viewBox:[_sizes.x, _sizes.y, _sizes.w, _sizes.h].join(' '), preserveAspectRatio: 'xMidYMid' }); return _self; } catch (ex) { console.error(ex.message,ex.stack || ""); _DEBUG && alert(ex/message); throw ex; } } /** * _getSizes * * @param array dataset * @return void */ function _getSizes(dataset) { try { var res = {x: Number.MAX_VALUE, y: Number.MAX_VALUE, w: -1, h: -1}; dataset.forEach(function(i) { var x = i.x, y = i.y, r = i.r; x - r < res.x && (res.x = x - r); y - r < res.y && (res.y = y - r); x + r > res.w && (res.w = x + r); y + r > res.h && (res.h = y + r); }); res.x < 0 && (res.w += -res.x); res.y < 0 && (res.h += -res.y); return res; } catch (ex) { console.error(ex.message,ex.stack || ""); _DEBUG && alert(ex/message); throw ex; } } // Exports ---------------------------------------------- global['Viewer'] = Viewer; })((this || 0).self || global); |
今回はここまで。
次回は総務省統計局から取得した都道府県別の人口数データを元に、今回作成した地図に重ねて表示させるデータの作成を行います。
地図の仕上がりがカッコ悪くなってしまいますから、今から人口爆発なんてしないでよ～。
以上、元島でした。
