2016-02

スポンサーリンク
D3.js

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

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

散布図を作成

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

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

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

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

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

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

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

2次元配列のデータを読み込んで、折れ線グラフを表示する

2次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。 サンプルコードの実行結果はこちら 折れ線グラフを描画する時に、データセットして、要素番号を指定して配...
D3.js

折れ線グラフを塗りつぶす

D3.jsでは両機内にを塗りつぶしたグラフを表示することができます。このとき、d3.svg.line()メソッドではなくて、d3.svg.area()メソッドを使います。 座標値を指定するx()、y0()、y1()()メソッドに関数を指定...
D3.js

折れ線グラフを曲線、直線、階段状に表示する

D3.jsでは折れ線グラフを直線で表示するのではなく、曲線、階段状に表示することもできます。D3.jsでは、下記の表にある補間方法があります。 補間方法 説明 linear 直線(両端が開い...
D3.js

複数の折れ線グラフを表示する

複数の折れ線グラフを表示します。今回は3つのデータを用意して、3つの折れ線グラフを表示します。目盛りを表示する部分と折れ線グラフを描画する部分を関数にします。 サンプルコードの実行結果はこちら
D3.js

折れ線グラフの縦方向の動きを分かりやすくする

縦方向の表示を2倍に、目盛り(縦、横軸)を表示する グラフの変化を大きく見せるために縦方向の表示を2倍にします。 サンプルコードの実行結果はこちら
スポンサーリンク
タイトルとURLをコピーしました