D3 Examples - blur-transition

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
.trans{
  fill: none;
  stroke: black;
  stroke-width: 3px;
}
​
svg{
  position: absolute;
}
​
.isWhite text, .isWhite .domain{
  fill: white;
}
.isWhite path{
  stroke: white;
}
​
</style>
​
<body></body>
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<!-- <script src='/1wheel/raw/5d32ecb8a54b42f53646/geometry.js'></script> -->
​
<script>
var isBlack = true
var dur = 2000
var delay = 1000
​
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>
​
​
<!-- <filter id="goo">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
  <feBlend in="SourceGraphic" in2="goo" />
</filter>
 -->
    