Public
Edited
Mar 27
import {Plot} from "@observablehq/plot"
regionData = [
{
Region: 'South',
totalSpending: 157,
avgOrderValue: 11.8,
orderCount: 13.3
},
{
Region: 'Midwest',
totalSpending: 98,
avgOrderValue: 12.2,
orderCount: 8.0
},
{
Region: 'West',
totalSpending: 87,
avgOrderValue: 11.5,
orderCount: 7.6
},
{
Region: 'Northeast',
totalSpending: 69,
avgOrderValue: 11.2,
orderCount: 6.2
}
]
viewof chartView = Inputs.radio(["totalSpending", "avgOrderValue", "orderCount"], {
label: "View",
value: "totalSpending"
})
chart = Plot.plot({
marginLeft: 60,
height: 400,
y: {
label: chartView === "totalSpending" ? "Total Spending (Millions $)" :
chartView === "avgOrderValue" ? "Avg Order Value ($)" :
"Order Count (Millions)",
grid: true
},
marks: [
Plot.barY(regionData, {
x: "Region",
y: chartView,
fill: "#2E86C1",
tip: true
})
]
})
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.
