2f:T137f,{ const USE_SYNTHETIC_DATA = true; const FOUR_HOURS_MS = 4 * 60 * 60 * 1000; const MAX_POINTS = 5000; const width = 1050; const height = 460; const margin = { top: 20, right: 24, bottom: 45, left: 64 }; const container = html`

Stable

Waiting for data...

`; const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "460px") .style("background", "#fff"); container.appendChild(svg.node()); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const root = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleTime().range([0, innerWidth]); const y = d3.scaleLinear().domain([40, 300]).range([innerHeight, 0]); const gridGroup = root.append("g"); const xAxisGroup = root.append("g") .attr("transform", `translate(0,${innerHeight})`); const yAxisGroup = root.append("g"); const lowThreshold = root.append("line") .attr("stroke", "#2563eb") .attr("stroke-dasharray", "6 4"); const highThreshold = root.append("line") .attr("stroke", "#dc2626") .attr("stroke-dasharray", "6 4"); const path = root.append("path") .attr("fill", "none") .attr("stroke", "#059669") .attr("stroke-width", 3); const pointsLayer = root.append("g"); const allData = []; const line = d3.line() .x(d => x(d.timestamp)) .y(d => y(d.glucose)) .curve(d3.curveMonotoneX); function renderAxes() { xAxisGroup.call(d3.axisBottom(x).ticks(8).tickFormat(d3.timeFormat("%H:%M"))); yAxisGroup.call(d3.axisLeft(y).ticks(6)); gridGroup.call(d3.axisLeft(y).ticks(6).tickSize(-innerWidth).tickFormat("")); lowThreshold .attr("x1", 0).attr("x2", innerWidth) .attr("y1", y(70)).attr("y2", y(70)); highThreshold .attr("x1", 0).attr("x2", innerWidth) .attr("y1", y(180)).attr("y2", y(180)); } function renderChart() { renderAxes(); const [start, end] = x.domain().map(d => d.getTime()); const visibleData = allData.filter(d => { const t = d.timestamp.getTime(); return t >= start && t <= end; }); path.datum(visibleData).attr("d", line); const circles = pointsLayer .selectAll("circle") .data(visibleData, d => d.timestamp.toISOString()); circles.enter() .append("circle") .attr("r", 4) .merge(circles) .attr("cx", d => x(d.timestamp)) .attr("cy", d => y(d.glucose)) .attr("fill", d => { if (d.label === "hypoglycemia") return "#2563eb"; if (d.label === "hyperglycemia") return "#dc2626"; return "#059669"; }); circles.exit().remove(); } function updateAlarm(point) { const alarmBox = container.querySelector("#alarmBox"); const latestReading = container.querySelector("#latestReading"); latestReading.textContent = `Latest: ${point.glucose} mg/dL | ${point.label} | ${point.timestamp.toLocaleTimeString()}`; if (point.label === "hypoglycemia") { alarmBox.textContent = "Hypoglycemia detected"; alarmBox.style.color = "#2563eb"; } else if (point.label === "hyperglycemia") { alarmBox.textContent = "Hyperglycemia detected"; alarmBox.style.color = "#dc2626"; } else { alarmBox.textContent = "Stable"; alarmBox.style.color = "#15803d"; } } function addPoint(event) { const point = { timestamp: new Date(event.timestamp), glucose: +event.glucose, label: event.label }; allData.push(point); if (allData.length > MAX_POINTS) allData.shift(); const latestTime = point.timestamp; const windowStart = new Date(latestTime.getTime() - FOUR_HOURS_MS); x.domain([windowStart, latestTime]); renderChart(); updateAlarm(point); } function generateSyntheticGlucoseData(hours = 4, stepMinutes = 5) { const data = []; const now = new Date(); const start = new Date(now.getTime() - hours * 60 * 60 * 1000); let glucose = 118; for (let t = new Date(start); t <= now; t = new Date(t.getTime() + stepMinutes * 60 * 1000)) { glucose += (Math.random() - 0.5) * 10; if (Math.random() < 0.08) glucose -= 28; if (Math.random() < 0.08) glucose += 35; glucose = Math.max(50, Math.min(260, glucose)); let label = "normal"; if (glucose < 70) label = "hypoglycemia"; else if (glucose > 180) label = "hyperglycemia"; data.push({ timestamp: t.toISOString(), glucose: Math.round(glucose), label }); } return data; } const syntheticData = generateSyntheticGlucoseData(4, 5); for (const point of syntheticData) { addPoint(point); } return container; } 30:T2178,{ const FOUR_HOURS_MS = 4 * 60 * 60 * 1000; const MAX_POINTS = 5000; const STREAM_DELAY_MS = 500; const width = 1050; const height = 460; const margin = { top: 20, right: 24, bottom: 45, left: 64 }; const viewportWidth = 950; const yAxisWidth = 72; const container = html`

Waiting for data...

Stable

Normal

Hypoglycemia

Hyperglycemia

`; const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "460px") .style("background", "white") .style("border", "1px solid #e5e7eb") .style("border-radius", "12px"); container.appendChild(svg.node()); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const root = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const xBase = d3.scaleTime().range([0, innerWidth]); const y = d3.scaleLinear().domain([0, 500]).range([innerHeight, 0]); let currentX = xBase.copy(); let isLiveMode = true; let isPaused = false; let timer = null; const gridGroup = root.append("g"); const xAxisGroup = root.append("g") .attr("transform", `translate(0,${innerHeight})`); const yAxisGroup = root.append("g"); const lowThreshold = root.append("line") .attr("stroke", "#2563eb") .attr("stroke-dasharray", "6 4"); const highThreshold = root.append("line") .attr("stroke", "#dc2626") .attr("stroke-dasharray", "6 4"); const path = root.append("path") .attr("fill", "none") .attr("stroke", "#059669") .attr("stroke-width", 3); const pointsLayer = root.append("g"); const allData = []; const line = d3.line() .x(d => currentX(d.timestamp)) .y(d => y(d.glucose)) .curve(d3.curveMonotoneX); function renderAxes() { xAxisGroup.call( d3.axisBottom(currentX) .ticks(8) .tickFormat(d3.timeFormat("%H:%M")) ); yAxisGroup.call(d3.axisLeft(y).ticks(6)); gridGroup.call( d3.axisLeft(y) .ticks(6) .tickSize(-innerWidth) .tickFormat("") ); lowThreshold .attr("x1", 0).attr("x2", innerWidth) .attr("y1", y(70)).attr("y2", y(70)); highThreshold .attr("x1", 0).attr("x2", innerWidth) .attr("y1", y(180)).attr("y2", y(180)); } function getVisibleData() { const [start, end] = currentX.domain().map(d => d.getTime()); return allData.filter(d => { const t = d.timestamp.getTime(); return t >= start && t <= end; }); } function renderChart() { renderAxes(); const visibleData = getVisibleData(); path.datum(visibleData).attr("d", line); const circles = pointsLayer .selectAll("circle") .data(visibleData, d => d.timestamp.toISOString()); circles.enter() .append("circle") .attr("r", 4) .merge(circles) .attr("cx", d => currentX(d.timestamp)) .attr("cy", d => y(d.glucose)) .attr("fill", d => { if (d.label === "hypoglycemia") return "#2563eb"; if (d.label === "hyperglycemia") return "#dc2626"; return "#059669"; }); circles.exit().remove(); } function updateAlarm(point) { const alarmBox = container.querySelector("#alarmBox"); const latestReading = container.querySelector("#latestReading"); latestReading.textContent = `Latest: ${point.glucose} mg/dL | ${point.label} | ${point.timestamp.toLocaleTimeString()}`; if (point.label === "hypoglycemia") { alarmBox.textContent = "Hypoglycemia detected"; alarmBox.style.color = "#2563eb"; } else if (point.label === "hyperglycemia") { alarmBox.textContent = "Hyperglycemia detected"; alarmBox.style.color = "#dc2626"; } else { alarmBox.textContent = isLiveMode ? "Stable (Live)" : "Stable (Viewing history)"; alarmBox.style.color = "#15803d"; } } function addPoint(event) { const point = { timestamp: new Date(event.timestamp), glucose: +event.glucose, label: event.label }; allData.push(point); if (allData.length > MAX_POINTS) allData.shift(); if (isLiveMode) { const latestTime = point.timestamp; const windowStart = new Date(latestTime.getTime() - FOUR_HOURS_MS); xBase.domain([windowStart, latestTime]); currentX = xBase.copy(); } renderChart(); updateAlarm(point); } function jumpToLive() { if (!allData.length) return; const latestTime = allData[allData.length - 1].timestamp; const windowStart = new Date(latestTime.getTime() - FOUR_HOURS_MS); xBase.domain([windowStart, latestTime]); currentX = xBase.copy(); isLiveMode = true; svg.call(zoom.transform, d3.zoomIdentity); renderChart(); updateAlarm(allData[allData.length - 1]); } function generateNextPoint(lastPoint) { const lastTime = lastPoint ? lastPoint.timestamp : new Date(); let glucose = lastPoint ? lastPoint.glucose : 118; glucose += (Math.random() - 0.5) * 30; // medium swings if (Math.random() < 0.18) glucose += (Math.random() - 0.5) * 90; if (Math.random() < 0.10) glucose += Math.random() < 0.5 ? - 140: 140; if (Math.random() < 0.04) glucose += Math.random() < 0.5 ? - 220: 220; glucose += (180 - glucose)* 0.08; glucose = Math.max(50, Math.min(500, glucose)); let label = "normal"; if (glucose < 65) label = "hypoglycemia"; else if (glucose > 250) label = "hyperglycemia"; return { timestamp: new Date(lastTime.getTime() + 5 * 60 * 1000).toISOString(), glucose: Math.round(glucose), label }; } container.querySelector("#liveBtn").onclick = () => jumpToLive(); container.querySelector("#pauseBtn").onclick = () => { isPaused = !isPaused; container.querySelector("#pauseBtn").textContent = isPaused ? "Resume" : "Pause"; }; const seedStart = new Date(Date.now() - FOUR_HOURS_MS); let seedGlucose = 118; for (let i = 0; i < 48; i++) { seedGlucose += (Math.random() - 0.5) * 10; seedGlucose = Math.max(50, Math.min(260, seedGlucose)); let label = "normal"; if (seedGlucose < 70) label = "hypoglycemia"; else if (seedGlucose > 180) label = "hyperglycemia"; allData.push({ timestamp: new Date(seedStart.getTime() + i * 5 * 60 * 1000), glucose: Math.round(seedGlucose), label }); } const zoom = d3.zoom() .scaleExtent([1, 12]) .translateExtent([[0, 0], [innerWidth, innerHeight]]) .extent([[0, 0], [innerWidth, innerHeight]]) .on("zoom", event => { if (!xBase.domain()[0]) return; currentX = event.transform.rescaleX(xBase); const isIdentity = event.transform.k === 1 && event.transform.x === 0 && event.transform.y === 0; isLiveMode = isIdentity; renderChart(); if (allData.length) updateAlarm(allData[allData.length - 1]); }); svg.call(zoom); xBase.domain([ new Date(allData[allData.length - 1].timestamp.getTime() - FOUR_HOURS_MS), allData[allData.length - 1].timestamp ]); currentX = xBase.copy(); renderChart(); updateAlarm(allData[allData.length - 1]); timer = setInterval(() => { if (isPaused) return; const next = generateNextPoint(allData[allData.length - 1]); addPoint(next); }, STREAM_DELAY_MS); invalidation.then(() => clearInterval(timer)); return container; } 31:T257c,{ const WINDOW_HOURS = 4; const WINDOW_MS = WINDOW_HOURS * 60 * 60 * 1000; const POINT_INTERVAL_MS = 5 * 60 * 1000; const STREAM_DELAY_MS = 500; const MAX_POINTS = 5000; const viewportWidth = 950; const height = 460; const yAxisWidth = 72; const margin = { top: 20, right: 24, bottom: 55, left: 10 }; const pixelsPerHour = 220; const minPlotInnerWidth = WINDOW_HOURS * pixelsPerHour; const container = html`

Waiting for data...

Stable

Normal

Hypoglycemia

Hyperglycemia

`; const outer = html`

`; const yAxisPane = html`

`; const scrollFrame = html`

`; outer.appendChild(yAxisPane); outer.appendChild(scrollFrame); container.appendChild(outer); const yAxisSvg = d3.create("svg").attr("width", yAxisWidth).attr("height", height); const plotSvg = d3.create("svg").attr("height", height).style("display", "block"); yAxisPane.appendChild(yAxisSvg.node()); scrollFrame.appendChild(plotSvg.node()); const innerHeight = height - margin.top - margin.bottom; let plotWidth = viewportWidth; let plotInnerWidth = plotWidth - margin.left - margin.right; const allData = []; let isLiveMode = true; let isPaused = false; let timer = null; const y = d3.scaleLinear().domain([20, 500]).range([innerHeight, 0]); const x = d3.scaleTime().range([0, plotInnerWidth]); const yAxisRoot = yAxisSvg.append("g") .attr("transform", `translate(${yAxisWidth - 12},${margin.top})`); const plotRoot = plotSvg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const gridGroup = plotRoot.append("g"); const xAxisGroup = plotRoot.append("g") .attr("transform", `translate(0,${innerHeight})`); const lowThreshold = plotRoot.append("line") .attr("stroke", "#2563eb") .attr("stroke-dasharray", "6 4"); const highThreshold = plotRoot.append("line") .attr("stroke", "#dc2626") .attr("stroke-dasharray", "6 4"); const path = plotRoot.append("path") .attr("fill", "none") .attr("stroke", "#059669") .attr("stroke-width", 3); const pointsLayer = plotRoot.append("g"); const line = d3.line() .x(d => x(d.timestamp)) .y(d => y(d.glucose)) .curve(d3.curveMonotoneX); function formatTick(date) { const d = new Date(date); const isMidnight = d.getHours() === 0 && d.getMinutes() === 0; return isMidnight ? d3.timeFormat("%b %d\n%H:%M")(d) : d3.timeFormat("%H:%M")(d); } function updateDimensions() { if (!allData.length) return; const [start, end] = d3.extent(allData, d => d.timestamp); const totalMs = Math.max(end - start, WINDOW_MS); plotInnerWidth = Math.max( minPlotInnerWidth, (totalMs / (60 * 60 * 1000)) * pixelsPerHour ); plotWidth = plotInnerWidth + margin.left + margin.right; plotSvg.attr("width", plotWidth); x.range([0, plotInnerWidth]).domain([start, end]); } function renderYAxis() { yAxisRoot.call(d3.axisLeft(y).ticks(6)); } function renderAxes() { const tickEvery = plotInnerWidth > 2200 ? d3.timeHour.every(2) : d3.timeHour.every(1); xAxisGroup.call( d3.axisBottom(x) .ticks(tickEvery) .tickFormat(formatTick) ); xAxisGroup.selectAll(".tick text") .style("white-space", "pre") .attr("dy", "0.9em"); gridGroup.call( d3.axisLeft(y) .ticks(6) .tickSize(-plotInnerWidth) .tickFormat("") ); lowThreshold .attr("x1", 0) .attr("x2", plotInnerWidth) .attr("y1", y(70)) .attr("y2", y(70)); highThreshold .attr("x1", 0) .attr("x2", plotInnerWidth) .attr("y1", y(250)) .attr("y2", y(250)); } function renderChart() { if (!allData.length) return; updateDimensions(); renderYAxis(); renderAxes(); path.datum(allData).attr("d", line); const circles = pointsLayer .selectAll("circle") .data(allData, d => d.timestamp.toISOString()); circles.enter() .append("circle") .attr("r", 4) .merge(circles) .attr("cx", d => x(d.timestamp)) .attr("cy", d => y(d.glucose)) .attr("fill", d => { if (d.label === "hypoglycemia") return "#2563eb"; if (d.label === "hyperglycemia") return "#dc2626"; return "#059669"; }); circles.exit().remove(); if (isLiveMode) { scrollFrame.scrollLeft = scrollFrame.scrollWidth - scrollFrame.clientWidth; } } function updateAlarm(point) { const alarmBox = container.querySelector("#alarmBox"); const latestReading = container.querySelector("#latestReading"); latestReading.textContent = `Latest: ${point.glucose} mg/dL | ${point.label} | ${point.timestamp.toLocaleString()}`; if (point.label === "hypoglycemia") { alarmBox.textContent = "Hypoglycemia detected"; alarmBox.style.color = "#2563eb"; } else if (point.label === "hyperglycemia") { alarmBox.textContent = "Hyperglycemia detected"; alarmBox.style.color = "#dc2626"; } else { alarmBox.textContent = isLiveMode ? "Stable (Live)" : "Stable (Viewing history)"; alarmBox.style.color = "#15803d"; } } function addPoint(event) { const point = { timestamp: new Date(event.timestamp), glucose: +event.glucose, label: event.label }; allData.push(point); if (allData.length > MAX_POINTS) allData.shift(); renderChart(); updateAlarm(point); } function jumpToLive() { isLiveMode = true; renderChart(); if (allData.length) updateAlarm(allData[allData.length - 1]); } function generateNextPoint(lastPoint) { const lastTime = lastPoint ? new Date(lastPoint.timestamp) : new Date(); let glucose = lastPoint ? lastPoint.glucose : 180; glucose += (Math.random() - 0.5) * 30; if (Math.random() < 0.18) glucose += (Math.random() - 0.5) * 90; if (Math.random() < 0.10) glucose += Math.random() < 0.5 ? -140 : 140; if (Math.random() < 0.04) glucose += Math.random() < 0.5 ? -220 : 220; glucose += (180 - glucose) * 0.08; glucose = Math.max(50, Math.min(500, glucose)); let label = "normal"; if (glucose < 65) label = "hypoglycemia"; else if (glucose > 250) label = "hyperglycemia"; return { timestamp: new Date(lastTime.getTime() + POINT_INTERVAL_MS).toISOString(), glucose: Math.round(glucose), label }; } scrollFrame.addEventListener("scroll", () => { const nearRightEdge = scrollFrame.scrollLeft + scrollFrame.clientWidth >= scrollFrame.scrollWidth - 20; isLiveMode = nearRightEdge; if (allData.length) updateAlarm(allData[allData.length - 1]); }); container.querySelector("#liveBtn").onclick = () => jumpToLive(); container.querySelector("#pauseBtn").onclick = () => { isPaused = !isPaused; container.querySelector("#pauseBtn").textContent = isPaused ? "Resume" : "Pause"; }; const seedHours = 24; const seedStart = new Date(Date.now() - seedHours * 60 * 60 * 1000); let seedGlucose = 180; for (let t = new Date(seedStart); t <= new Date(); t = new Date(t.getTime() + POINT_INTERVAL_MS)) { seedGlucose += (Math.random() - 0.5) * 30; if (Math.random() < 0.14) seedGlucose += (Math.random() - 0.5) * 100; if (Math.random() < 0.08) seedGlucose += Math.random() < 0.5 ? -150 : 150; seedGlucose += (180 - seedGlucose) * 0.06; seedGlucose = Math.max(50, Math.min(500, seedGlucose)); let label = "normal"; if (seedGlucose < 65) label = "hypoglycemia"; else if (seedGlucose > 250) label = "hyperglycemia"; allData.push({ timestamp: new Date(t), glucose: Math.round(seedGlucose), label }); } renderChart(); updateAlarm(allData[allData.length - 1]); jumpToLive(); timer = setInterval(() => { if (isPaused) return; const next = generateNextPoint(allData[allData.length - 1]); addPoint(next); }, STREAM_DELAY_MS); invalidation.then(() => clearInterval(timer)); return container; } 32:T2b42,{ const WINDOW_HOURS = 4; const WINDOW_MS = WINDOW_HOURS * 60 * 60 * 1000; const POINT_INTERVAL_MS = 1 * 60 * 1000; const STREAM_DELAY_MS = 2000; const MAX_POINTS = 5000; const viewportWidth = 950; const height = 460; const yAxisWidth = 72; const margin = { top: 20, right: 24, bottom: 55, left: 10 }; const pixelsPerHour = 220; const minPlotInnerWidth = WINDOW_HOURS * pixelsPerHour; const container = html`

Waiting for data...

Stable

Normal

Hypoglycemia

Hyperglycemia

`; const outer = html`

`; const yAxisPane = html`

`; const scrollFrame = html`

`; outer.appendChild(yAxisPane); outer.appendChild(scrollFrame); container.appendChild(outer); const yAxisSvg = d3.create("svg") .attr("width", yAxisWidth) .attr("height", height); const plotSvg = d3.create("svg") .attr("height", height) .style("display", "block"); yAxisPane.appendChild(yAxisSvg.node()); scrollFrame.appendChild(plotSvg.node()); const innerHeight = height - margin.top - margin.bottom; let plotWidth = viewportWidth; let plotInnerWidth = plotWidth - margin.left - margin.right; const allData = []; let isLiveMode = true; let isPaused = false; let timer = null; const y = d3.scaleLinear() .domain([0, 500]) .range([innerHeight, 0]); const x = d3.scaleTime() .range([0, plotInnerWidth]); const yAxisRoot = yAxisSvg.append("g") .attr("transform", `translate(${yAxisWidth - 12},${margin.top})`); const plotRoot = plotSvg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const lowBand = plotRoot.append("rect") .attr("fill", "#dbeafe") .attr("opacity", 0.35); const normalBand = plotRoot.append("rect") .attr("fill", "#dcfce7") .attr("opacity", 0.2); const highBand = plotRoot.append("rect") .attr("fill", "#fee2e2") .attr("opacity", 0.35); const gridGroup = plotRoot.append("g"); const xAxisGroup = plotRoot.append("g") .attr("transform", `translate(0,${innerHeight})`); const lowThreshold = plotRoot.append("line") .attr("stroke", "#2563eb") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 1.5); const highThreshold = plotRoot.append("line") .attr("stroke", "#dc2626") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 1.5); const segmentsLayer = plotRoot.append("g"); const pointsLayer = plotRoot.append("g"); const line = d3.line() .x(d => x(d.timestamp)) .y(d => y(d.glucose)) .curve(d3.curveMonotoneX); function stateColor(label) { if (label === "hypoglycemia") return "#2563eb"; if (label === "hyperglycemia") return "#dc2626"; return "#059669"; } function buildSegments(data) { const segments = []; for (let i = 1; i < data.length; i++) { segments.push({ points: [data[i - 1], data[i]], label: data[i].label }); } return segments; } function formatTick(date) { const d = new Date(date); const isMidnight = d.getHours() === 0 && d.getMinutes() === 0; return isMidnight ? d3.timeFormat("%b %d\n%H:%M")(d) : d3.timeFormat("%H:%M")(d); } function updateDimensions() { if (!allData.length) return; const [start, end] = d3.extent(allData, d => d.timestamp); const totalMs = Math.max(end - start, WINDOW_MS); plotInnerWidth = Math.max( minPlotInnerWidth, (totalMs / (60 * 60 * 1000)) * pixelsPerHour ); plotWidth = plotInnerWidth + margin.left + margin.right; plotSvg .attr("width", plotWidth) .attr("height", height); x.range([0, plotInnerWidth]).domain([start, end]); } function renderYAxis() { yAxisRoot.call(d3.axisLeft(y).ticks(6)); } function renderAxesAndBands() { const tickEvery = plotInnerWidth > 2200 ? d3.timeHour.every(2) : d3.timeHour.every(1); xAxisGroup.call( d3.axisBottom(x) .ticks(tickEvery) .tickFormat(formatTick) ); xAxisGroup.selectAll(".tick text") .style("white-space", "pre") .attr("dy", "0.9em"); gridGroup.call( d3.axisLeft(y) .ticks(6) .tickSize(-plotInnerWidth) .tickFormat("") ); // lowBand // .attr("x", 0) // .attr("width", plotInnerWidth) // .attr("y", y(70)) // .attr("height", y(40) - y(70)); // normalBand // .attr("x", 0) // .attr("width", plotInnerWidth) // .attr("y", y(250)) // .attr("height", y(70) - y(250)); // highBand // .attr("x", 0) // .attr("width", plotInnerWidth) // .attr("y", y(500)) // .attr("height", y(250) - y(500)); lowThreshold .attr("x1", 0) .attr("x2", plotInnerWidth) .attr("y1", y(70)) .attr("y2", y(70)); highThreshold .attr("x1", 0) .attr("x2", plotInnerWidth) .attr("y1", y(250)) .attr("y2", y(250)); } function renderChart() { if (!allData.length) return; updateDimensions(); renderYAxis(); renderAxesAndBands(); const segments = buildSegments(allData); const segmentPaths = segmentsLayer .selectAll("path") .data(segments, d => d.points[1].timestamp.toISOString()); segmentPaths.enter() .append("path") .attr("fill", "none") .attr("stroke-width", 3) .merge(segmentPaths) .attr("stroke", d => stateColor(d.label)) .attr("d", d => line(d.points)); segmentPaths.exit().remove(); const circles = pointsLayer .selectAll("circle") .data(allData, d => d.timestamp.toISOString()); circles.enter() .append("circle") .attr("r", 2) .merge(circles) .attr("cx", d => x(d.timestamp)) .attr("cy", d => y(d.glucose)) .attr("fill", d => stateColor(d.label)); circles.exit().remove(); if (isLiveMode) { scrollFrame.scrollLeft = scrollFrame.scrollWidth - scrollFrame.clientWidth; } } function updateAlarm(point) { const alarmBox = container.querySelector("#alarmBox"); const latestReading = container.querySelector("#latestReading"); latestReading.textContent = `Latest: ${point.glucose} mg/dL | ${point.label} | ${point.timestamp.toLocaleString()}`; if (point.label === "hypoglycemia") { alarmBox.textContent = "Hypoglycemia detected"; alarmBox.style.color = "#2563eb"; } else if (point.label === "hyperglycemia") { alarmBox.textContent = "Hyperglycemia detected"; alarmBox.style.color = "#dc2626"; } else { alarmBox.textContent = isLiveMode ? "Stable (Live)" : "Stable (Viewing history)"; alarmBox.style.color = "#15803d"; } } function addPoint(event) { const point = { timestamp: new Date(event.timestamp), glucose: +event.glucose, label: event.label }; allData.push(point); if (allData.length > MAX_POINTS) allData.shift(); renderChart(); updateAlarm(point); } function jumpToLive() { isLiveMode = true; renderChart(); if (allData.length) updateAlarm(allData[allData.length - 1]); } function generateNextPoint(lastPoint) { const lastTime = lastPoint ? new Date(lastPoint.timestamp) : new Date(); let glucose = lastPoint ? lastPoint.glucose : 180; glucose += (Math.random() - 0.5) * 30; if (Math.random() < 0.18) glucose += (Math.random() - 0.5) * 90; if (Math.random() < 0.10) glucose += Math.random() < 0.5 ? -140 : 140; if (Math.random() < 0.04) glucose += Math.random() < 0.5 ? -220 : 220; glucose += (180 - glucose) * 0.08; glucose = Math.max(50, Math.min(500, glucose)); let label = "normal"; if (glucose < 65) label = "hypoglycemia"; else if (glucose > 250) label = "hyperglycemia"; return { timestamp: new Date(lastTime.getTime() + POINT_INTERVAL_MS).toISOString(), glucose: Math.round(glucose), label }; } scrollFrame.addEventListener("scroll", () => { const nearRightEdge = scrollFrame.scrollLeft + scrollFrame.clientWidth >= scrollFrame.scrollWidth - 20; isLiveMode = nearRightEdge; if (allData.length) updateAlarm(allData[allData.length - 1]); }); container.querySelector("#liveBtn").onclick = () => jumpToLive(); container.querySelector("#pauseBtn").onclick = () => { isPaused = !isPaused; container.querySelector("#pauseBtn").textContent = isPaused ? "Resume" : "Pause"; }; const seedHours = 24; const seedStart = new Date(Date.now() - seedHours * 60 * 60 * 1000); let seedGlucose = 180; for (let t = new Date(seedStart); t <= new Date(); t = new Date(t.getTime() + POINT_INTERVAL_MS)) { seedGlucose += (Math.random() - 0.5) * 30; if (Math.random() < 0.14) seedGlucose += (Math.random() - 0.5) * 100; if (Math.random() < 0.08) seedGlucose += Math.random() < 0.5 ? -150 : 150; seedGlucose += (180 - seedGlucose) * 0.06; seedGlucose = Math.max(50, Math.min(500, seedGlucose)); let label = "normal"; if (seedGlucose < 65) label = "hypoglycemia"; else if (seedGlucose > 250) label = "hyperglycemia"; allData.push({ timestamp: new Date(t), glucose: Math.round(seedGlucose), label }); } renderChart(); updateAlarm(allData[allData.length - 1]); jumpToLive(); timer = setInterval(() => { if (isPaused) return; const next = generateNextPoint(allData[allData.length - 1]); addPoint(next); }, STREAM_DELAY_MS); invalidation.then(() => clearInterval(timer)); return container; } 33:[] 2d:{"title":"Glucose tracking - ideation","cells":[{"id":0,"value":"# Glucose tracking - ideation","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"## 1. Building Static Line Graph","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"## 2. Real time using Synthetic Data","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"### 2-1. Panning","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"### 2-2. Scrollable, y-axis fixed","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"### 2-3. Scrollable, y-axis fixed, line color change","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"**========================================================================================================================**\nPlace holder (for upcoming updates)\n- prediction alarm notification visualization\n- importing data from api\n- (optional) prediction line vs real trend","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"**========================================================================================================================**\n#### Set up","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}