読者です 読者をやめる 読者になる 読者になる

d3.js advent calendar 22日目

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と組み合わせることで、時間に丸めたり、日付に丸めたり、週にまとめたり、といったことが簡単になり大変はかどります