static-transition

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

svg, canvas{
  position: absolute;
}

canvas{
  opacity: .3;
}

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 = true
var blackOn = true
var size = 5
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 = 'white'
    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)
}

setInterval(function(){
  d3.select('canvas')
    .transition().duration(1000)
      .each('start', function(){ 
        whiteOn = false 
        size = 15
      })
      .style('opacity', 1)
    .transition().duration(1000).delay(1000).ease('linear')
      .each('start', function(){
        whiteOn = true
        size = 5
        drawChart()
      })
      .style('opacity', .2)

}, 5000)

</script>