JSFiddle - React, Tailwind, and code Playground

by jacomyal

HTML

<div id="root">
  <svg width="300" height="300"></svg>
</div>

CSS

.bar {
  height: 5px;
  background: blue;
  margin-bottom: 1px;
}

JavaScript

function generateData() {
	const data = [];
  const size = Math.floor(Math.random() * 100) + 20;
  
  for (let i = 0; i < size; i++)
  	data.push({
    	id: 'point-' + i,
    	v1: Math.random(),
    	v2: Math.random(),
    	v3: Math.random(),
    });
    
  return data;
}

function update() {
  const data = generateData();
  const t = d3.transition()
      .duration(500);
  const points = d3
    .select('svg')
    .selectAll('circle')
    .data(data);
    
  points
    .transition(t)
    .attr({
      cx: o => o.v1 * 100 + '%',
      cy: o => o.v2 * 100 + '%',
      r: o => o.v3 * 4,
    });
   
  points.exit().remove();
  points.enter()
  	.append('circle')
    .attr({
      cx: o => o.v1 * 100 + '%',
      cy: o => o.v2 * 100 + '%',
      r: o => o.v3 * 4,
    });
  
  setTimeout(update, 2000);
}

update();