blur-transition

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

svg{
  position: absolute;
}

.isWhite text, .isWhite .domain{
  fill: white;
}
.isWhite path{
  stroke: white;
}

</style>

function update(){
  isBlack = !isBlack
  var guid = Math.random()

var lineData = d3.range(4).map(function(i){
    return d3.range(10).map(function(j){
      return (i + 1)*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
      .attr('filter', 'url(#goo' + guid + ')')
      .classed('isWhite', !isBlack)
  c.svg.dataAppend(lineData, 'path.trans')
      .attr('d', line)

var rootSVG = d3.select(c.svg.node().parentNode)
  var gooFilter = d3.select(c.svg.node().parentNode).append('filter')
      .attr('id', 'goo' + guid)

var feGB = gooFilter.append('feGaussianBlur')
      .attr({in: 'SourceGraphic', stdDeviation: 0, result: 'blur'})
  var feCM = gooFilter.append('feColorMatrix')
      .attr({in: 'blur', mode: 'matrix', result: 'goo', values: '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1000 -7'})
  gooFilter.append('feBlend')
      .attr({in: 'goo', in2: 'goo'})

feGB.transition().duration(dur/2).delay(delay).ease('linear')
    .attr('stdDeviation', 10)
  feCM.transition().duration(10000)
      .attr('values', '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1008 -7')

rootSVG
      .style('background', isBlack ? 'white' : 'black')
      .style('opacity', .2)
    .transition().delay(delay/3).duration(250)
      .style('opacity', 1)
    .transition().delay(delay/3 + 2*dur/3 - 250).duration(dur/2)
      .style('background', isBlack ? 'black' : 'white')

console.log('updating')

var svgs = d3.selectAll('svg')
  if (svgs.size() > 2){
    svgs.filter(function(d, i){ return !i }).remove()
  }
}

update()
setInterval(update, delay + dur - 1500)

</script>