Day One | Block One | Colour and Circles

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Day 1 Colour Scale and circles</title>
		<h1 style="padding-left:60px;">Day One | Block 1 </h1>
		<h2 style="padding-left:60px;">Colour and Circles</h2>
		<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">
		body {
				font: 16px Futura;
				color: white;
				background-color: black;
			}
			svg {
				
				background-color: black;
			}
			
			svg circle {
				fill-opacity: 0.75;
			}
			</style>
		</head>

<body>
			<script type="text/javascript">
		//Width and height
		
		var w = 700;
		var h = 300;
		var padding = 100;
		var svg = 	d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);
		var dataset = [5,10,15,20,25,30,35,40,45,50,55,60,65];
		//using categorical colour brewer scale - 20 categories
		var c20 = d3.scale.category20();
		var circles = svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle");
		
		circles.attr("cx", function(d, i) {
            return (i * 40) + padding;
        			})
			       .attr("cy", h/2)
			       .attr("r", function(d) {
			            return d;
			       })
			       .style("fill",function(d) {
			   			return c20(d)
			   
			   		});
			 </script>
	</body>
</html>

https://d3js.org/d3.v3.min.js