とりぷるぷぅ技術メモ

2017年9月6日水曜日

[CentOS][MongoDB]インストール

CentOS 7にMongoDBをインストール・起動する手順

インストール

# yum install mongodb
# yum install mongodb-server

サーバー起動

# systemctl start mongod

自動起動を有効にする

# systemctl enable mongod

[MongoDB]基本操作

データベースの新規作成

> use test
switched to db test

データベースの状態確認

> db.stats()
{
  "db" : "test",
  "collections" : 0,
  "objects" : 0,
  "avgObjSize" : 0,
  "dataSize" : 0,
  "storageSize" : 0,
  "numExtents" : 0,
  "indexes" : 0,
  "indexSize" : 0,
  "fileSize" : 0,
  "dataFileVersion" : {

  },
  "ok" : 1
}

データベースの削除

> use test
> db.dropDatabase()

データ挿入

> db.tbl1.insert({message:'hello', value:10})
WriteResult({ "nInserted" : 1 })
> db.tbl1.insert({message:'goodbye', value:20})
WriteResult({ "nInserted" : 1 })

登録データの表示（SELECT * FROM tbl1;）

> db.tbl1.find()
{ "_id" : ObjectId("59af8c93ce7c2c41694720f5"), "message" : "hello", "value" : 10 }
{ "_id" : ObjectId("59af8ca5ce7c2c41694720f6"), "message" : "goodbye", "value" : 20 }

条件指定しての検索（SELECT）

> db.tbl1.find({"message":"hello"})
{ "_id" : ObjectId("59af8c93ce7c2c41694720f5"), "message" : "hello", "value" : 10 }
> db.tbl1.find({"value":{$gt:15}})
{ "_id" : ObjectId("59af8ca5ce7c2c41694720f6"), "message" : "goodbye", "value" : 20 }
> db.tbl1.find({"value":{$gte:10}})
{ "_id" : ObjectId("59af8c93ce7c2c41694720f5"), "message" : "hello", "value" : 10 }
{ "_id" : ObjectId("59af8ca5ce7c2c41694720f6"), "message" : "goodbye", "value" : 20 }

データの更新（UPDATE）

> db.tbl1.find({"message":"goodbye"})
{ "_id" : ObjectId("59af8ca5ce7c2c41694720f6"), "message" : "goodbye", "value" : 20 }
> db.tbl1.update({"message":"goodbye"},{$set:{"value":25}})
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
> db.tbl1.find({"message":"goodbye"})
{ "_id" : ObjectId("59af8ca5ce7c2c41694720f6"), "message" : "goodbye", "value" : 25 }

DB一覧表示

> show dbs;

コレクション一覧表示

> use test
switched to db test
> show collections;

2017年6月28日水曜日

[D3.js]csvファイルをテーブルで表示する

test1.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
    <link rel="stylesheet" type="text/css" href="./test1.css">
  </head>
  <body>
  <svg width="960" height="500"></svg><br/>
  <a href="test1.csv">下表をcsvファイルにしてダウンロード</a><br/>
  <table></table>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test1.js"></script>
</html>

test1.js

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.line()
             .x(function(d) { return x(d.month); })
             .y(function(d) { return y(d.temperature); });

// X, Yの範囲を座標に置き換える
var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

// 色
var colors = d3.scaleOrdinal(d3.schemeCategory10);
console.log(colors(0))
console.log(colors(1))
console.log(colors(2))
console.log(colors(3))

// データファイルを読み込んでグラフを描く
d3.csv("test1.csv", type, function(error, data) {
 if (error) throw error;

 var cities = data.columns.slice(1).map(function(id) {
  return {
   id: id,
   values: data.map(function(d) {
    return {month: d.month, temperature: d[id]};
   })
  };
 });

 var keys = data.columns.slice(1);
 console.log('keys=' + keys);

 // Xの範囲はmonthの最小値から最大値
 console.log('extent=' + d3.extent(data, function(d) { return d.month; }));
 console.log('max=' + d3.max(data, function(d) { return d.month; }));
 x.domain(d3.extent(data, function(d) {
  return d.month
 }));
 console.log('x.domain()=' + x.domain())
 console.log('x.range()=' + x.range())

 // Yの範囲は各地のtemperatureをすべて含めた最小値から最大値
 y_min = d3.min(cities, function(c) { 
  return d3.min(c.values, function(d) {
   return d.temperature;
  });
 });
 y_max = d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); });
 console.log('y_min=' + y_min);
 console.log('y_max=' + y_max);
 y.domain([y_min, y_max]);

 // X軸 (y=0の場所配置するためにtranslateでy(0)を指定する
 g.append("g")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(d3.axisBottom(x));

 // Y軸
 g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("fill", "#000")
    .text("Temperature (℃)");

 // line chartを描く
 var city = g.selectAll(".city")
             .data(cities)
             .enter().append("g")
               .attr("class", "city");

 city.append("path")
  .attr("d", function(d) {
    return line(d.values);
  })
  .attr("stroke", function(d, i) {
   console.log('d.id=' + d.id);
   console.log('i=' + i);
   console.log('colors(d.id)=' + colors(d.id));
   console.log('colors(i)=' + colors(i));
     return colors(i);
  })
  .attr("stroke-width", 2)
  .attr("fill", "none");

 // 凡例
 console.log('keys.slice()=' + keys.slice());
 var legend = g.append("g")
               .attr("font-family", "sans-serif")
               .attr("font-size", 10)
               .attr("text-anchor", "end")
               .selectAll("g")
               //.data(['tokyo', 'osaka', 'sapporo', 'naha'])
               .data(keys.slice())
               .enter()
               .append("g")
               .attr("transform", function(d, i) {
                  console.log(i)
                     return "translate(0," + i * 20 + ")"; });
 legend.append("path")
       .attr("d", function(d) { return "M" + (width-19) + ",10" + "L" + (width) + ",10"; })
       .attr("stroke", function(d, i) {
          console.log('colors(' + i + ')=' + colors(i));
          return colors(i);
       })
       .attr("stroke-width", 2)
       .attr("fill", "none");

 legend.append("text")
       .attr("x", width - 24)
       .attr("y", 9.5)
       .attr("dy", "0.32em")
       .text(function(d) { return d; });
});

var table = d3.select("table");
var thead = table.append("thead");
var tbody = table.append("tbody");

d3.csv("test1.csv", function(csv) {
 var headerKey = d3.map(csv[0]).keys();

 thead.append("tr")
      .selectAll("th")
      .data(headerKey)
      .enter()
      .append("th")
      .text(function(key) { return key; });

 tbody.selectAll("tr")
      .data(csv)
      .enter()
      .append("tr")
        .selectAll("td")
        .data(function(row) { return d3.entries(row); })
        .enter()
        .append("td")
        .text(function(d) { return d.value; })
})

function type(d, _, columns) {
 d.month = +d.month; // 文字列を数値にする
 for (var i = 1, n = columns.length, c; i < n; ++i) {
  d[c = columns[i]] = +d[c];
 }

 return d;
}

test1.css

table {
 border-collapse: collapse;
 text-align: left;
 line-height: 1.5;
}

th {
 padding: 10px;
 font-weight: bold;
 vertical-align: top;
 color: #369;
 border-bottom: 3px solid #036;
}

td {
 weight: 350px;
 padding: 10px;
 vertical-align: top;
 border-bottom: 1px solid #ccc;
}

test1.csv

month,tokyo,osaka,sapporo,naha
1,5.1,4.4,-3.8,14.9
2,7,7.4,-1.1,17.6
3,8.1,8.1,0.7,17.1
4,14.5,13.8,6.9,20.4
5,18.5,19.6,11.1,23.9
6,22.8,24.2,17.3,27.9
7,27.3,27.8,21.8,28.9
8,27.5,28.9,26.6,28.3
9,25.1,25.2,19.2,27.9
10,19.5,19.5,12.1,25.2
11,14.9,15.2,6,23.7
12,7.5,8.1,-2,18.6

実行例 (fc2に置いてあるページに飛びます)

[D3.js]csvファイルを読み込んで折れ線グラフを描く

test12.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
  <svg width="960" height="500"></svg>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test12.js"></script>
</html>

test12.js

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.line()
             .x(function(d) { return x(d.month); })
             .y(function(d) { return y(d.temperature); });

// X, Yの範囲を座標に置き換える
var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

// 色
var colors = d3.scaleOrdinal(d3.schemeCategory10);
console.log(colors(0))
console.log(colors(1))
console.log(colors(2))
console.log(colors(3))

// データファイルを読み込んでグラフを描く
d3.csv("test12.csv", type, function(error, data) {
 if (error) throw error;

 var cities = data.columns.slice(1).map(function(id) {
  return {
   id: id,
   values: data.map(function(d) {
    return {month: d.month, temperature: d[id]};
   })
  };
 });

 var keys = data.columns.slice(1);
 console.log('keys=' + keys);

 // Xの範囲はmonthの最小値から最大値
 console.log('extent=' + d3.extent(data, function(d) { return d.month; }));
 console.log('max=' + d3.max(data, function(d) { return d.month; }));
 x.domain(d3.extent(data, function(d) {
  return d.month
 }));
 console.log('x.domain()=' + x.domain())
 console.log('x.range()=' + x.range())

 // Yの範囲は各地のtemperatureをすべて含めた最小値から最大値
 y_min = d3.min(cities, function(c) { 
  return d3.min(c.values, function(d) {
   return d.temperature;
  });
 });
 y_max = d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); });
 console.log('y_min=' + y_min);
 console.log('y_max=' + y_max);
 y.domain([y_min, y_max]);

 // X軸 (y=0の場所配置するためにtranslateでy(0)を指定する
 g.append("g")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(d3.axisBottom(x));

 // Y軸
 g.append("g")
  .call(d3.axisLeft(y))
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("fill", "#000")
    .text("Temperature (℃)");

 // line chartを描く
 var city = g.selectAll(".city")
             .data(cities)
             .enter().append("g")
               .attr("class", "city");

 city.append("path")
  .attr("d", function(d) {
    return line(d.values);
  })
  .attr("stroke", function(d, i) {
   console.log('d.id=' + d.id);
   console.log('i=' + i);
   console.log('colors(d.id)=' + colors(d.id));
   console.log('colors(i)=' + colors(i));
     return colors(i);
  })
  .attr("stroke-width", 2)
  .attr("fill", "none");

 // 凡例
 console.log('keys.slice()=' + keys.slice());
 var legend = g.append("g")
               .attr("font-family", "sans-serif")
               .attr("font-size", 10)
               .attr("text-anchor", "end")
               .selectAll("g")
               //.data(['tokyo', 'osaka', 'sapporo', 'naha'])
               .data(keys.slice())
               .enter()
               .append("g")
               .attr("transform", function(d, i) {
                  console.log(i)
                     return "translate(0," + i * 20 + ")"; });
 legend.append("path")
       .attr("d", function(d) { return "M" + (width-19) + ",10" + "L" + (width) + ",10"; })
       .attr("stroke", function(d, i) {
          console.log('colors(' + i + ')=' + colors(i));
          return colors(i);
       })
       .attr("stroke-width", 2)
       .attr("fill", "none");

 legend.append("text")
       .attr("x", width - 24)
       .attr("y", 9.5)
       .attr("dy", "0.32em")
       .text(function(d) { return d; });
});

function type(d, _, columns) {
 d.month = +d.month; // 文字列を数値にする
 for (var i = 1, n = columns.length, c; i < n; ++i) {
  d[c = columns[i]] = +d[c];
 }

 return d;
}

test12.csv

month,tokyo,osaka,sapporo,naha
1,5.1,4.4,-3.8,14.9
2,7,7.4,-1.1,17.6
3,8.1,8.1,0.7,17.1
4,14.5,13.8,6.9,20.4
5,18.5,19.6,11.1,23.9
6,22.8,24.2,17.3,27.9
7,27.3,27.8,21.8,28.9
8,27.5,28.9,26.6,28.3
9,25.1,25.2,19.2,27.9
10,19.5,19.5,12.1,25.2
11,14.9,15.2,6,23.7
12,7.5,8.1,-2,18.6

実行例 (fc2に置いてあるページに飛びます)

2017年6月23日金曜日

[D3.js]折れ線グラフに凡例をつける

test11.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
  <svg width="960" height="500"></svg>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test11.js"></script>
</html>

test11.js

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// データ
var tokyo = [
 {"month": 1,  "temperature": 5.1},
 {"month": 2,  "temperature": 7.0},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 14.5},
 {"month": 5,  "temperature": 18.5},
 {"month": 6,  "temperature": 22.8},
 {"month": 7,  "temperature": 27.3},
 {"month": 8,  "temperature": 27.5},
 {"month": 9,  "temperature": 25.1},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 14.9},
 {"month": 12, "temperature": 7.5},
];

var osaka = [
 {"month": 1,  "temperature": 4.4},
 {"month": 2,  "temperature": 7.4},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 13.8},
 {"month": 5,  "temperature": 19.6},
 {"month": 6,  "temperature": 24.2},
 {"month": 7,  "temperature": 27.8},
 {"month": 8,  "temperature": 28.9},
 {"month": 9,  "temperature": 25.2},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 15.2},
 {"month": 12, "temperature": 8.1}
];

var sapporo = [
 {"month": 1,  "temperature": -3.8},
 {"month": 2,  "temperature": -1.1},
 {"month": 3,  "temperature": 0.7},
 {"month": 4,  "temperature": 6.9},
 {"month": 5,  "temperature": 11.1},
 {"month": 6,  "temperature": 17.3},
 {"month": 7,  "temperature": 21.8},
 {"month": 8,  "temperature": 26.6},
 {"month": 9,  "temperature": 19.2},
 {"month": 10, "temperature": 12.1},
 {"month": 11, "temperature": 6},
 {"month": 12, "temperature": -2}
];

var naha = [
 {"month": 1,  "temperature": 14.9},
 {"month": 2,  "temperature": 17.6},
 {"month": 3,  "temperature": 17.1},
 {"month": 4,  "temperature": 20.4},
 {"month": 5,  "temperature": 23.9},
 {"month": 6,  "temperature": 27.9},
 {"month": 7,  "temperature": 28.9},
 {"month": 8,  "temperature": 28.3},
 {"month": 9,  "temperature": 27.9},
 {"month": 10, "temperature": 25.2},
 {"month": 11, "temperature": 23.7},
 {"month": 12, "temperature": 18.6}
];

var line = d3.line()
             .x(function(d) { return x(d.month); })
             .y(function(d) { return y(d.temperature); });

// X, Yの範囲を座標に置き換える
var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);
// Xの範囲はmonthの最小値から最大値
x.domain(d3.extent(tokyo, function(d) { return d.month; }));
// Yの範囲は各地のtemperatureをすべて含めた最小値から最大値
m = [
 d3.max(tokyo, function(d) { return d.temperature; }),
 d3.max(osaka, function(d) { return d.temperature; }),
 d3.max(sapporo, function(d) { return d.temperature; }),
 d3.max(naha, function(d) { return d.temperature; })
];
console.log('m=' + m)
y_max = d3.max(m);
console.log('y_max=' + y_max);

m = [
 d3.min(tokyo, function(d) { return d.temperature; }),
 d3.min(osaka, function(d) { return d.temperature; }),
 d3.min(sapporo, function(d) { return d.temperature; }),
 d3.min(naha, function(d) { return d.temperature; })
];
console.log('m=' + m)
y_min = d3.min(m);
console.log('y_min=' + y_min);

y.domain([y_min, y_max]);

// 色
var colors = d3.scaleOrdinal(d3.schemeCategory10);
console.log(colors(0))
console.log(colors(1))
console.log(colors(2))
console.log(colors(3))

// line chartを描く
g.append("path")
   .attr("d", line(tokyo))
   .attr("stroke", colors(0))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(osaka))
   .attr("stroke", colors(1))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(sapporo))
   .attr("stroke", colors(2))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(naha))
   .attr("stroke", colors(3))
   .attr("stroke-width", 2)
   .attr("fill", "none");

// X軸 (y=0の場所配置するためにtranslateでy(0)を指定する
g.append("g")
      .attr("transform", "translate(0," + y(0) + ")")
      .call(d3.axisBottom(x));

// Y軸
g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature (℃)");

// 凡例
var legend = g.append("g")
              .attr("font-family", "sans-serif")
              .attr("font-size", 10)
              .attr("text-anchor", "end")
              .selectAll("g")
              .data(['tokyo', 'osaka', 'sapporo', 'naha'])
              .enter()
              .append("g")
                .attr("transform", function(d, i) {
                console.log(i)
                 return "translate(0," + i * 20 + ")"; });

legend.append("path")
      .attr("d", function(d) { return "M" + (width-19) + ",10" + "L" + (width) + ",10"; })
      .attr("stroke", function(d, i) {
         console.log('colors(' + i + ')=' + colors(i));
         return colors(i);
       })
      .attr("stroke-width", 2)
      .attr("fill", "none");

legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });

実行例 (fc2に置いてあるページに飛びます)

[D3.js]複数要素の折れ線グラフ

複数要素のデータがjsファイルに埋め込まれた例

test10.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
  <svg width="960" height="500"></svg>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test10.js"></script>
</html>

test10.js

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// データ
var tokyo = [
 {"month": 1,  "temperature": 5.1},
 {"month": 2,  "temperature": 7.0},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 14.5},
 {"month": 5,  "temperature": 18.5},
 {"month": 6,  "temperature": 22.8},
 {"month": 7,  "temperature": 27.3},
 {"month": 8,  "temperature": 27.5},
 {"month": 9,  "temperature": 25.1},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 14.9},
 {"month": 12, "temperature": 7.5},
];

var osaka = [
 {"month": 1,  "temperature": 4.4},
 {"month": 2,  "temperature": 7.4},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 13.8},
 {"month": 5,  "temperature": 19.6},
 {"month": 6,  "temperature": 24.2},
 {"month": 7,  "temperature": 27.8},
 {"month": 8,  "temperature": 28.9},
 {"month": 9,  "temperature": 25.2},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 15.2},
 {"month": 12, "temperature": 8.1}
];

var sapporo = [
 {"month": 1,  "temperature": -3.8},
 {"month": 2,  "temperature": -1.1},
 {"month": 3,  "temperature": 0.7},
 {"month": 4,  "temperature": 6.9},
 {"month": 5,  "temperature": 11.1},
 {"month": 6,  "temperature": 17.3},
 {"month": 7,  "temperature": 21.8},
 {"month": 8,  "temperature": 26.6},
 {"month": 9,  "temperature": 19.2},
 {"month": 10, "temperature": 12.1},
 {"month": 11, "temperature": 6},
 {"month": 12, "temperature": -2}
];

var naha = [
 {"month": 1,  "temperature": 14.9},
 {"month": 2,  "temperature": 17.6},
 {"month": 3,  "temperature": 17.1},
 {"month": 4,  "temperature": 20.4},
 {"month": 5,  "temperature": 23.9},
 {"month": 6,  "temperature": 27.9},
 {"month": 7,  "temperature": 28.9},
 {"month": 8,  "temperature": 28.3},
 {"month": 9,  "temperature": 27.9},
 {"month": 10, "temperature": 25.2},
 {"month": 11, "temperature": 23.7},
 {"month": 12, "temperature": 18.6}
];

var line = d3.line()
             .x(function(d) { return x(d.month); })
             .y(function(d) { return y(d.temperature); });

// X, Yの範囲を座標に置き換える
var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);
// Xの範囲はmonthの最小値から最大値
x.domain(d3.extent(tokyo, function(d) { return d.month; }));
// Yの範囲は各地のtemperatureをすべて含めた最小値から最大値
m = [
 d3.max(tokyo, function(d) { return d.temperature; }),
 d3.max(osaka, function(d) { return d.temperature; }),
 d3.max(sapporo, function(d) { return d.temperature; }),
 d3.max(naha, function(d) { return d.temperature; })
];
console.log('m=' + m)
y_max = d3.max(m);
console.log('y_max=' + y_max);

m = [
 d3.min(tokyo, function(d) { return d.temperature; }),
 d3.min(osaka, function(d) { return d.temperature; }),
 d3.min(sapporo, function(d) { return d.temperature; }),
 d3.min(naha, function(d) { return d.temperature; })
];
console.log('m=' + m)
y_min = d3.min(m);
console.log('y_min=' + y_min);

y.domain([y_min, y_max]);

// 色
var colors = d3.scaleOrdinal(d3.schemeCategory10);
console.log(colors(0))
console.log(colors(1))
console.log(colors(2))
console.log(colors(3))

// line chartを描く
g.append("path")
   .attr("d", line(tokyo))
   .attr("stroke", colors(0))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(osaka))
   .attr("stroke", colors(1))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(sapporo))
   .attr("stroke", colors(2))
   .attr("stroke-width", 2)
   .attr("fill", "none");
g.append("path")
   .attr("d", line(naha))
   .attr("stroke", colors(3))
   .attr("stroke-width", 2)
   .attr("fill", "none");

// X軸 (y=0の場所配置するためにtranslateでy(0)を指定する
g.append("g")
      .attr("transform", "translate(0," + y(0) + ")")
      .call(d3.axisBottom(x));

// Y軸
g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature (℃)");

実行例 (fc2に置いてあるページに飛びます)

[D3.js]折れ線グラフ

データがjsファイルに埋め込まれたれ例。
1つの折れ線グラフを描く。

test9.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v4.js"></script>
  </head>
  <body>
  <svg width="960" height="500"></svg>
  </body>
  <!-- 上記のsvg要素をJavaScript内で読み込むので、bodyより下にスクリプトのソースを定義する -->
  <script src="./test9.js"></script>
</html>

test9.js

var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// データ
var tokyo = [
 {"month": 1,  "temperature": 5.1},
 {"month": 2,  "temperature": 7.0},
 {"month": 3,  "temperature": 8.1},
 {"month": 4,  "temperature": 14.5},
 {"month": 5,  "temperature": 18.5},
 {"month": 6,  "temperature": 22.8},
 {"month": 7,  "temperature": 27.3},
 {"month": 8,  "temperature": 27.5},
 {"month": 9,  "temperature": 25.1},
 {"month": 10, "temperature": 19.5},
 {"month": 11, "temperature": 14.9},
 {"month": 12, "temperature": 7.5},
];

var line = d3.line()
             .x(function(d) {
              console.log(d.month);
              console.log(x(d.month));
              return x(d.month); })
             .y(function(d) {
              console.log(d.temperature);
              console.log(y(d.temperature));
              return y(d.temperature); });

// X, Yの範囲を座標に置き換える
var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);
// Xの範囲はmonthの最小値から最大値
x.domain(d3.extent(tokyo, function(d) { return d.month; }));
// Yの範囲0からtemperatureの最大値
y.domain([0, d3.max(tokyo, function(d) { return d.temperature; })]);

// line chartを描く
g.append("path")
   .attr("d", line(tokyo))
   .attr("stroke", "blue")
   .attr("stroke-width", 2)
   .attr("fill", "none");

// X軸
g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

// Y軸
g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("fill", "#000")
      .text("Temperature (℃)");

実行例 (fc2に置いてあるテストページに飛びます)

登録: 投稿 (Atom)