GUNMA GIS GEEK

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

*

【D3.js】3D風のラインチャートを作る

     - CSS, d3.js

  • このエントリーをはてなブックマークに追加

css 3d line chart

example

D3.jsを使って3D風の線グラフをつくってみました。
手前から奥に向かって進むようなアニメーションになっています。

解説

実は、たいしたことは何もしていません。
D3.jsで普通に線グラフを描き、cssのtransformプロパティをsvg要素に適用して奥行きを出しているだけです。

アニメーションはD3.jsのトランジション機能でチャートを描画したg要素のx軸を変化させることで、奥に進むような表現を実装しています。

関連

【D3.js】おさらい2回目 線グラフ

 - CSS, d3.js

  • このエントリーをはてなブックマークに追加

  関連記事

no image
【D3.js】 値の正規化(d3.scale)

例えば、上記の …

opendatamap
オープデータを公開している都市に色を塗ってみた。

はやく真っ赤に(あるいは緑に)日本全体が染まればいいのに。 example オー …

高崎市 平成27年度の主要新規事業予算
高崎市 平成27年度の主要新規事業予算の一部を視覚化してみた。

example 「高崎市の予算(平成27年度)当初予算の概要及び主要事業」より、 …

Force-Directed Japan
【D3.js】Force-Directed Japan

example 「Force-Directed States of Americ …

volonoilabel000003
ボロノイ図を使ってラベルの重なり合いを解消する

画像をクリックすると、デモページに飛びます。 見づらいラベル 地図上に沢山のラベ …

円の外周から外周にラインを引く
【D3.js】円の外周から外周にラインを引く(暫定)

example * 表示されない場合はリロードしてください。 まぁ、見てのとおり …

d3 floorplan
【D3プラグイン】フロアマップを表示する「Floor Plan」

example 「Floor Plan」は図面上にレイヤーを重ねて、ポリンゴンデ …

webix + D3 Responsive Map
WebixとD3.jsを使ってレスポンシブな地図を作成する

Webix Advent Calendar 2014 17日目の記事です。 グラ …

tmsxxxxxxxxxxxx
【D3.js】ラスター地図のパン/ズーム&移動

OpenStreetMap TMS(Tile Map Service)から地図画 …

【D3.js】トランジション終了時にコールバックを呼ぶ
【D3.js】トランジション終了時にコールバックを呼ぶ

D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …