D3.jsでアニメーション付き棒グラフを作ってみました

2017.11.14・Cat：css3 html5 javascript SVG デザイナー

JavaScript でグラフを描くためのツールとして提供されている JavaScript ライブラリはたくさんありますが、
その中でも自由度が高く、人気があるのが D3.js です。

私はこれまでグラフを描くための JavaScript ライブラリとして Google Chart をよく使っていましたが、
グラフのデザインがある程度固定されており、デザインや動きをカスタマイズしようと思うと、
工夫と労力が必要となっていました。

しかし、D3.js では、かなり自由度の高いデザインのグラフを、
Google Chartよりも少ない労力で制作することができます。

D3.js はデータの視覚化ツールとして公開されているライブラリで、
ライブラリで追加したグラフを CSS でスタイリングできるなど、
カスタマイズが求められる場合などに、とても便利です。

今回は手始めに、D3.js　を使って、アニメーション付きの棒グラフを作ってみました。

↓作ってみたもの
DEMO

方法

1. HTMLの枠とライブラリの読み込み

<style>
.graph {
  width: 100%;
  padding-bottom: 50%;
  position: relative;
}
.graph__inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
・・・
<div class="graph">
  <div class="graph__inner"></div>
</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

<style>

.graph {

width: 100%;

padding-bottom: 50%;

position: relative;

}

.graph__inner {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

</style>

・・・

</div>

2. D3.js でグラフを描画

var isPC = document.documentElement.scrollWidth > 768 ? true : false,
    margin = {top: 40, right: (isPC ? 50 : 30), bottom: 0, left: (isPC ? 240 : 140) }, //グラフの外枠のマージン設定
    width = d3.select(".graph__inner")[0][0].clientWidth - margin.left - margin.right,
    height = d3.select(".graph__inner")[0][0].clientHeight - margin.top - margin.bottom;

// X軸のスケール設定
var x = d3.scale.linear()
      .range([0, width]);

// Y軸のスケール設定
var y = d3.scale.ordinal()
      .rangeRoundBands([0, height], 0.3);

// X軸の描画設定
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .ticks(2)
    .tickFormat(d3.format(".0%"))
    .tickPadding([10])
    .tickSize([0]);

// Y軸の描画設定
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickPadding([10])
    .tickSize([0]);

// ツールチップの設定
var tip = d3.tip()
  .attr('class', 'graph__tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>利用率:</strong> <span class='graph__tip__number'>" + d3.format(".1%")(d.frequency) + "</span>";
  })

// グラフの描画領域にSVGを設定
var svg = d3.select(".graph__inner").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//ツールチップの呼び出し
svg.call(tip);

//CSVの呼び出し
d3.csv("data.csv", type, function(error, data) {

  //軸のラベル（項目）表示の設定
  x.domain([0, 1]);
  y.domain(data.map(function(d) { return d.letter; }));

  //X軸の描画実行
  svg.append("g")
    .attr("class", "graph__axis graph__axis--x")
    .call(xAxis);

  //Y軸の描画実行
  svg.append("g")
    .attr("class", "graph__axis graph__axis--y")
    .call(yAxis);

  //X軸のスケール描画
  svg.selectAll(".graph__axis--x .tick:not(:first-of-type) line")
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", 0)
    .attr("y2", height)
    .attr("stroke", "#aaa")
    .attr("stroke-dasharray", "2,2");

  //棒の描画
  svg.selectAll(".graph__bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "graph__bar")
      .attr("x", 0)
      .attr("width", 0)
      .attr("y", function(d) { return y(d.letter); })
      .attr("height", y.rangeBand())
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .transition()
        .delay(400)
        .duration(500)
        .attr("width", function(d) { return x(d.frequency); });
});

function type(d) {
d.frequency = +d.frequency;
return d;
}

var isPC = document.documentElement.scrollWidth > 768 ? true : false,

margin = {top: 40, right: (isPC ? 50 : 30), bottom: 0, left: (isPC ? 240 : 140) }, //グラフの外枠のマージン設定

width = d3.select(".graph__inner")[0][0].clientWidth - margin.left - margin.right,

height = d3.select(".graph__inner")[0][0].clientHeight - margin.top - margin.bottom;

// X軸のスケール設定

var x = d3.scale.linear()

.range([0, width]);

// Y軸のスケール設定

var y = d3.scale.ordinal()

.rangeRoundBands([0, height], 0.3);

// X軸の描画設定

var xAxis = d3.svg.axis()

.scale(x)

.orient("top")

.ticks(2)

.tickFormat(d3.format(".0%"))

.tickPadding([10])

.tickSize([0]);

// Y軸の描画設定

var yAxis = d3.svg.axis()

.scale(y)

.orient("left")

.tickPadding([10])

.tickSize([0]);

// ツールチップの設定

var tip = d3.tip()

.attr('class', 'graph__tip')

.offset([-10, 0])

.html(function(d) {

return "<strong>利用率:</strong> <span class='graph__tip__number'>" + d3.format(".1%")(d.frequency) + "</span>";

})

// グラフの描画領域にSVGを設定

var svg = d3.select(".graph__inner").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//ツールチップの呼び出し

svg.call(tip);

//CSVの呼び出し

d3.csv("data.csv", type, function(error, data) {

//軸のラベル（項目）表示の設定

x.domain([0, 1]);

y.domain(data.map(function(d) { return d.letter; }));

//X軸の描画実行

svg.append("g")

.attr("class", "graph__axis graph__axis--x")

.call(xAxis);

//Y軸の描画実行

svg.append("g")

.attr("class", "graph__axis graph__axis--y")

.call(yAxis);

//X軸のスケール描画

svg.selectAll(".graph__axis--x .tick:not(:first-of-type) line")

.attr("x1", 0)

.attr("y1", 0)

.attr("x2", 0)

.attr("y2", height)

.attr("stroke", "#aaa")

.attr("stroke-dasharray", "2,2");

//棒の描画

svg.selectAll(".graph__bar")

.data(data)

.enter().append("rect")

.attr("class", "graph__bar")

.attr("x", 0)

.attr("width", 0)

.attr("y", function(d) { return y(d.letter); })

.attr("height", y.rangeBand())

.on('mouseover', tip.show)

.on('mouseout', tip.hide)

.transition()

.delay(400)

.duration(500)

.attr("width", function(d) { return x(d.frequency); });

});

function type(d) {

d.frequency = +d.frequency;

return d;

}

参考サイト

[公式 Documentation] Home · d3/d3 Wiki

[公式サンプル] Gallery · d3/d3 Wiki

D3.jsのformatを整理 – Qiita

D3.js 基本7 – transitionでアニメーションを表示する – Deep Blend

Author Profile

ninomiya: Webデザイナー兼コーダーです。イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。よろしくお願いいたします。; » 投稿一覧

Blog

D3.jsでアニメーション付き棒グラフを作ってみました