Intermediate d3 course - assignment 1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Weather data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css" >
				
			body {
				margin: 0;
				background-color: AliceBlue;
				font-family: "nyt-cheltenham",georgia,Lucida sans,
					"times new roman",times,serif;
			}
			h1 {
				font-size: 28px;
				border-top: solid 8px #807166;
				border-bottom: solid 8px #807166;
			}
			p {
				font-size: 14px;
				line-height: 18px;		
				padding: 30px;	
				border-bottom: solid 2px #222222;			
			}
			svg {
				font-family: Helvetica, Arial, sans-serif;
			}

#container {
				width: 940px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}
			
			g.circ text {
				font-family: Helvetica, Arial, sans-serif;
				font-size: 11px;
				font-weight: bold;
				text-anchor: middle;
				opacity: 0;
			}

g.circ:hover circle {
				opacity: 0.8 ;
			}

g.circ:hover text {
				opacity: 1;
			}				
			g.circ.legend text {
				opacity: 0.8 ;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: georgia,Lucida sans,
					"times new roman",times,serif;
				font-size: 14px;
			}
			
		</style>
	</head>
	<body>

<h1> A year of weather in Martinborough, Wairarapa, NZ </h1>

<p> This graph shows the levels of solar radiation recorded daily in 
		Martinborough, New Zealand between the 1st of Jan. and the 31st of Dec. 2014,
		reported against the number of hours of sunshine in that day. 
		Although a clear linear relation is visible, there is still a high unexplained
		variance in the data. <br>
		Click on the graph to show the date of recording ... It now appears that the variation
		in the relation radiation vs. sunshine hours is related to the season. <em>(Recall that
		the New Zealand summer takes place from December to March)</em> <br>
		</p>

</div>

var dateFormat = d3.time.format("%d/%m/%Y");
	
	// axes
	var xaxis = d3.svg.axis()
					.scale(xscale)
					.orient("bottom");	
	var yaxis = d3.svg.axis()
					.scale(yscale)
					.orient("left");
					
	// graphic elements
	// svg in container
	var svg = d3.select("#container")
				.append("svg")
				.attr("width", wid+inter+widleg)
				.attr("height", hei+margin.bottom);
				
	var gscat, circ, gleg, legtop;			
				
	// main script
	d3.csv("Martinborough.csv",function(data) {				
		
		// getting min-max values and setting scale limits
		xscale.domain([0, 
					d3.max(data,function(d){return +d.SunHr ;})]);
						
		yscale.domain([d3.max(data,function(d){return +d.Radiation ;}),
						0]);

// data is bound to group not to element directly
		gscat = svg.selectAll("g")
						.data(data)
						.enter()
						.append("g")
						.attr("class", "circ");

gscat.sort(function(a,b){
					return d3.ascending(+a.SunHr,+b.SunHr);
					})	
					
		// circles for scatter plot
		circ = gscat.append("circle")
			.attr("r",0)	// non visible at start
			.attr("cx",function(d){return xscale(+d.SunHr);})
			.attr("cy",function(d){return yscale(+d.Radiation);})			
			.attr("fill","#888888")
			.attr("opacity",0.6);
								
		// add text element: will display the date	
		gscat.append("text")
			.attr("x", wid/2)
			.attr("y", 15)
			.text(function(d) {return d.Date;});		
			
		// circles appearing	
		circ.transition().delay(function(d,i){return i*25;})
				.duration(500)
				.attr("r",6);						
				
		// adding axes
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + (hei - margin.bottom + 10) + ")")
			.call(xaxis);

svg.append("g")
			.attr("class", "y axis")
			.attr("transform", "translate(" + (margin.left - 10) + ",0)")
			.call(yaxis);

// axes labels		
		svg.append("text")
			.attr("transform", "translate(" + (wid/ 2) + " ," + (hei+10) + ")")
			.style("text-anchor", "middle")
			.text("Sun time (Hr)");

svg.append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", 10 )
			.attr("x",0 - (hei/2))
			.attr("dy", "1em")
			.style("text-anchor", "middle")
			.text("Radiation (MJ/m2)");				
			
		// invisible element to listen to click event	
		svg.append("rect")
			.attr("id","listener")
			.attr("x",0).attr("y",0)
			.attr("width",wid).attr("height",hei)
			.attr("opacity",0)
			.on("click",colorie);	
		
		// creating side colour legend	
		legtop = gscat.append("rect")
						.attr("class","legend")
						.attr("x",wid+inter+10)
						.attr("y",function(d,i){return 15+i;})
						.attr("height",1)
						.attr("width",30)
						.attr("fill",function(d){return cscale(d.Day);})
						.attr("fill-opacity",0.);	
		
	});

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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