Parallel coordinates (3)

Parallel coordinate plot for the Iris flower dataset, scaled to the standard deviation of each variable with one species highlighted. Inspired by the ggparcoord example in R.

<Plot
    grid
    height={450}
    inset={10}
    y={{ label: 'Standard deviation' }}
    color={{
        legend: true,
        // legend item order
        domain: [highlight, 'others'],
        scheme: highlight
            ? {
                  [highlight]: 'var(--svp-blue)',
                  others: '#99999922'
              }
            : undefined
    }}>
    <Line
        {...normalizeParallelY(
            {
                data: iris,
                x: 'Measurement',
                y: 'Value',
                z: 'Id'
            },
            'deviation'
        )}
        stroke={(d) =>
            /* show non-highlighted species in gray */
            d.Species === highlight ? d.Species : 'others'}
        sort={(d) =>
            /* make sure highlighted species are on top */
            d.Species === highlight ? 1 : -1}
        marker="dot" />
</Plot>
<Select
    bind:value={highlight}
    label="Highlight species"
    options={['setosa', 'versicolor', 'virginica']} />

Open in Svelte playground

Improve this page
Last update at: 2025/11/24