web: plot individual temperatures separately

1 files changed, 30 insertions, 27 deletions

diff --git a/web/plot.js b/web/plot.js
index b5e023f..c907f94 100644
--- a/web/plot.js
+++ b/web/plot.js
@@ -2,13 +2,9 @@ import './lib/d3.v7.min.js';
 
 let POINTS = [];
 
-const x = d3.scaleLinear([0, 350]);
-const y = d3.scaleLinear([0, 120]).nice(30);
-
-// Declare the line generator.
-const line = d3.line()
-  .x((d, i) => x(i))
-  .y((d, i) => y(d));
+const x = d3.scaleLinear([0, 120]).nice(30);
+const y = d3.scaleLinear([0, 350]);
+const line = d3.line(d => x(d[0]), d => y(d[1]));
 
 const margin = 40;
 
@@ -20,33 +16,38 @@ const xa = svg.append('g');
 // Add the y-axis.
 const ya = svg.append('g');
 
-// add the plot.
-const plot = svg.append('path')
-  .attr('fill', 'none')
-  .attr('stroke', 'black')
-  .attr('stroke-width', '2');
+const PLOTS = {};
 
 const sec = d3.format('02');
 const min = d3.format(' ');
 const minsec = v => `${min(Math.floor(v / 60))}:${sec(v % 60)}`;
 
-const update = () => {
-  x.domain([0, Math.max(POINTS.length, 120)]).nice(30);
-  y.domain(d3.extent([...d3.extent(POINTS), 0, 350]));
-
-  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
-  ya.transition().call(d3.axisLeft(y))
-  plot.transition().attr('d', line(POINTS));
+export const addPlot = (name) => {
+  const path = svg.append('path')
+    .attr('fill', 'none')
+    .attr('stroke', 'black')
+    .attr('stroke-width', '2');
+
+  PLOTS[name] = {
+    data: [],
+    path,
+  };
+  return PLOTS[name];
 };
 
-export const clear = () => {
-  POINTS = [];
-  update();
-};
 
-export const addPoint = (temp) => {
-  POINTS.push(temp);
-  update();
+export const update = () => {
+  const times = d3.merge(Object.values(PLOTS).map(p => p.data.map(d => d[0])));
+  const temps = d3.merge(Object.values(PLOTS).map(p => p.data.map(d => d[1])));
+
+  x.domain([0, d3.max([...times, 120])]).nice(30);
+  y.domain([0, d3.max([...temps, 200])]).nice(25);
+
+  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
+  ya.transition().call(d3.axisLeft(y))
+  for (const { path, data } of Object.values(PLOTS)) {
+    path.transition().attr('d', line(data));
+  }
 };
 
 const onresize = () => {
@@ -60,7 +61,9 @@ const onresize = () => {
   y.range([height-2*margin, margin]);
   xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
   ya.transition().call(d3.axisLeft(y))
-  plot.transition().attr('d', line(POINTS));
+  for (const { path, data } of Object.values(PLOTS)) {
+    path.transition().attr('d', line(data));
+  }
 
   xa.attr('transform', `translate(0, ${height - 2*margin})`);
   ya.attr('transform', `translate(${margin}, 0)`);