The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Sep 24, 2024
3 stars
sparkline = (type) =>
Plot.plot({
style: {
display: "inline-block",
marginBottom: -1,
overflow: "visible",
zIndex: 2,
position: "relative"
},
x: { axis: null },
y: { axis: null },
width: 50,
height: 15,
margin: 1,
marks: [
Plot.areaY(electricity, { x: "date", y: type, fillOpacity: 0.1 }),
Plot.lineY(electricity, { x: "date", y: type, tip: true })
]
})
sparkheat = (type) =>
Plot.plot({
style: {
display: "inline-block",
marginBottom: -1,
overflow: "visible",
zIndex: 2,
position: "relative"
},
width: 150,
height: 16,
margin: 0,
x: { axis: null },
color: {
scheme: "BuYlRd",
domain: [0.5, 2],
type: "log"
},
marks: [
Plot.barX(
electricity,
Plot.map(
{ fill: Plot.normalize("median") },
{
x: "date",
interval: "month",
fill: type,
z: null,
inset: 0,
tip: { channels: { [type]: type } }
}
)
)
]
})
sparkbar = (type) =>
Plot.plot({
style: {
display: "inline-block",
marginBottom: -1,
overflow: "visible",
zIndex: 2,
position: "relative"
},
width: 72,
height: 16,
margin: 0,
x: { interval: "month", axis: null },
y: { axis: null },
round: true,
marks: [Plot.barY(electricity, { x: "date", y: type, insetLeft: 0.25, tip: true })]
})
us-electricity-generation.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
