The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Oct 12, 2023
Importers
4 stars
Plot.plot({
marks: [
Plot.line(sftemp.slice(-90, -10), {
x: "date",
y: "high",
stroke: "red",
marker: (color) => htl.svg`<marker
viewBox="-4 -4 8 8"
style="overflow: visible; fill-opacity: 0.2;"
><ellipse rx=20 ry=8 stroke="${color}" fill="${color}">`
}),
]
})
tick = (size = 5) =>
(color) =>
htl.svg`<marker
viewBox="${-size} ${-size} ${2 * size} ${2 * size}"
markerWidth=${2 * size}
markerHeight=${2 * size}
stroke-linecap=square
orient=auto
stroke=${
"red" // Using "red" for visibility, normally you would use color, as above
}
><line y1=${-size} y2=${size}>`
Plot.plot({
inset: 10,
marks: [
Plot.line(sftemp.slice(-90, -10), {
x: "date",
y: "high",
stroke: "currentColor",
markerEnd: tick(5)
})
]
})
Plot.plot({
inset: 20,
marks: [
Plot.line(d3.range(0, 2*Math.PI, 0.05), {
x: Math.sin,
y: d => Math.cos(3*d),
curve: "basis-closed",
stroke: "currentColor",
marker: tick(5)
})
]
})
sftemp = FileAttachment("sf-temperatures.csv").csv({typed: 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.
