D3.jsはじめ

BigDataをグラフィカルに表現したい！

あふれた情報だけど、 D3.js を動かし始めるとこまでやってみる。 フロントエンドが久々なので、最近のトレンドも踏まえながらやってみる。

##環境構築

bower というのを使えばパッケージ管理できるらしい！すげぇ！（なぜ今まで無かったのか）

bower install d3.js

htmlコードにはこんな感じで

<head>
      ...
      <script src="bower_components/d3/dist/d3.min.js'"></script>
      ...
</head>

##D3をとりあえず動かす 適当にpタグでも作っておく

<body>
      <p id="chart"></p>
</body>

TODO:簡単に図を表示するコード

var hoge = d3
      .select("#chart")
      .append("svg")
      .attr("width", chart.width())
      .attr("height", chart.height());

##parsetsを動かしてみる 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: 0.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:画像

いい感じに出た！

あとはがんばっておもしろいデータにしてみる。