Solar water flow

Graph to show variation in flow of water through a solar heating system for a pool.

Lines can be toggled by clicking on the legend and data ca be explored by using the mouse to determine point values.

Data is retrieved from sparkfun's data service (where it is updated every 10 minutes).

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.legend {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
}

</style>
<body>

<script src="https://d3js.org/d3.v3.min.js"></script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 45, bottom: 70, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
	formatDate = d3.time.format("%H:%M"),
	bisectDate = d3.bisector(function(d) { return d.date; }).left;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line
var temperatureline = d3.svg.line()	
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });
    
// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

// set the url to retrieve data from sparkfun
var inputURL = "https://data.sparkfun.com/output/OGz3bq3LxEiX3LovGq34.json?gt[timestamp]=now-1day";

d3.json(inputURL, function(error, data) {

data.forEach(function(d,i) {
		d.date = parseDate(d.dtg);
		d.temperature = +d.temperature;
			// Manual adjust for relative temperature differences
			// and to set the latest temp values
			// Return to pool
		if (d.sensor_id == '28-0000062c49a2')
		   {
				d.temperature = d.temperature+0.75;
				if (i<=3) {toPool = d.temperature;}
		   }

// From pool
		if (d.sensor_id == '28-0000062c46e3')
		   {
			   d.temperature = d.temperature+0.0;
			   if (i<=3) {fromPool = d.temperature;}
		   }

// From the solar
		if (d.sensor_id == '28-000005ea28bc')
		   {
			   d.temperature = d.temperature-0.875;
			   if (i<=3) {fromSolar = d.temperature;}
		   }
	});

// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([d3.min(data, function(d) { return d.temperature; })-1 , 
          d3.max(data, function(d) { return d.temperature; })
    ]);

// Nest the entries by sensor_id
var dataNest = d3.nest()
	.key(function(d) {return d.sensor_id;})
	.entries(data);

var color = d3.scale.category10();   // set the colour scale

legendSpace = width/dataNest.length; // spacing for the legend

// Loop through each sensor_id / key
dataNest.forEach(function(d,i) {

svg.append("path")
		.attr("class", "line")
		.style("stroke", function() { // Add the colours dynamically
			return d.color = color(d.key); })
		.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
		.attr("d", temperatureline(d.values));

// Add the Legend
	svg.append("text")
		.attr("x", (legendSpace/2)+i*legendSpace)  // space legend
		.attr("y", height + (margin.bottom/2)+ 5)
		.attr("class", "legend")    // style the legend
		.style("fill", function() { // Add the colours dynamically
			return d.color = color(d.key); })
		.on("click", function(){
			// Determine if current line is visible 
			var active   = d.active ? false : true,
			newOpacity = active ? 0 : 1; 
			// Hide or show the elements based on the ID
			d3.select("#tag"+d.key.replace(/\s+/g, ''))
				.transition().duration(100) 
				.style("opacity", newOpacity); 
			// Update whether or not the elements are active
			d.active = active;
			})  
		.text(
		    function() {
		        if (d.key == '28-000005ea28bc') {
					return "Solar "+Math.round(fromSolar*10)/10;}
		        if (d.key == '28-0000062c46e3') {
					return "Pool "+Math.round(fromPool*10)/10;}
		        if (d.key == '28-0000062c49a2') {
					return "Return "+Math.round(toPool*10)/10;}
		        else {return d.key;}
		        }); 
});

// Add the X Axis
svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

// Add the Y Axis
svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

var focus = svg.append("g") 
    .style("display", "none");

// append the x line
    focus.append("line")
        .attr("class", "x")
        .style("stroke", "blue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0.5)
        .attr("y1", 0)
        .attr("y2", height);

// append the y line
    focus.append("line")
        .attr("class", "y")
        .style("stroke", "blue")
        .style("stroke-dasharray", "3,3")
        .style("opacity", 0.5)
        .attr("x1", width)
        .attr("x2", width);

// place the value at the intersection
    focus.append("text")
        .attr("class", "y1")
        .style("stroke", "white")
        .style("stroke-width", "3.5px")
        .style("opacity", 0.8)
        .attr("dx", 8)
        .attr("dy", "-.3em");
    focus.append("text")
        .attr("class", "y2")
        .attr("dx", 8)
        .attr("dy", "-.3em");
        
    // place the date at the intersection
    focus.append("text")
        .attr("class", "y3")
        .style("stroke", "white")
        .style("stroke-width", "3.5px")
        .style("opacity", 0.8)
        .attr("dx", 8)
        .attr("dy", "1em");
    focus.append("text")
        .attr("class", "y4")
        .attr("dx", 8)
        .attr("dy", "1em");

// append the rectangle to capture mouse
    svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);

function mousemove() {
		var x0 = x.invert(d3.mouse(this)[0]),
		    y0 = d3.mouse(this)[1]
		    y1 = Math.round(y.invert(y0)*10)/10,
		    date1 = d3.mouse(this)[0];

// console.log(x0);

focus.select(".x")
		    .attr("transform", "translate(" + date1 + "," + (0) + ")")
		    .attr("y2", height );
		    
		focus.select(".y")
		    .attr("transform",
		          "translate(" + width * -1 + "," + y0 + ")")
		    .attr("x2", width + width);

focus.select("text.y1")
		    .attr("transform",
		          "translate(" + (date1 + 5) + "," + (y0) + ")")
		    .text(formatDate(x0));

focus.select("text.y2")
		    .attr("transform",
		          "translate(" + (date1 + 5) + "," + (y0) + ")")
		    .text(formatDate(x0));
		focus.select("text.y3")
		    .attr("transform",
		          "translate(" + (date1 + 7) + "," + (y0 + 4) + ")")
		    .text(y1);

focus.select("text.y4")
		    .attr("transform",
		          "translate(" + (date1 + 7) + "," + (y0 + 4) + ")")
		    .text(y1);
	}

});

</script>
</body>

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

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