D3 Examples - static-transition

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
.trans{
  fill: none;
  stroke: black;
  stroke-width: 3px;
}
​
svg, canvas{
  position: absolute;
}
​
canvas{
  opacity: .3;
}
​
body{
  margin: 0px;
}
​
</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 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>
​
​
    