Day 3 | Colour Extraction

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Day 3 Colour Scale and circles</title>
		<h2 style="padding-left:60px;">Day Three | Block 3 Colour Analysis </h2>
		
		<p style="padding-left:60px;">Ordered Colours in Grace Cossignton Smith's "Reinforcements: troops marching" (1917) </p>
		<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: grey;
			}

svg {
				
				background-color: white;
			}
			
			svg circle {
				fill-opacity: 0.75;
			}

</style>
		</head>

//Width and height
		
		var w = 1500;
		var h = 300;
		var padding = 100;

var svg = 	d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);

d3.csv("GCS.csv", function (error, data) {
			var dataset = data.map (function (d){
				return {
					Count: d["Count"],
					Hex: d["Hex"]};
				
			});
			console.log("Inital Data", data);

var rScale = d3.scale.linear()
	        .domain([0, d3.max(dataset, function(d) { return d.Count; })])
	                     .range([1, 100]);

var circles = svg.selectAll("circle")
			.data (dataset)
			.enter()
			.append("circle");

circles.attr("cx", function(d,i){
				return(i*10) + padding-20;
			})
			.attr("cy", h/2)
			.attr("r", function(d){
				return rScale(d.Count/5)
			})
			.style("fill", function(d){
				return d.Hex
			});

})

</script>
	</body>
</html>

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