読者です 読者をやめる 読者になる 読者になる

Make Local Happiness

自分の幸せは自分で作る!!!

3.xのバブルチャートを4系に書き換えてみる

d3.js データビジュアライズ バブルチャート 書き換えてみる d3v4

f:id:iwate_takayu:20161005215354p:plain

昨日に引き続き3.x系のサンプルを4系に書き直して行こうと思います。 当分はネタがない時はこれで行こうかと思っています。 Gistページの人気順に4系にしていきたいと思います。

完成品 Bubble Chart in v4 - bl.ocks.org

バブルチャート

バブルチャートとは分類毎のデータを円の大きさで表すグラフです。 軸が1つしかない分ぱっと見てわかりやすいんですが、 使い所が難しそうなチャートですね。

円の大きさと色の濃さで軸を変えてもいいですが、
その場合は余計にわかりづらくなるので、1軸で使うのがいいかと思います。

ただ、バブルチャートもインタラクティブに軸を変更できると、 表現力の低さは補えます。

こちら古いですが、
オバマ大統領の2013年度の予算案はとてもわかりやすく見ることができます。

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0

実装

変更点はこちらです。

  • index.html 17行目
    d3.schemeCategory20cは関数ではなく、ただの配列になったので、 Scaleを追加する必要があります。
color = d3.scale.category20c();
↓  
color = d3.scaleOrdinal(d3.schemeCategory20c);
  • 19行目 3系でd3.layout.XXX系の関数名は間にlayoutがなくなりました。 sortも階層型のデータを作る関数のd3.hierarchy側でやるようになりました。
var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);  
↓
var bubble = d3.pack()
    .size([diameter, diameter])
    .padding(1.5);
  • 31行目 d3.packで取り込める形にデータを加工していきます。
  var root = d3.hierarchy(flatten(data))
      .sort(null)
      .sum((d) => d.value);

まとめ

Bubble Chart in v4 - bl.ocks.org

今回も3系と表示が変わってしまいました。
時間がある時に調べてみたいと思います。
他は簡単なチャートなので実装では特に詰まるところはなかったです。

55行目のflatten関数はネストされたデータを平らにしているのですが、 d3.flattenのような関数であってもいいかもなと思いました。

今日気づいたのですが、GistもForkできるんですね。
表示されているけど、昨日まで気づかなかった。。
今回のGistではForkしました。

Forking and cloning gists - User Documentation

また、GistのコードはGithubカレンダーには反映されないですね。。
これは結構かなしいですね。
対応してくれないか聞いてみようかな。