canvas-erase

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

svg, canvas{
  position: absolute;
}

canvas{
}

body{
  margin: 0px;
}

</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 w = 955, h = 540;
var canvas = d3.select('body')
    .append('canvas')
      .attr({width: w, height: h})
    .node()
var ctx = canvas.getContext('2d')

var whiteOn = false
var blackOn = true
var size = 30
var isTransitioning = false
d3.timer(function(t){
  // ctx.fillStyle = 'rgba(0, 0, 0, .1)'
  // ctx.fillRect(0, 0, w, h)

s = size
  
  if (whiteOn){
    ctx.fillStyle = 'grey'
    d3.range(300).forEach(function(d){
      ctx.fillRect(Math.random()*w, Math.random()*h, s*Math.random(), s*Math.random())
    })    
  }
  if (blackOn){
    ctx.fillStyle = 'black'
    d3.range(300).forEach(function(d){
      ctx.fillRect(Math.random()*w, Math.random()*h, s*Math.random(), s*Math.random())
    })    
  }

// ctx.globalAlpha = 1
})

function drawChart(){
  c.svg.selectAll('*').remove()

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

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)
}

ctx.globalCompositeOperation = 'xor'

setInterval(function(){

d3.select('canvas')
    .transition().duration(1000)
      .each('start', function(){ 
        whiteOn = true 
        blackOn = false 
        size = 30
        ctx.globalCompositeOperation = 'source-over'
      })
      .style('opacity', 1)
    .transition().duration(3000).delay(1500)
      .each('start', function(){
        whiteOn = false
        blackOn = true
        // size = 15
        drawChart()
        ctx.globalCompositeOperation = 'xor'
      })
      .attrTween('data-eh', function(){
        return function(t){ size = t*80 + 5 }
      })
      .each('end', function(){
        // blackOn = false
      })
      .style('opacity', 1)

}, 7000)

</script>