d3 advent calendar 22日目
d3でデータをネスト化したりして、いろいろなグラフを描いてみよう!(まとめ)
まとめ的な統括的なものです
sample garalley見たら載ってることも多いですが、総括して見られることがメリットだと思ってください
注意:面倒なのでcoffeeで書くので適宜読み解いてください
データの用意
norm = d3.random.normal(1000, 10)
trend = (idx)-> idx * 5
data = d3.range(0, 24 * 7).map (idx)->
{
date: new Date(2013, 0, idx/24+1, idx / 24)
val: norm()
}
dataDaily = d3.nest().key( (d)-> d3.time.day(d.date)).entries(data)
dateDaily.forEach (d)->
d.date = new Date(d.key)
d.val = d3.sum d.values.map( (d)-> d.val)
折れ線グラフ
margin = 50
width = 1000
height = 300
x = d3.time.scale().domain(d3.extent(data, (d)-> d.date)).range([0, width])
y = d3.scale.linear().domain(d3.extent(data, (d)-> d.val)).range([height, 0])
line = d3.svg.line().x( (d)-> x(d.date)).y( (d)-> y(d.val))
svg = d3.select('svg')
svg.datum(data).append('path').attr('d', line).attr('stroke', 'red').attr('fill', 'none')
棒グラフ
margin = 50
width = 1000
height = 300
x = d3.time.scale().domain(d3.extent(data, (d)-> d.date)).range([0, width])
y = d3.scale.linear().domain(d3.extent(data, (d)-> d.val)).range([0, height])
color = d3.scale.category20()
svg = d3.select('svg')
svg.selectAll('rect').data(dataDaily).enter().append('rect')
.attr('width', 30).attr('height', (d)-> y(d.val))
.attr('x', (d)-> x(d.date)).attr('y', (d)-> height - y(d.val))
.attr('fill', (d,idx)-> color(idx))
円グラフ
margin = 50
width = 1000
height = 300
arc = d3.svg.arc().innerRadius(0).outerRadius(100)
color = d3.scale.category20()
svg = d3.select('svg').attr('transform', "translate(#{width / 2},#{height / 2})")
pie = d3.layout.pie().value (d)-> d.val
svg = select('svg')
svg.selectAll('path').data(dataDaily).enter().append('path')
.attr('d', arc)
.attr('fill', (d,idx)-> color(idx))
注意点
- pieを使うときは、transformで中心を移動しておかないと画面外に表示され悲しくなります
- y座標のscaleを使うときは、ブラウザの上のほうが0で下のほうが大きい値、ということを理解してrangeを設定してください
- ただし、棒グラフのような場合はちゃんと考えて`y`属性`height`属性を決めないと悲しいことになります
- x座標を作るときに時間を扱うのならば、d3.time.scale()一択で大丈夫です
- d3.time.** というintervalが便利なので使ってください。.nestと組み合わせることで、時間に丸めたり、日付に丸めたり、週にまとめたり、といったことが簡単になり大変はかどります