GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

[D3.js]トランジションをpromiseを使って管理する。

     - d3.js ver.3

はてなブックマーク - [D3.js]トランジションをpromiseを使って管理する。
Pocket

タイトルのまんまの内容です。

仕事でデータビジュアライゼーションを作成していると、「AとBの要素のトランジションが完了してから、Bのトランジションを始める」など複雑なアニメーションが必要になることが多々有ります。
複数の要素を動かしつつトランジションを繋ぐのにコールバックでは複雑になりすぎて管理が難しいので、最近はpromiseを使っています。まだ使いこなせていませんが、便利なのでサンプルコードを載せておきます。

example

はてなブックマーク - [D3.js]トランジションをpromiseを使って管理する。
Pocket

 - d3.js ver.3

  関連記事

datamatic.io
D3.jsを使ったグラフを簡単に作成できるChromeアプリ「datamatic.io」

Chromeウエブストア datamatic.io 「datamatic.io」 …

データビジュアライゼーション「d3.js」

最近、「データビジュアライゼーション」に興味を持ち始め d3.js というjav …

群馬県 地域別対前月人口増減
群馬県 地域別対前月人口増減

example 先週末のもくもく会で作っていたページです。 週末もくもく会 in …

【D3.js】 データの取得(ダウンロードできる公開情報まとめ)

公開データまとめ データを可視化するにも、そもそもデータがなければ始まらないので …

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化
「エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化」感想

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 …

neighborscolor
【D3.js】隣接区の数で地図に色塗りをしてみました。

example 隣接する区画を表示するの続きです。 隣接するエリア数を元にコロプ …

【D3.js】時間毎のアクセス数を可視化

今回は、週ごとと曜日ごとへの並べ変えができるようにしてみました。 データセットの …

d3.js
D3勉強会に関するアンケートにご協力ください

去年、2回ほどD3に関する勉強会を開催させていただきました。 D3.jsの勉強会 …

「D3をはじめよう」 サンプルコード

「Getting Started with D3」の日本語版「D3をはじめよう」 …

可視化失敗例
データビジュアライゼーション失敗

目的を頭に置き続けましょう。それが試金石となり、導きの光となります。円形のレイア …