9
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

d3.jsとは

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のラッパーライブラリも多く存在する。

有用なリンク

有用そうな書籍

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
9
Help us understand the problem. What are the problem?