Software Engineer at Development Seed
Public
Edited
Jul 15, 2023
cars
viewof table = Inputs.table(cars)
brandedCars = cars.map((car) => ({ ...car, brand: car.name.split(" ")[0] }))
viewof brandstable = Inputs.table(brandedCars)
Plot.plot({
marks: [
Plot.ruleY([20], { stroke: "red" }),
Plot.dot(brandedCars, {
x: "year",
y: "economy (mpg)",
fill: "brand",
title: "name",
r: "weight (lb)"
})
],
color: {
legend: true
}
})
olympians
olScore = olympians.map((o) => ({
...o,
score: o.gold * 5 + o.silver * 3 + o.bronze * 1
}))
viewof olympiansTable = Inputs.table(olScore)
Plot.plot({
marks: [
Plot.dot(
olScore.filter((o) => !o.score),
{
x: "height",
y: "sport",
fill: "sex",
title: "name"
}
)
]
})
aapl
Plot.plot({
marks: [
Plot.lineY(industries, {
x: "date",
y: "unemployed",
z: "industry",
stroke: "industry",
title: "industry"
})
]
})
Plot.plot({
marks: [
Plot.barX(
olympians,
Plot.groupY(
{ x: ("count"), title: "count" },
{ y: "nationality", sort: { y: "x", reverse: true, limit: 20 } }
)
),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.dot(olympians, Plot.dodgeY({ x: "weight", stroke: "steelblue", r: 1 }))
],
x: { label: "weight (kg)" },
width,
height: 1200
})
viewof numBins = Inputs.range([1, 100], { label: "Number of bins", step: 1 })
Plot.plot({
marks: [
Plot.rectY(
olympians,
Plot.binX(
{ y: "count" },
{ x: "weight", thresholds: numBins, fill: "#333" }
)
),
Plot.ruleY([0])
],
width,
height: 300
})
Plot.plot({
facet: { data: olympians, y: "sport", marginLeft: 150 },
marks: [
Plot.frame({ stroke: "#ddd", strokeWidth: 0.5 }),
Plot.dot(olympians, { x: "weight", y: "sex", fill: "sex", r: 1 })
],
height: 600,
marginTop: 0,
x: { inset: 10, grid: true, label: "weight (kg)" },
y: { axis: null, inset: 3 },
color: { legend: 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.
