【d3.js】.CSVファイルからデータを読み込む方法

csv

.csvファイルからデータを読み込む方法をご紹介します。

d3.csv() メソッドを使いますが、v5から使い方が少し変更されています。

.csvファイルのサンプル

サンプルで、こんなカンマ(,)区切りのdata.csvファイルを用意します。
一行目は見出しです。

month,tempHigh
1,4
2,6
3,11
4,18
5,22
6,27
7,29
8,29
9,25
10,18
11,13
12,7

HTML/JavaScriptサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg{
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>

var DATAPATH = "datacsv.csv";

// データの準備

d3.csv("data.csv").then(function(data) {
  var text = "";
  for(var i = 0; i < data.length; i++){
      text += data[i].month + "月の最高気温 " + data[i].tempHigh + "℃<br>";
  }
  d3.select("#result").html(text);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
svg{
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>

// データの準備

d3.csv("data.csv").then(function(data) {
  var text = "";
  for(var i = 0; i < data.length; i++){
      text += data[i].month + "月の最高気温 " + data[i].tempHigh + "℃<br>";
  }
  d3.select("#result").html(text);
  console.log(data); // Debug用
}).catch(function(error){
     // handle error
});

</script>
</body>
</html>

}).catch(function(error){
     // handle error
});

</script>
</body>
</html>

d3.csv()メソッドを使って、csvファイルからデータを読み込みます。


v5ではコールバックではなく、Promisesが返却されるので以下のような書き方になります。

// データの準備

d3.csv("data.csv").then(function(data) {
  var text = "";
  for(var i = 0; i < data.length; i++){
      text += data[i].month + "月の最高気温 " + data[i].tempHigh + "℃<br>";
  }
  d3.select("#result").html(text);
  console.log(data); // Debug用
}).catch(function(error){
     // handle error
});

結果

このようなHTMLタグが追加されました。

1月の最高気温 4℃
2月の最高気温 6℃
3月の最高気温 11℃
4月の最高気温 18℃
5月の最高気温 22℃
6月の最高気温 27℃
7月の最高気温 29℃
8月の最高気温 29℃
9月の最高気温 25℃
10月の最高気温 18℃
11月の最高気温 13℃
12月の最高気温 7℃

Debug用コンソール

ブラウザのデバックコンソールの出力を見ても、下記のようにデータが読み込まれているのがわかります。

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(2)]
0: {month: "1", tempHigh: "4"}
1: {month: "2", tempHigh: "6"}
2: {month: "3", tempHigh: "11"}
3: {month: "4", tempHigh: "18"}
4: {month: "5", tempHigh: "22"}
5: {month: "6", tempHigh: "27"}
6: {month: "7", tempHigh: "29"}
7: {month: "8", tempHigh: "29"}
8: {month: "9", tempHigh: "25"}
9: {month: "10", tempHigh: "18"}
10: {month: "11", tempHigh: "13"}
11: {month: "12", tempHigh: "7"}
columns: (2) ["month", "tempHigh"]
length: 12
__proto__: Array(0)

まとめ

以上、d3.jsでCSVファイルを読み込むサンプルでした。

関連情報

タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA