2016-03

スポンサーリンク
D3.js

ツリーマップを表示する

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

JSONデータを読み込んで、ボタンでパックレイアウトで表示するデータを切り替える

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に3つのボタンを設けて、ボタンを押すと読み込むデータを切り替えてパックレイアウトを表示するコードを書いてみます。 サンプルコードの実行結果...
D3.js

パックレイアウトで人口を表す

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

パックレイアウトの生成

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

CSVファイルからデータを読み込んで、ヒストグラムを表示する

クラス別の点数をデータにしたCSVファイルを読み込んで、ボタンをクリックするとほかのクラスの成績表がみれるプログラムをかきます。 サンプルコードの実行結果はこちら
D3.js

ヒストグラムの表示データの範囲を指定

前回のヒストグラムの記事で点数の範囲を10点刻みではなく5点、20点など任意の範囲で表示できるようにしてみます。下記のように入力フォームを使ってみます。 サンプルコードの実行結果はこちら サンプルコー...
D3.js

ヒストグラムを作成する

ヒストグラムはデータの分布状況を調べるのに便利です。D3.jsではヒストグラムを表示するためのレイアウト機能が備え付けられています。 ヒストグラム作成の基本 HTMLファイルには、予めヒストグラムで表示する棒などのstyleをCSS...
D3.js

CSVファイルからデータを読み込んで、アニメーションも付けて散布図を表示してみる

タイトルの通りです。CSVファイルを読み込んで、散布図を表示します。今回の記事の後半部分では、読み込んだ数値に合わせてグラフの縦軸、横軸の幅も対応させた散布図を作成します。 サンプルコードの実行結果はこちら ...
D3.js

散布図でツールチップを表示してみる

グリッド上に配置されている円「●」にマウスカーソルがのったとき、ツールチップを表示します。グラフ上で表現できる情報には限りがあります。より多くの情報を表示したいときはツールチップが便利です。 サンプルコードの実行結果はこちら ...
D3.js

散布図にグリッドを表示してみる

目盛りの表示は何度もしました。散布図でも縦軸、横軸を表示しました。 今回は、グリッド(マス目)を表示します。 D3.jsでは、rangeメソッドを使うと範囲の値を自動的に生成します。 横方向のグリッドを20間隔で生成する場...
スポンサーリンク
タイトルとURLをコピーしました