silly-path-transitions

click axis to transition

<!DOCTYPE html>
<meta charset="utf-8">

</style>

var lineData = d3.range(4).map(function(i){
  return d3.range(10).map(function(j){
    return i*2*Math.random() + j
  })
})

var c = d3.conventions()

c.x.domain([0, 9])
c.y.domain([0, d3.max(d3.merge(lineData))])

c.drawAxis()

var line = d3.svg.line()
    .x(function(d, i){ return c.x(i) })
    .y(c.y)

c.svg.dataAppend(lineData, 'path.trans')
    .attr('d', line)

var clickI = 1

d3.select(window).on('click', function(){
  clickI = _.random(0, 2)

if (clickI % 3 == 0){
    var lineData = d3.range(_.random(3, 6)).map(function(i){
      return d3.range(_.random(5, 15)).map(function(j){
        return i*2*Math.random() + j
      })
    })

c.x.domain([0, lineData[0].length])
    c.y.domain([0, d3.max(d3.merge(lineData))])

c.svg.select('.x.axis').call(c.xAxis)
    c.svg.select('.y.axis').call(c.yAxis)

var sel = c.svg.selectAll('.trans').data(lineData)

sel.enter().append('path.trans').attr('d', 'M0,0L0,0').style('opacity', 0)

sel.transition().duration(1000).style('opacity', 1).attr('d', line)

sel.exit().transition('opacity', 0).remove()
  }
  if (clickI % 3 == 1){

var scatterData = d3.range(_.random(5, 10)).map(function(i){
      return {x: Math.random()*i, y: Math.random()}
    })

c.x.domain(d3.extent(scatterData, ƒ('x')))
    c.y.domain(d3.extent(scatterData, ƒ('y')))

c.svg.select('.x.axis').call(c.xAxis)
    c.svg.select('.y.axis').call(c.yAxis)

var sel = c.svg.selectAll('.trans').data(scatterData)

sel.enter().append('path.trans').attr('d', 'M0,0L0,0').style('opacity', 0)

sel.transition().duration(1000).style('opacity', 1).attr('d', function(d){
      return ['M', c.x(d.x), c.y(d.y), 'h10 v10 h-10 z'].join(' ')
    })

sel.exit().transition('opacity', 0).remove()

}
  if (clickI % 3 == 2){
    var rectData = d3.range(_.random(5, 10)).map(function(i){
      return Math.random()*i
    })

c.x.domain([0, rectData.length])
    c.y.domain(d3.extent(rectData))

c.svg.select('.x.axis').call(c.xAxis)
    c.svg.select('.y.axis').call(c.yAxis)

var sel = c.svg.selectAll('.trans').data(rectData)

sel.enter().append('path.trans').attr('d', 'M0,0L0,0').style('opacity', 0)

sel.transition().duration(1000).style('opacity', 1).attr('d', function(d, i){
      var h = c.y(0) - c.y(d)
      var w = 20
      return [
        'M', c.x(i), c.y(0), 
        'v', -h,
        'h', w,
        'v', h,
        'z'
        ].join(' ')
    })

sel.exit().transition('opacity', 0).remove()

}

}).on('click')()

</script>