D3.jsでデータを魅せる! | TECHSCORE BLOG | TECHSCORE BLOG
こんにちは、伊藤です。 この記事は、TECHSCORE Advent Calendar の19日目の記事です。 D3.jsというのは、Web上でのデータ可視化の用途に使われることが多いJavaScriptライブラリで、データを元にHTMLやCSSを操作する使い勝手の良い（と個人的には思う）ライブラリです。まぁ、詳しいことは公式サイト( http://d3js.org/ )を見ていただくとして、この投稿では、そんなD3.jsのさわりをババっと紹介してみたいと思います。 データを表示する リスト形式で表示 たとえば、以下のようなJavaScriptデータがあったとします。 var testdata = [ {"name": "A", "value": 10}, {"name": "B", "value": 20}, {"name": "C", "value": 30}, {"name": "D
東京風速
About Control | «前日 – 1時間前 – 1時間後 – 翌日» – 最新 – 現在地 Overlay | None – Temp – Hum – WV – IN – NO – NO2 – NOX OX – SO2 – CO – CH4 – NMHC – SPM – PM2.5 Air Data | 東京都環境局環境改善部大気保全課 Map Data | 国土数値情報（行政区域データ）国土交通省 Author | Cameron Beccario @cambecc, Facebook, はてな Source | github.com/cambecc/air Modules | node.js, D3.js, when.js Inspiration | HINT.FM wind map 免責事項 | 正確な情報を提供するためのものではありません
d3.jsを用いた連続アニメーション - プログラミング兼読書日記
d3ではtransitionを用いて簡単にアニメーションを実現できます。しかし、d3を用いてデータに基づく連続したアニメーションを実装することは面倒です。ここでは、連続アニメーションを若干汚い方法で実装します。 アニメーションするオブジェクトが一つの場合： 各時間に対応するオブジェクトの属性を持った配列を作成する。 オブジェクトを次の属性に変化させる再帰的な関数animateを作成する。 2.に関しては、d3のeachを用いて、animateの中でアニメーション完了後に呼ばれる関数をセットする。セットした関数の中でanimateを呼び出し、再帰的にアニメーションを実現させる。 以下にアニメーションのサンプルとソースを記載しておきます。 start ソース： <div id="sample"><button id="startbutton">start</button> <div> <scr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
earth wind map
