2016-03

スポンサーリンク
D3.js

積み上げ棒グラフ

D3.jsでは積み上げ棒グラフもあります。積み上げ棒グラフはグループ化のg要素を使い、その中に、rect要素を生成します。コメントはサンプルコードの中に書きました。 サンプルコードの実行結果はこちら
D3.js

フォースレイアウト

D3.jsでは、フォースレイアウトを作成する機能も用意されています。フォースレイアウトは予めノードとノードを結びつけるリンク情報が必要です。今回用意したサンプルコードではデータセットのnodesにノード情報を、linksにリンク情報が格納さ...
D3.js

日本の地図データ(国土数値情報)を使い、地図を表示する

世界地図を表示したので、今回は日本国内の地図を表示します。サンプルコードにコメントを付しましたので、そちらをご覧ください。 地図データは国土数値情報ダウンロードサービス 手順: 1.上記のリンクより表示したい都道府県の数値情報...
D3.js

地球を表示する

D3.jsでは投影方法を指定できるので、前回使用した世界地図のデータを利用して球体にマッピングして、地球儀を表示します。 サンプルコードの実行結果はこちら
D3.js

世界地図を表示する

地図のデータ形式にはいろいろなものがありますが、多くの地図データはshape形式(.shp)です。この形式はD3.jsでは扱うことができません。ほかに、JavaScriptで手軽に扱えるようにしたのがGeoJSON形式(.json)がありま...
D3.js

ヒートマップをDOMに表示する

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

ヒートマップをCanvasに表示する

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

ヒートマップを作成する

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

ツリーマップレイアウトで使用されている文字数を数えて表示する

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

ツリーマップレイアウトの階層構造をアニメーションをつけて表示する

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