D3.js

スポンサーリンク
D3.js

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

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

ヒストグラムを作成する

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

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

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

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

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

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

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

散布図のデータに応じて目盛りを調整する

散布図に目盛りを表示してみます。 サンプルコードの実行結果はこちら サンプルコードについて・・・ 今回は今までのサンプルコードとは、違う点があります。それはデータセットから最大値を求めて、そ...
D3.js

散布図を作成

散布図は2つの項目の関係性を調べるのに利用します。。D3.jsでは散布図を表示すための専用のレイアウト機能は用意されていないので、SVG図形を作成して、自分で表示するための座標データを作成する必要があります。 折れ線グラフで読み込んデ...
D3.js

ボタンをクリックして、折れ線グラフの表示範囲を変える

JSONファイルからデータを読み込んで折れ線グラフを表示します。グラフのデータの読み込みは10年分のみにします。 サンプルコードの実行結果はこちら サンプルコードについて・・・ ...
D3.js

データセットと日付を対応させてみる

前回の記事で、JSON形式のデータを扱ったデータには、折れ線グラフの数値だけではなく、年度のデータも含まれています。今回は横軸である下の目盛りにデータのの年数を表示します。 { year : 2006, value1 : 12...
D3.js

JSONみたいなデータを読み込んでグラフにする

まずは、サンプルコードの実行結果はこちら 今回紹介するのも複数の線グラフを表示するものですが、データセットの書き方が違います。今回はJSON形式のデータで線グラフを表示します。 下記は、前回の記事...
スポンサーリンク
タイトルとURLをコピーしました