D3.jsはじめ

D3.js
shikajiro — Thu 12 June 2014

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: .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:画像

いい感じに出た！

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