Skip to content

Instantly share code, notes, and snippets.

@larsvers
Last active October 5, 2016 19:55
Show Gist options
  • Save larsvers/697161052354e24f6276bebad175927c to your computer and use it in GitHub Desktop.
Save larsvers/697161052354e24f6276bebad175927c to your computer and use it in GitHub Desktop.
mnml circle pulse
license: mit

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment