larsvers/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Only pulsating circles

Not much excitement here really and in fact as much D3 as CSS3.
We create 2 sets of identically positioned circles and from the 2nd set remove some circles we don't want to pulsate. Now we have 2 circles for the data-points we would like to pulsate. Not very pristine as it renders circles we don't need before we remove them, but much easier to read. For a few circles that's fine (I'll apply that to a scatterplot with 20 points to mark outliers), for 500 circles we should use canvas/webGL anyway.
Built with blockbuilder.org

  
## 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>

## thumbnail.png

      
    Raw
  

              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>