I'll know it when I see it.
Public
Edited
Nov 22, 2024
// visual
plot = Plot.plot({
x: {
domain: ['Ontario', 'England', 'Kentucky'],
tickSize: 0
},
y: {
grid: true,
nice: true
},
color: {
type: 'ordinal',
scheme: 'BrBG',
reverse: true
},
marks: [
Plot.barY(tidy, {
x: 'London',
y1: 'value',
y2: 'value2',
fill: d => String(d.group)
})
]
})
// format data
tidy = T.tidy(
data,
T.groupBy('London', [
T.mutateWithSummary({
value2: T.lead('value'),
group: T.rowNumber()
}),
T.filter(d => d.value2)
])
)
// source data
data = [
{London: "Ontario", type: "winterMeanLow", value: -9},
{London: "Ontario", type: "annualMeanLow", value: 3},
{London: "Ontario", type: "annualMean", value: 8},
{London: "Ontario", type: "annualMeanHigh", value: 13},
{London: "Ontario", type: "summerMeanHigh", value: 27},
{London: "England", type: "winterMeanLow", value: 3},
{London: "England", type: "annualMeanLow", value: 8},
{London: "England", type: "annualMean", value: 12},
{London: "England", type: "annualMeanHigh", value: 16},
{London: "England", type: "summerMeanHigh", value: 24},
{London: "Kentucky", type: "winterMeanLow", value: -3},
{London: "Kentucky", type: "annualMeanLow", value: 8},
{London: "Kentucky", type: "annualMean", value: 14},
{London: "Kentucky", type: "annualMeanHigh", value: 20},
{London: "Kentucky", type: "summerMeanHigh", value: 30},
]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
