エンジニアのための　データ可視化［実践］入門　―D3.jsによるWebの可視化

サポートページ

 

この記事を読むのに必要な時間：およそ 0.5 分

ダウンロード

本書で使用するサンプルソースは下記よりダウンロードできます。詳しくは同梱されているindex.htmlをご参照ください。

（2014年2月13日更新）

ダウンロード
サンプルソース

お詫びと訂正（正誤表）

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

（2014年11月7日更新）

P.iv（目次の前のページ）

下記を追加させていただきます。

本書執筆にあたり、丁寧なレビューをくださった本郷 寛様、春山 征吾様、山根 承子様、井戸 一二子様、市原 千里様、古川 陽介様、中野 広基様に感謝の意を表します。また、データ可視化のニーズが高まる時期にタイミングよく執筆の機会を下さった技術評論社 細谷謙吾様に感謝いたします。

P.21　「2.1.4 ファンネルグラフ」

誤 この可視化によって最初の母数がどの段階で大きく数を減らしたのか、ほとんど数を減らすことなく次に進んだ段階がどこなのか、〜
正 この可視化によって最初の分母がどの段階で大きく数を減らしたのか、ほとんど数を減らすことなく次に進んだ段階がどこなのか、〜

P.75

誤 また、よく件数を見てみると、10 ～ 20代と50代でほとんど差はありませんし、この件数はあくまで発生件数であって、各年代の母数の差を考慮したものではありません。それに、このデータが〜
正 また、よく件数を見てみると、10 ～ 20代と50代でほとんど差はありませんし、この件数はあくまで発生件数であって、各年代の総数の差を考慮したものではありません。それに、このデータが〜

P.79

誤 ここから定数として5を各データから引いた場合、データは[A:5, B:10, C15]となり、同じくAを基準とした比は[A:1, B:2, C,3]となります。
正 ここから定数として5を各データから引いた場合、データは[A:5, B:10, C:15]となり、同じくAを基準とした比は[A:1, B:2, C:3]となります。

P.87　「5. 比較可能な状態になっているか？」

誤 母数や単位、尺度が異なる場合、単純に数値の大小を並べて比較することはできません。日本全国で〜
～中略
これは天候ごとの母数について明示されていないため、先の主張はできません。晴天の日は〜
正 分母や単位、尺度が異なる場合、単純に数値の大小を並べて比較することはできません。日本全国で〜
～中略
これは天候ごとの分母について明示されていないため、先の主張はできません。晴天の日は〜

P.123　リスト9.4 main.js

下記に差し替えさせていただきます。

(function() {
  var circlesInSVG, circleSelectionWithData,
      newCircleSelectionWithData, circlesInNewCircleSelectionWithData,
      colors, data, div, height, r, svg, width;
  width = 600;
  height = 600;
  r = 30;
  colors = ["green", "red", "orange", "blue", "yellow", "cyan",
            "grey", "magenta", "purple", "brown", "black"];
  // 可視化の元となるデータの生成
  data = d3.range(0, 10).map(function(d) {
    return {
      cx: 0 | Math.random() * width,
      cy: 0 | Math.random() * height,
      r: 0 | (Math.random() * r + r)
    };
  });
  // DIV#visualization Elementを取得...(1)
  div = d3.select('div#visualization');
  // SVG Elementの追加...(2)
  svg = div.append('svg');
  // SVG Elementの属性のセット...(3)
  svg.attr('width', width).attr('height', height);
  // svg要素の中のすべてのcircle Elementの取得(空の配列)...(4)
  circlesInSVG = svg.selectAll('circle');
  // データと関連付けられたcircle selection...(5)
  circleSelectionWithData = circlesInSVG.data(data);
  // データ...(6)
  newCircleSelectionWithData = circleSelectionWithData.enter();
  // selectionにcircle Elementを追加...(7)
  circlesInNewCircleSelectionWithData =
    newCircleSelectionWithData.append('circle');
  // circle Elementの属性を指定... (8)
  circlesInNewCircleSelectionWithData
    .attr('r', 20) // 固定の値を属性値にセット... (8a)
    .attr('cx', function(d) { // 対応付けられたデータの値を元に属性値をセット... (8b)
      return d.cx;
    })
    .attr('cy', function(d) {
      return d.cy;
    })
    .attr('fill', function(d, idx) { // インデックスを元にして属性値をセット... (8c)
      return colors[idx % colors.length];
    })
    .style('opacity', 0.6); // スタイルをセット... (8d)
}).call(this);

正しいリストを記したPDFファイルを用意しました。

P.126

誤 この結果はリスト9.8となり、確かにDOMに対してデータが結び付けられていることがわかります。
正 この実行結果をブラウザ（下記はChrome）のWebInspectorで見ると、リスト9.8のように表示され、確かにDOMに対してデータが結び付けられていることがわかります。

P.126　リスト9.8 selection.dataの実行例

下記に差し替えさせていただきます。

[Array[4], enter: function, exit: function, select: function, selectAll: function, attr: function…]
  0: Array[4]
    0: div
      __data__: Object
        value: 0
        __proto__: Object
      accessKey: ""
      align: ""
      attributes: NamedNodeMap
      ...

P.131

誤 
data = [
：
  { "sales": 43, "name": "label 4", "type": 2},
]
正 
data = [
：
  { "sales": 43, "name": "label 4", "type": 2}
]

「2}」の後ろの「,」を取ります。

P.143　本文1行目に下記を追加

dstatの2014年10月26日時点でのversion 0.7.2では`--output`とすると、セミコロンではなく、カンマで区切られたデータで出力されます。そのため執筆時に必要であったセミコロンのパースを行う必要はなくなっています。

P.146

誤 
# 表示したいサーバ情報変数
info = "net/total.recv"
drawChart(data, info, "#visualization", {
  width: 1000 # 描画の幅
  height: 100 # 描画の高さ
  margin: [30, 50] # 描画エリアのマージン(数値などの軸を描画するために確保する)
  title: info # タイトル
  })
正 
drawChart("body", data, "net/total.recv", {
  width: width
  height: 60
  margin: margin
  title: info
  })

P.147

誤 
for info in infos
  svgs.push drawChart(data, info, "#visualization", {
    width: 1000
    height: 100
    margin: 50
    title: info
  })
正 
for info in infos
  svgs.push drawChart("body", data, info, {
    width: 1000
    height: 60
    margin: 50
    title: info
    })

P.164

誤 
{ time: 'Thu Nov 07 2013 15:36:45 GMT+0900 (JST)', stateId: 0, userId: 1}
{ time: 'Thu Nov 07 2013 15:37:20 GMT+0900 (JST)', stateId: 4, userId: 31}
{ time: 'Thu Nov 07 2013 15:37:49 GMT+0900 (JST)', stateId: 3, userId: 8}
...
正 
{ time: 'Thu Nov 07 2013 15:36:45 GMT+0900 (JST)', stageId: 0, userId: 1}
{ time: 'Thu Nov 07 2013 15:37:20 GMT+0900 (JST)', stageId: 4, userId: 31}
{ time: 'Thu Nov 07 2013 15:37:49 GMT+0900 (JST)', stageId: 3, userId: 8}

P.221　selection.attr(name [, value ]) ／ selection.classed(name [, value ]) ／selection.style(name[, value]) ／ selection.property(name[, value])のサンプル

誤 
d3.selectAll('table.tr')
正 
d3.selectAll('table tr')

P.224　selection.node()のサンプル

誤 
d3.selectAll('div').empty(); // => 
text
正 
d3.selectAll('div').node(); // => 
text

P.225　サンプル直前の文章

誤 また、transition.transion()を実行することで、〜
正 また、transition.transition()を実行することで、〜

P.246　サンプル　7〜10行目

誤 
value: 0|Math.random() * 50 + 50
startAngle: i / 5 * Math.PI
startAngle: (i + 1) / 5 * Math.PI
}
正 
value: 0|Math.random() * 50 + 50,
startAngle: i / 5 * Math.PI,
endAngle: (i + 1) / 5 * Math.PI
};

P.256　d3.time.format(specifier ) ／ d3.time.format.utc(specifier )のサンプル

誤 
console.log(d3.time.format.iso(new Date)); // => "Sun Jan 5 14:37:20 2014"
正 
console.log(d3.time.format.iso(new Date)); // => "2014-01-05T14:37:20.315Z"

P.268　d3.laout.pieのサンプル

誤 
// pieレイアウトを作成
pie = d3.layout.pie().value(function(d){ return d.a;})
  .startAngle(Math.PI / 2).endAngle(-Math.PI / 2);
// 円弧を描画
node = svg.selectAll('g').data(pie(data)).enter().append('g')
  .attr('transform', 'translate(radius, radius)');
node.append('path').attr({
  d: d3.svg.arc().outerRadius(radius),
  fill: function(d, idx){ return color(idx); }
})
正 
var radius = 100;
// pieレイアウトを作成
pie = d3.layout.pie().value(function(d){ return d.a;})
  .startAngle(Math.PI / 2).endAngle(-Math.PI / 2);
// 円弧を描画
node = svg.selectAll('g').data(pie(data)).enter().append('g')
  .attr('transform', 'translate(' + radius+ ', ' + radius + ')');
node.append('path').attr({
  d: d3.svg.arc().outerRadius(radius),
  fill: function(d, idx){ return color(idx); }
})

P.269　d3.layout.bundleのサンプル

誤 
  d: line,
  fill: 'none',
  stroke: 'red',
  a: function(d){ console.log(d); }
});
正 
正：
  d: line,
  fill: 'none',
  stroke: 'red'
});