D3.js

スポンサーリンク
D3.js

D3.js サーバーのログを読み込んで、OSのシェアを表示してみる

D3.jsを利用して、サーバーログを読出して、情報を得ることができます。 サンプルコードの実行結果はこちら
D3.js

フィッシュアイプラグインを使ってみる

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利用します。 フィッシュアイプラグインはこちら まずは上記のプラグインをダウンロードします。今回は、jsフォルダ内にfisheye.j...
D3.js

グラフをソートして表示する

以前、縦棒グラフを表示するサンプルコードを書きましたが、時と場合によりただ棒グラフを表示するだけではなく、インタラクティブに表現したいことがあります。たとえば、棒グラフで商品別の売り上げを表示する時、売れている順番に並び替えたいときです。 ...
D3.js

鶏頭図(けいとうず)を表示する

D3.jsでは円グラフに一工夫を加えることで鶏頭図を表示できます。鶏頭図は円グラフと似ていますが。それぞれの扇形の中心角は一定で、量は中心からの半径で表示されます。 サンプルコードの実行結果はこちら
D3.js

ツリーレイアウトを表示する

D3.jsにはツリーレイアウト(樹形図・木構造といったりもします)を生成することができます。ツリーレイアウトは以前の記事で書いたツリーマップと似ています。データセットに必要なプロパティ(キー名)も同一です。今回のサンプルコードでは会社の組織...
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)がありま...
スポンサーリンク
タイトルとURLをコピーしました