The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
marks: [
Plot.dot(wb2010, { x: "gdp", y: "life_exp", fill: "gray"}),
Plot.dot(
wb2010,
Plot.pointer({
x: "gdp",
y: "life_exp",
fill: "red",
r: 8,
opacity: 0.6,
tip: true,
title: d => `${d.country_name}`
})
),
Plot.crosshair(wb2010, { x: "gdp", y: "life_exp", textFill: "red", textStroke: "white", strokeWidth: 3 })
],
x: {type: "log"},
margin: 50
})
Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
tip: true,
channels: {
Open: "Open"
}
}),
Plot.tip(
stocks,
Plot.selectMaxY({ x: "Date", y: "Close", stroke: "symbol", anchor: "right", fill: "yellow"})
) // Static annotation!
],
color: { legend: true }
})
Plot.plot({
marks: [
Plot.dot(wb, {
filter: (d) => d.region == selectRegion && d.year <= pickYear,
x: "gdp",
y: "co2",
fill: "country_name",
r: "gdp",
opacity: d => d.year == pickYear ? 1 : 0.2
})
],
x: { type: "log" },
y: { type: "log" },
r: { range: [3, 20] }
})
plants
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof pickStates = Inputs.checkbox(plants.map(d => d.state).sort(), {label: "Select states to compare:", unique: true, value: ["Alabama", "Alaska", "Arizona"]})
viewof pickSource = Inputs.radio(plants.map(d => d.primary_source), {label: "Select primary source:", unique: true, value: "oil"})
Plot.plot({
marks: [
Plot.barX(
plants.filter(
(d) =>
pickStates.includes(d.state) && d.primary_source == pickSource
),
Plot.groupY(
{ x: "sum" },
{
x: "total_capacity",
y: "state",
fill: "primary_source",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
],
marginLeft: 100
})
Power_Plants.csv
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.
