d3 paths

by danahinds57

HTML

<h1>
Poop
</h1>
<div id='chart'>

</div>

CSS

#chart svg {
  background-color: black;
}

JavaScript

// create data
function makeData(qty) {
	return d3.range(qty).map(d3.randomUniform(0, 100));
}




let data = makeData(5);


let margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 500,
	  height = 500;
    
let svg = d3.select('#chart').append('svg')
	.attr('height', 500)
  .attr('width', 500);
  
 
let cx = width/2,
		cy = height/2,
    rStart = 200,
    rEnd = 0,
    duration = 1000;
    

let colors = d3.scaleOrdinal(d3.schemeCategory10);
let ci = 0;

d3.interval(function(elapsed) {
	svg.append('circle')
  	 .attr('cx', cx)
     .attr('cy', cy)
     .attr('r', rStart)
     .style('stroke', colors(ci))
     .style('stroke-width', '4px')
     .style('fill', 'none')
     .transition()
         .attr('r', rEnd)
         .duration(duration);
   ci++;
}, 300);