utd-singularity/public/index.js

const buildings = {
    "MC": {
        name: "McDermott Library",
        bounds: [
            [32.98732, -96.74801],
            [32.98732, -96.74723],
            [32.98660, -96.74723],
            [32.98660, -96.74801]
        ],
    },
    "SU": {
        name: "Student Union",
        bounds: [
            [32.98711, -96.74909],
            [32.98711, -96.74848],
            [32.98661, -96.74849],
            [32.98661, -96.74910]
        ]
    },
    "ECSW": {
        name: "Engineering and Computer Science West",
        bounds: [
            [32.98639, -96.75217],
            [32.98638, -96.75128],
            [32.98579, -96.75119],
            [32.98581, -96.75217]
        ]
    }
}

const data = getData()

const map = L.map('map', {
    minZoom: 15,
    maxZoom: 18
}).setView([32.98649, -96.7485], 18)


L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    id: 'mapbox/dark-v10',
    // id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(map)


for (const [id, building] of Object.entries(buildings)) {
    // console.log(id, building)
    const poly = L.polygon(building.bounds)

    poly.on('click', ev => {
        // console.log(ev)
        map.panTo(poly.getCenter())
        displayCard(id)
    }).addTo(map)

    poly.setStyle({
        color: '#727272',
        opacity: .5
    })

    buildings[id].poly = poly
}

// Update map colors every minute
drawRegions()
setTimeout(drawRegions, 60 * 1000)

async function drawRegions() {
    const data = await getData()

    const ecsw = data.filter(d => d.loc === 'ECSW')

    console.log(ecsw)

    const avg = ecsw.reduce((acc, v) => acc + v.count, 0) / ecsw.length
    const current = ecsw[ecsw.length - 1].count
    const delta = current - avg
    const busy = delta > 0
    const color = busy ? '#ff0000' : '#00ff00'
    buildings.ECSW.poly.setStyle({ color })
    console.log({avg, current, delta, color})
}

function getData() {
    return fetch('/db.csv').then(res => res.text()).then(text => {
        return text.trim().split('\n').map(line => {
            const [loc, time, count] = line.split(',')
            return { loc, time: new Date(+time), count: parseInt(count) }
        })
    })
}


async function displayCard(id) {
    const data = (await getData()).filter(d => d.loc === id)
    const card = document.getElementById("card")
    await card.animate([
        { transform: 'translateY(50px)', opacity: "0" },
    ], {
        duration: 200,
        fill: 'forwards',
        easing: 'cubic-bezier(0.4, 0.0, 1, 1)'
    }).finished

    console.log(data)

    const avg = data.reduce((acc, v) => acc + v.count, 0) / data.length
    const current = data[data.length - 1]?.count ?? NaN
    const delta = current - avg
    const busy = delta > 0
    const color = busy ? '#ff0000' : '#00ff00'

    console.log({ avg, current, delta, busy, color })

    card.innerHTML = `
        <h1>${buildings[id].name}</h1>
        <p>${busy ? "Busier than usual" : "Not as busy :)"}</p>
        <canvas id="myChart" height="80"></canvas>
    `
    card.style.setProperty("--region", `'${id}'`)
    updateChart(data)
    await card.animate([
        { transform: 'translateY(0%)', opacity: "1" },
    ], {
        duration: 200,
        fill: 'forwards',
        easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)'
    }).finished
}


function updateChart(data) {
    // { loc, time: new Date(+time), count: parseInt(count) }

    const parsed = data.map(d => ({ x: d.time, y: d.count }))

    const ctx = document.getElementById('myChart').getContext('2d')
    new Chart(ctx, {
        type: 'line',
        data: {
            // labels: ['Now', '1h ago', '2h ago', '3h ago', '4h ago', '5h ago'].reverse(),
            datasets: [{
                label: 'Density',
                data: parsed,
                borderColor: '#55aadd',
                backgroundColor: '#55aadd',
                // borderWidth: 2
            }]
        },
        options: {
            scales: {
                x: {
                    beginAtZero: true,
                },
                y: {
                    beginAtZero: true,
                }
            }
        }
    })
}