スポンサーリンク
スポンサーリンク

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

タイトルの通りです。CSVファイルを読み込んで、散布図を表示します。今回の記事の後半部分では、読み込んだ数値に合わせてグラフの縦軸、横軸の幅も対応させた散布図を作成します。

サンプルコードの実行結果はこちら

グラフの表示範囲をデータに合わせる

まずはサンプルコードを実行すると・・・
サンプルコードの実行結果はこちら

●HTMLファイルは、上部のサンプルプログラムと同一です。

データの範囲に応じて表示するグラフをかえてみます。今までの書いてきた記事だと座標が1:1に対応してました。なので、データの値をそのまま座標として利用していきました。実際にグラフを表示するとなると、こんなに都合が良いデータはあまりありません。

そういうときに便利なのが、D3.jsのスケール(縮尺)です。元のデータの値が大きいとき、これまでのサンプルコードの実行結果をみると、グラフがはみ出しています。グラフ範囲に調整するには元のデータの0~

コメント

タイトルとURLをコピーしました