D3.js

スポンサーリンク
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倍にします。 サンプルコードの実行結果はこちら
D3.js

折れ線グラフを作ってみる

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータを把握する時に使われます。円グラフはD3.jsに用意されたレイアウト機能を利用しましたが、折れ線グラフの場合はレイアウト機能は用意されていま...
D3.js

外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。 サンプルコードの実行結果はこちら CSVファイルを読み込んでグラフを表示する方法は、縦棒グラフを表示させ...
D3.js

円グラフに数値とテキストを加えてみる

円グラフの中央にテキストを表示する 円グラフの中に文字を表示してみます。円グラフ中央に合計値を表示します。D3.jsでは便利な機能があります。配列内の合計値を取得するには、d3.sum()メソッドを使います。パラメーターに配列を指定すると...
D3.js

円グラフにアニメーションを付けて表示する

記事のタイトルの通り、円グラフをアニメーションさせながら表示させてみます。円グラフを0度から360度まで1周して表示されるアニメーションを作成してみます。基本てなことは棒グラフのアニメーションと一緒です。attr()メソッドで初期値を設定し...
D3.js

円グラフの色分けしてみる

円グラフは、それぞれの扇の部分が色分けされているのが普通です。扇形部分を色分けするにはstyle()メソッドを使い、塗の色を指定します。D3.jsでは予め用意されたカラーを利用することもできます。それと自分で色を指定することもできます。 ...
スポンサーリンク
タイトルとURLをコピーしました