d3 update pattern

by danahinds57

HTML

<div id='root'>

</div>

JavaScript

// ------------ make data --------------
let width = 500;
let height = 400;

let starCount = 50;

// random stars
let xGenerator = d3.randomUniform(0, width);
let yGenerator = d3.randomUniform(0, height);
function generatePts(count) {
  
  let xs = d3.range(count).map(xGenerator);
  let ys = d3.range(count).map(yGenerator);

  return d3.zip(xs, ys);
 }


// ------------ render ---------------- 
let svg = d3.select('#root')
  .append('svg')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', width)
  .attr('height', height);

let bg = svg.append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', width)
  .attr('height', height)
  .style('fill', 'black');

function renderStars(pts) {
  let stars = svg.selectAll('circle')
  	.data(pts);
  
  stars.enter().append('circle')
    .attr('r', 0);
  
  stars.transition()
  	.attr('cx', d => d[0])
    .attr('cy', d => d[1])
    .attr('r', 10)
    .style('fill', 'gold')
    .style('stroke', 'gold')
    .style('fill-opacity', 0.5)
    .duration(1000);
}



let pts = generatePts(starCount);
renderStars(pts);

let t = d3.interval(function(elapsed) {
	pts = generatePts(starCount);
  renderStars(pts);
}, 2000);