1wheel/index.html

## index.html
<!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>
 -->

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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)2Math.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>
	-->