mnml circle pulse

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

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

https://d3js.org/d3.v4.min.js