eppPNY

eppPNY.markdown

eppPNY

A Pen by Drew on CodePen.

License.

index.html

<div class="viz"></div>

script.js

var height = 600;
var width = 900;

var svg = d3.select('.viz').append('svg')
  .attr('width', width)
  .attr('height', height)
  .style('background-color', 'black')

svg.append('defs')
   .append('filter')
   .attr('id','blurFilter')
   .attr('y','-5')
   .attr('height',40)
   .append('feGaussianBlur')
   .attr('in','SourceGraphic')
   .attr('stdDeviation',2)

var data = _.range(200)

var data = data.map(function(m){
  return {
    x: Math.random() * width,
    y: Math.random() * height,
    dx: Math.random() * 2 - 1,
    dy: Math.random() * 2 - 1
  };
})

svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d) {
  return d.x })
  .attr('cy', function(d) {
  return d.y })
  .attr('r', 5)
  .attr('fill', 'steelblue')
  .attr('filter', 'url(#blurFilter)')

setInterval(function(){
  d3.selectAll('circle')
  .transition()
  .attr('cx', function(d) {
    if (d.x > 0 && d.x < width) {
      return d.x += d.dx;
    }
    else {
      d.dx *= -1;
      return d.x += d.dx;
    }
  })
  .attr('cy', function(d) {
    if (d.y > 0 && d.y < height) {
      return d.y += d.dy;
    }
    else {
      d.dy *= -1;
      return d.y += d.dy;
    }
  })
}, 100)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

style.css

circle {
  animation: pulse 10s infinite;
}

@keyframes pulse {
  0%   { opacity:1; }
  30%  { opacity:0; }
  70%  { opacity:0; }
  100% { opacity:1; }
}

circle:nth-child(10n+1) {-webkit-animation-delay: 1s;}
circle:nth-child(10n+2) {-webkit-animation-delay: 2s;}
circle:nth-child(10n+3) {-webkit-animation-delay: 3s;}
circle:nth-child(10n+4) {-webkit-animation-delay: 4s;}
circle:nth-child(10n+5) {-webkit-animation-delay: 5s;}
circle:nth-child(10n+6) {-webkit-animation-delay: 6s;}
circle:nth-child(10n+7) {-webkit-animation-delay: 7s;}
circle:nth-child(10n+8) {-webkit-animation-delay: 8s;}
circle:nth-child(10n+9) {-webkit-animation-delay: 9s;}