larsvers · October 5, 2016 19:55
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    
    .pulse {
      animation: pulse 2s ease infinite
    }
    
    @keyframes pulse {
      0% {
        transform: scale(0.5);
        transform-origin: center center;
        opacity: 0.8
      }
      100% {
        transform: scale(1.5);
        transform-origin: center center;
        opacity: 0
      }
    }
    
    
  </style>
 </head>

 <body>
  <script>
    
    var data = [1,0,1,0,1,1,1,0,0];
    
    var margin = { top: 0, right: 40, bottom: 0, left: 40 },
        width = 960 - margin.left - margin.right, 
        height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    	.append('g')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

    var circle = svg.selectAll('circle')
    	.data(data);
    
    circle = circle
    	.enter()
      .append("circle")
    	.classed('special', function(d,i) { return d; })
      .attr("cx", function(d,i) { return (width/(data.length-1))*i; })
      .attr("cy", height/2)
      .style("r", 36)
    	.style('fill', 'tomato');


    var circle2 = svg.selectAll('.pulse')
    	.data(data)
    	.enter()
      .append('circle')
    	.classed('pulse', true)
    	.classed('remove', function(d,i) { return 1-d; })
      .attr("cx", function(d,i) { return (width/(data.length-1))*i; })
      .attr("cy", height/2)
      .attr("r", 50)
    	.style('fill', 'red')
    	.lower();
    
    d3.selectAll('.remove').remove();

    
    
    

    
    
    

  </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }


	.pulse {
	animation: pulse 2s ease infinite
	}

	@keyframes pulse {
	0% {
	transform: scale(0.5);
	transform-origin: center center;
	opacity: 0.8
	}
	100% {
	transform: scale(1.5);
	transform-origin: center center;
	opacity: 0
	}
	}


	</style>
	</head>

	<body>
	<script>

	var data = [1,0,1,0,1,1,1,0,0];

	var margin = { top: 0, right: 40, bottom: 0, left: 40 },
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

	var circle = svg.selectAll('circle')
	.data(data);

	circle = circle
	.enter()
	.append("circle")
	.classed('special', function(d,i) { return d; })
	.attr("cx", function(d,i) { return (width/(data.length-1))*i; })
	.attr("cy", height/2)
	.style("r", 36)
	.style('fill', 'tomato');


	var circle2 = svg.selectAll('.pulse')
	.data(data)
	.enter()
	.append('circle')
	.classed('pulse', true)
	.classed('remove', function(d,i) { return 1-d; })
	.attr("cx", function(d,i) { return (width/(data.length-1))*i; })
	.attr("cy", height/2)
	.attr("r", 50)
	.style('fill', 'red')
	.lower();

	d3.selectAll('.remove').remove();









	</script>
	</body>