Circles Demo

by Michael Rovinsky

HTML

<svg width='500' height='500'>
</svg>

CSS

html, body {
  margin: 0;
  padding: 0;
}

svg {
  background-color: #333;
}

Babel + JSX

const svg = d3.select('svg')

const circleData = [
	{id: 1, x: 100, y: 300, c: '#f00', r: 50, d: 500},
	{id: 2, x: 250, y: 100, c: '#ff0', r: 90, d: 1000},
	{id: 3, x: 300, y: 350, c: '#08f', r: 70, d: 1500},
]


svg.selectAll('circle')
	.data(circleData, data => data.id)
	.enter()
	.append('circle')
	.attr('cx', data => data.x)
	.attr('cy', data => data.y)
	.attr('r', data => data.r)
	.style('fill', data => data.c)
	.style('visibility', 'hidden')
	.transition()
	.delay(data => data.d)
	.style('visibility', 'visible')