xxxxxxxxxx<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> <div id="container"> <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> <script type="text/javascript"> // graphic parameters var wid = 700, hei = 370, widleg = 200 ; var margin = {top:20, right:40, bottom:40, left:70}; var pad = 20, inter = 40; // scales var xscale = d3.scale.linear().range([margin.left,wid-margin.right]), yscale = d3.scale.linear().range([margin.top,hei-margin.bottom]), cscale = d3.scale.linear().range(["#CC0000","#FFFF33","#330099","#009933","#CC0000"]) .domain([1,91,183,275,365]); 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.); }); function colorie() { svg.selectAll("#listener").remove(); // reordering data by date // and coloring gscat.selectAll("circle") //gscat .sort(function(a, b) { return d3.ascending(dateFormat.parse(a.Date),dateFormat.parse(b.Date)); }) //circ //gscat.selectAll("circle") .transition() .delay(function(d){return 300+d.Day*20;}) .duration(500) .attr("opacity",0.4) .attr("fill",function(d,i){return cscale(d.Day)}); //gscat.selectAll("rect") legtop .sort(function(a, b) { return d3.ascending(dateFormat.parse(a.Date),dateFormat.parse(b.Date)); }) // .transition() // .delay(function(d,i){return 300+i*20;}) // .duration(200) .attr("y",function(d,i){return 15+i;}) .attr("fill-opacity",0.4) ; svg.append("text") .attr("x",wid+inter+45) .attr("y",20) .text("01 Jan."); svg.append("text") .attr("x",wid+inter+45) .attr("y",96) .text("21 Mar"); svg.append("text") .attr("x",wid+inter+45) .attr("y",188) .text("21 Jun"); svg.append("text") .attr("x",wid+inter+45) .attr("y",281) .text("21 Sep"); svg.append("text") .attr("x",wid+inter+45) .attr("y",361) .text("21 Dec") ; } </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js