BigDataをグラフィカルに表現したい!
あふれた情報だけど、 D3.js を動かし始めるとこまでやってみる。 フロントエンドが久々なので、最近のトレンドも踏まえながらやってみる。
bower というのを使えばパッケージ管理できるらしい!すげぇ!(なぜ今まで無かったのか)
bower install d3.js
htmlコードにはこんな感じで
<head>
...
<script src="bower_components/d3/dist/d3.min.js'"></script>
...
</head>
適当にpタグでも作っておく
<body>
<p id="chart"></p>
</body>
TODO:簡単に図を表示するコード
var hoge = d3.select("#chart").append("svg")
.attr("width", chart.width())
.attr("height", chart.height());
TODO:画像URL タイタニック号沈没の死者数をビジュアル表現した結果、 - クルー、1棟客室の客が多く生存している 事が直感的に分かるようになり、物議を醸し出したらしいです。 TODO:URL
このタイタニック号のビジュアライズをローカルでもやってみましょう。 jsとかは以下のサイトから落としてください。 TODO:URL.js TODO:URL.css TODO:URL.json
<head>
...
<script src="bower_components/d3/dist/d3.min.js'"></script>
<script src="d3.parsets.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
<style>
@import url(d3.parsets.css);
body {
font-family: sans-serif;
font-size: 16px;
width: 960px;
margin: 1em auto;
position: relative;
}
h1, h2, .dimension text {
text-align: center;
font-family: "PT Sans", Helvetica;
font-weight: 300;
}
h1 {
font-size: 4em;
margin: .5em 0 0 0;
}
h2 {
font-size: 2em;
margin: 1em 0 0.5em;
border-bottom: solid #ccc 1px;
}
p.meta, p.footer {
font-size: 13px;
color: #333;
}
p.meta {
text-align: center;
}
text.icicle { pointer-events: none; }
.options { font-size: 12px; text-align: center; padding: 5px 0; }
.curves { float: left; }
.source { float: right; }
pre, code { font-family: "Menlo", monospace; }
.html .value,
.javascript .string,
.javascript .regexp {
color: #756bb1;
}
.html .tag,
.css .tag,
.javascript .keyword {
color: #3182bd;
}
.comment {
color: #636363;
}
.html .doctype,
.javascript .number {
color: #31a354;
}
.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
color: #e6550d;
}
</style>
...
</head>
google アンケートで出身、学歴、職歴、婚歴を取ってみました。どんな見え方をするか試してみましょう。
TODO:URL history.csvにして保存します。
var chart = d3.parsets()
.dimensions(["出身", "学歴", "職歴", "婚歴"]);
を
var chart = d3.parsets()
.dimensions(["出身", "学歴", "職歴", "婚歴"]);
d3.csv("titanic.csv?201402", function(error, csv) {
を
d3.csv("history.csv", function(error, csv) {
に変更します。
TODO:画像
いい感じに出た!
あとはがんばっておもしろいデータにしてみる。