8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

d3.jsとは

Last updated at Posted at 2017-02-15

d3.jsとSVG

d3.jsは、javascriptからデータを基にSVGを描画するライブラリである。Data-Driven Documents(データ駆動型ドキュメント)のDをとって、d3と命名されている。ライセンスは修正BSD。

SVG(Scalable Vector Graphics)とは、W3Cが標準化したタグ形式で画像を表現する規格で、HTML等で利用することができる。SVGの特徴として、ベクタ形式であるという点があり、ベクタ形式の画像は、拡大、縮小をしたときに劣化が起こりにくいという利点がある。

d3.jsがsvgタグと同じことができる例として、日本国旗を描くサンプルをsvgタグとd3.jsで作成した。どちらも結果は同じになる。

サンプル1

サンプル2

d3.jsはグラフを描画する用途で利用されることが多い。以下に公式のサンプルが掲載されている。

が、多くの手順を要し、棒グラフの四角形を描く、軸を描くなど、すべて自分でプログラムを作成する必要がある。データとオプションを引数とした関数を提供し、それを呼び出すだけでグラフを描画してくれるライブラリもあるが、d3.jsには、そういった機能はない。学習コストは高いが、使いこなせば、自分の好きなようにグラフを作成することができる。また、d3.jsを簡単に扱えるようにする、d3.jsのラッパーライブラリも多く存在する。

有用なリンク

有用そうな書籍

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?