D3.js

D3.jsは表示処理は行わないため、SVG、canvasだけではなく、HTMLのdiv要素を使いグラフを表示することができます、ヒートマップもdiv要素を表示することができます。ヒートマップのような単純なものであれば、SVGよりdiv要素の...

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位でグラフィックを描画できるCanvasや、3D描画が可能なWebGL(Canvas 3D)があります。これまではSVGを使った記事を上げてきま...

ヒートマップはウェブページで多くクリックされた箇所や、地面や人体の温度変化を把握したいときに使われます。 D3.jsにはヒートマップを自動的にlayoutする機能は備えられていません。ということは、棒グラフと同じようにじぶんっで描画する処...

テキストファイルを読み込んで、ファイル内で使われている文字数を数えてツリーマップに表示します。　入れ子にはならないですが、使用頻度が高い文字が分かります。 サンプルコードの実行結果はこちら

ツリーマップレイアウトは、それぞれのノード全体に占める割合を把握することに向いています。たとえば、日本という国の、各エリアの人口を知りたいとき、どのエリアに人がたくさん住んでいるかを視覚的に把握することができます。 サンプルコードの実...

ツリーマップレイアウトは階層(親子)関係を利用してチャートを表示します。以前の記事で出てきたパックレイアウトと同じ仕組みです。ということは、ツリーマップレイアウトも階層化レイアウト機能の一種として用意されています。基本的な作りは変わらないの...

今回はパックレイアウトを使い日本の人口を表示します。 サンプルコードの実行結果はこちら

パックレイアウトは階層(親子)関係を利用してチャートを表すものです。D3.jsではパックレイアウトは階層化レイアウト機能の１つとしてあります。 パックレイアウト作成の基本 パックレイアウトを作成するには階層化されたJavaScrip...