poop-graph/static/poopGraph.js

const startInput = document.getElementById('startDate');
const endInput = document.getElementById('endDate');
const cutSpikesInput = document.getElementById('cutSpikes');

const hashParams = new URLSearchParams(window.location.hash.substring(1));
startInput.value = hashParams.get('start');
endInput.value = hashParams.get('end');
cutSpikesInput.checked = hashParams.get('cutSpikes') === 'true';

const SPIKE_PERCENTILE = 95;
const Y_ROUNDING = 500;

fetch('/data.json')
    .then(resp => resp.json())
    .then(plot)
    .catch(err => {
        console.log(err);
    });

function average(window) {
    let y_sum = 0;
    let count = 0;
    for (const sample of window) {
        if (sample['y'] !== undefined) {
            y_sum += sample['y'];
            count += 1;
        }
    }
    if (count === 0) {
        return undefined;
    }
    return y_sum / count;
}

function localLinearRegression(slopeWindowSize, averageWindowSize) {
    return (window) => {
        let x_sum = 0;
        let y_sum = 0;
        let count = 0;
        for (const sample of window.slice(-slopeWindowSize)) {
            if (sample['y'] !== undefined) {
                x_sum += sample['x'];
                y_sum += sample['y'];
                count += 1;
            }
        }
        if (count === 0) {
            return undefined;
        }
        const x_avg = x_sum / count;
        const y_avg = y_sum / count;

        let numerator = 0;
        let denominator = 0;
        for (const sample of window) {
            if (sample['y'] !== undefined) {
                const x_err = sample['x'] - x_avg;
                const y_err = sample['y'] - y_avg;
                numerator += x_err * y_err;
                denominator += x_err * x_err;
            }
        }
        if (denominator === 0) {
            return window.at(-1)['y'];
        }
        const slope = numerator / denominator;

        let short_x_sum = 0;
        let short_y_sum = 0;
        let short_count = 0;
        for (const sample of window.slice(-averageWindowSize)) {
            if (sample['y'] !== undefined) {
                short_x_sum += sample['x'];
                short_y_sum += sample['y'];
                short_count += 1;
            }
        }
        if (short_count === 0) {
            return y_avg + (window.at(-1)['x'] - x_avg) * slope;
        }
        const short_x_avg = short_x_sum / short_count;
        const short_y_avg = short_y_sum / short_count;
        return short_y_avg + (window.at(-1)['x'] - short_x_avg) * slope;
    };
}

function smooth(data, column, windowSize, smoothFunc) {
    const smoothed = [];
    const window = [];
    for (const row of data) {
        window.push({ x: new Date(row['x']).getTime(), y: row[column] });
        if (window.length > windowSize) {
            window.shift();
        }
        smoothed.push({ x: row['x'], y: smoothFunc(window) });
    }
    return smoothed;
}

function extractWithErrorBars(data, region) {
    const extracted = [];
    for (const row of data['rows']) {
        const y = row[region + ' (copies/mL)'];
        if (y !== undefined) {
            extracted.push({
                x: row['Date'],
                y: y,
                yMin: y - (row[region + ' Low Confidence Interval'] || 0),
                yMax: y + (row[region + ' High Confidence Interval'] || 0),
            });
        }
    }
    return extracted;
}

function getPercentile(data, start, end, percentile) {
    let sorted = data
        .filter((row) => (start === "" || row.x >= start) && (end === "" || row.x <= end))
        .map((row) => row.yMax)
        .sort((a,b) => a - b);
    return sorted[Math.ceil(sorted.length*percentile/100) - 1];
}

function updateShareLink(chart, link) {
    const ctx = chart.canvas.getContext('2d');
    ctx.save();
    ctx.globalCompositeOperation = 'destination-over';
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
    link.href = chart.canvas.toDataURL();
    chart.update();
}

function plot(data) {
    const northData = extractWithErrorBars(data, 'Northern');
    const southData = extractWithErrorBars(data, 'Southern');
    const northCtx = document.getElementById('northCanvas');
    const southCtx = document.getElementById('southCanvas');

    const getOptions = (region) => {
        return {
            aspectRatio: 1,
            interaction: {
                intersect: false,
            },
            scales: {
                x:  {
                    type: 'time',
                    min: startInput.value,
                    max: endInput.value,
                    time: {
                        tooltipFormat: 'MMM d, yyyy',
                    },
                },
                y: {
                    min: 0,
                    max: null,
                },
            },
            plugins: {
                title: {
                    display: true,
                    text: region + ' System Wastewater COVID RNA Signal (copies/mL)',
                },
            },
            elements: {
                pointWithErrorBar: {
                    errorBarWhiskerSize: 5,
                },
            },
            animation: {
                duration: 0,
            },
        };
    };

    const northOptions = getOptions("North");
    const southOptions = getOptions("South");

    const updateYMax = () => {
        const cutoffPercentile = cutSpikesInput.checked ? SPIKE_PERCENTILE : 100;
        const rawMax = getPercentile(northData.concat(southData), startInput.value, endInput.value, cutoffPercentile);
        const max = Y_ROUNDING * Math.ceil(rawMax / Y_ROUNDING);
        northOptions.scales.y.max = max;
        southOptions.scales.y.max = max;
    };

    updateYMax();

    const northChart = new Chart(northCtx, {
        data: {
            datasets: [
                {
                    type: 'scatterWithErrorBars',
                    label: 'Measured value',
                    data: northData,
                    backgroundColor: 'rgba(0,0,255,0.5)',
                    color: 'rgba(0,0,255,0.5)',
                    borderColor: 'rgba(0,0,255,0.5)',
                    spanGaps: true,
                },
/*                {
                    type: 'line',
                    label: 'smoothing 18/14',
                    data: smooth(northData, 'y', 18, localLinearRegression(18, 14)),
                    pointRadius: 0,
                    borderColor: 'rgba(0,0,255,0.6)',
                },
                {
                    type: 'line',
                    label: 'smoothing 14/14',
                    data: smooth(northData, 'y', 14, localLinearRegression(14, 14)),
                    pointRadius: 0,
                    borderColor: 'rgba(255,0,255,0.6)',
                },*/
                {
                    type: 'line',
                    label: '7-day average (low)',
                    data: smooth(northData, 'yMin', 7, average),
                    pointRadius: 0,
                    borderColor: 'rgba(0,255,0,0.6)',
                    fill: '+1',
                    backgroundColor: 'rgba(0,255,0,0.2)',
                },
                {
                    type: 'line',
                    label: '7-day average',
                    data: smooth(northData, 'y', 7, average),
                    pointRadius: 0,
                    borderColor: 'rgba(0,128,0,0.9)',
                    backgroundColor: 'rgba(0,128,0,0.9)',
                },
                {
                    type: 'line',
                    label: '7-day average (high)',
                    data: smooth(northData, 'yMax', 7, average),
                    pointRadius: 0,
                    borderColor: 'rgba(0,255,0,0.6)',
                    fill: '-1',
                    backgroundColor: 'rgba(0,255,0,0.2)',
                },
            ]
        },
        options: northOptions,
    });
    const southChart = new Chart(southCtx, {
        data: {
            datasets: [
                {
                    type: 'scatterWithErrorBars',
                    label: 'Measured value',
                    data: southData,
                    backgroundColor: 'rgba(255,0,0,0.5)',
                    color: 'rgba(255,0,0,0.5)',
                    borderColor: 'rgba(255,0,0,0.5)',
                    spanGaps: true,
                },
                {
                    type: 'line',
                    label: '7-day average (low)',
                    data: smooth(southData, 'yMin', 7, average),
                    pointRadius: 0,
                    borderColor: 'rgba(255,127,0,0.6)',
                    fill: '+1',
                    backgroundColor: 'rgba(255,127,0,0.2)',
                },
                {
                    type: 'line',
                    label: '7-day average',
                    data: smooth(southData, 'y', 7, average),
                    pointRadius: 0,
                    borderColor: 'rgba(127,63,0,0.9)',
                    backgroundColor: 'rgba(127,63,0,0.9)',
                },
                {
                    type: 'line',
                    label: '7-day average (high)',
                    data: smooth(southData, 'yMax', 7, average),
                    pointRadius: 0,
                    borderColor: 'rgba(255,127,0,0.6)',
                    fill: '-1',
                    backgroundColor: 'rgba(255,127,0,0.2)',
                },
            ],
        },
        options: southOptions,
    });

    const update = () => {
        updateYMax();
        setTimeout(() => {
            northChart.update();
            southChart.update();
        }, 10);

        const params = new URLSearchParams();
        const start = startInput.value;
        if (start !== '') {
            params.set('start', start);
        }
        const end = endInput.value;
        if (end !== '') {
            params.set('end', end);
        }
        if (cutSpikesInput.checked) {
            params.set('cutSpikes', 'true');
        }
        window.location.hash = params.toString();
    };

    startInput.addEventListener('input', (e) => {
        northOptions.scales.x.min = e.target.value;
        southOptions.scales.x.min = e.target.value;
        update();
    });
    endInput.addEventListener('input', (e) => {
        northOptions.scales.x.max = e.target.value;
        southOptions.scales.x.max = e.target.value;
        update();
    });
    cutSpikesInput.addEventListener('change', (e) => {
        update();
    });
    const northShare = document.getElementById('northShare');
    northShare.addEventListener('click', () => {
        updateShareLink(northChart, northShare);
    });
    const southShare = document.getElementById('southShare');
    southShare.addEventListener('click', () => {
        updateShareLink(southChart, southShare);
    });
}