Caminin Odroid Graph

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<style>
			.axis .domain {
				display: none;
			}

.axis line {
				stroke: rgb(155, 155, 155);
				stroke-opacity: .3;
			}
		</style>
	</head>
	<body>
		<svg></svg>
  		<script>
			let maxWidth = window.innerWidth - 25;
			let maxHeight = window.innerHeight - 25;

const svg = d3.select("svg")
						  .attr("width", maxWidth)
						  .attr("height", maxHeight);

const margin = { top:10, left:40, bottom:30, right:20 };
			let width = +svg.attr("width") - margin.left - margin.right;
			let height = +svg.attr("height") - margin.top - margin.bottom;
	
			const g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const x = d3.scaleTime().rangeRound([0, width]);
			const y = d3.scaleLinear().rangeRound([height, 0]);
			
			const parseTime = d3.timeParse("%Y %m %d %H %M %S");
			const displayTime = d3.timeFormat("%Hh%M");

const line = d3.line()
						   .x(function(d) { return x(d.date); })
						   .y(function(d) { return y(d.temp); })
						   .curve(d3.curveBasis);

const tooltip = g.append("g")
							 .attr("class", "mark")
							 .style("opacity", 0);
			tooltip.append("circle").attr("r", 7)
				   .style("fill", "none")
				   .style("stroke-width", "1.5px");
			tooltip.append("text")
				   .attr("x", 10)
				   .attr("y", -7.5)
				   .style("font", "10px sans-serif")
				   .attr("dy", "0.35em")
				   .text("");

let xAxis, yAxis, path, pathLine;
	
			let data;

d3.queue()
				.defer(d3.json, "data.json")
				.await(process);
			
			window.onresize = resize;

function process(error, json) {     
				for(let o of json.datas)
					o.date = parseTime(o.date);
				
				data = json.datas.slice(json.datas.length-50);
				// La dernière valeur était nulle
				data.pop();

console.log("DATA : %O", data);

draw();
			}
			
			function draw() {
				x.domain(d3.extent(data, function(d) { return d.date; }));
				y.domain([0, d3.max(data, function(d) { return d.temp; })]);

// X Axis
				xAxis = g.append("g")
						 .attr("class", "axis")
						 .attr("transform", "translate(0, " + height + ")")
						 .call(d3.axisBottom(x).tickFormat(function(d) { return displayTime(d); }));
				// Y Axis
				yAxis = g.append("g")
						 .attr("class", "axis")
						 .call(d3.axisLeft(y).tickSize(-width).tickFormat(function(d) { return d; }));

path = g.append("g")
						.attr("class", "path")
						.data([data]);

pathLine = path.append("path")
					.attr("fill", "none")
					.attr("stroke", "rgb(31, 119, 180)")
					.attr("stroke-width", 2)
					.attr("d", line)
					.on("mouseover", function(d, i) {
						tooltip.style("opacity", 1);
					})
					.on("mousemove", function(d) {
						const mouse = d3.mouse(this);
						const mouseXValue = x.invert(mouse[0]);
						const mouseYValue = y.invert(mouse[1]);

tooltip.attr("transform", "translate(" + mouse[0] + "," + mouse[1] + ")");
						tooltip.selectAll("circle").style("stroke", "rgb(31, 119, 180)");
						tooltip.selectAll("text").style("fill", "rgb(31, 119, 180)")
							   .text(displayTime(mouseXValue) + " : " + Math.round(mouseYValue));
					})
					.on("mouseleave", function(d) {
						tooltip.style("opacity", 0);
					});

path.selectAll("circle")
					.data(function(d) { return d; })
					.enter()
					.append("circle")
				 	.attr("class", ".dot")
					.attr("cx", function(d) { return x(d.date); })
					.attr("cy", function(d) { return y(d.temp); })
					.attr("r", 1)
					.style("fill", "blue");
				
			}

d3.interval(function() {
				console.log("maj");
				// TODO Update data + update graph
			}, 60000);

function resize() {
				maxWidth = window.innerWidth - 25;
				maxHeight = window.innerHeight - 25;

svg.attr("width", maxWidth);
				svg.attr("height", maxHeight);

width = +svg.attr("width") - margin.left - margin.right;
				height = +svg.attr("height") - margin.top - margin.bottom;
				
				x.rangeRound([0, width]);
				y.rangeRound([height, 0]);

// X Axis
				xAxis.transition().duration(100)
					 .attr("transform", "translate(0, " + height + ")")
					 .call(d3.axisBottom(x).tickFormat(function(d) { return displayTime(d); }));
				// Y Axis
				yAxis.transition().duration(100)
					 .call(d3.axisLeft(y).tickSize(-width).tickFormat(function(d) { return d; }));

pathLine.transition().duration(100)
					.attr("d", line);

path.selectAll("circle")
					.attr("cx", function(d) { return x(d.date); })
					.attr("cy", function(d) { return y(d.temp); });
			}
  		</script>
	</body>
</html>

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