Blog

D3.jsでアニメーション付き棒グラフを作ってみました

JavaScript でグラフを描くためのツールとして提供されている JavaScript ライブラリはたくさんありますが、
その中でも自由度が高く、人気があるのが D3.js です。

私はこれまでグラフを描くための JavaScript ライブラリとして Google Chart をよく使っていましたが、
グラフのデザインがある程度固定されており、デザインや動きをカスタマイズしようと思うと、
工夫と労力が必要となっていました。

しかし、D3.js では、かなり自由度の高いデザインのグラフを、
Google Chartよりも少ない労力で制作することができます。

D3.js はデータの視覚化ツールとして公開されているライブラリで、
ライブラリで追加したグラフを CSS でスタイリングできるなど、
カスタマイズが求められる場合などに、とても便利です。

今回は手始めに、D3.js を使って、アニメーション付きの棒グラフを作ってみました。

↓作ってみたもの
DEMO

方法

1. HTMLの枠とライブラリの読み込み

 

2. D3.js でグラフを描画

 

参考サイト

[公式 Documentation] Home · d3/d3 Wiki

[公式 サンプル] Gallery · d3/d3 Wiki

D3.jsのformatを整理 – Qiita

D3.js 基本7 – transitionでアニメーションを表示する – Deep Blend

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ