Responsive cells

A responsive cell plot that flips coordinates based on the width of the container, displaying Seattle temperatures for 2015.

JanFebMarAprMayJunJulAugSepOctNovDec JanFebMarAprMayJunJulAugSepOctNovDec scale type mismatch for x (needs band)scale type mismatch for y (needs band)
<script lang="ts">
    import { Plot, Cell, formatMonth } from 'svelteplot';

    import { page } from '$app/state';
    let { seattle } = $derived(page.data.data);

    let clientWidth = $state(500);

    // Seattle temperatures data
    const x = $derived(clientWidth < 600 ? 'y' : 'x');
    const y = $derived(clientWidth < 600 ? 'x' : 'y');
</script>

<div bind:clientWidth>
    <Plot
        padding={0}
        aspectRatio={clientWidth < 600 ? 2 : 1}
        {...{
            [y]: {
                ticks: [
                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
                ],
                tickFormat: formatMonth('en', 'short'),
                axis: clientWidth < 600 ? 'both' : 'left'
            }
        }}>
        <Cell
            data={seattle}
            filter={(d) => d.date.getUTCFullYear() === 2015}
            {...{
                [x]: (d) => d.date.getUTCDate(),
                [y]: (d) => d.date.getUTCMonth()
            }}
            fill="temp_max"
            inset={0.5} />
    </Plot>
</div>

Open in Svelte playground