The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Feb 21
2 stars
ca55 = FileAttachment("ca55-south.csv").csv({ typed: true })
color = irisChart.scale("color").apply
vapor = fetch(
"https://neo.gsfc.nasa.gov/servlet/RenderData?si=1845771&cs=rgb&format=CSV&width=360&height=180"
)
.then((d) => d.text())
.then((t) =>
d3
.csvParseRows(t)
.flat()
.map((d) => (d === "99999.0" ? null : +d))
)
Plot.raster(vapor, {
fill: Plot.identity,
width: 360,
height: 180,
x1: -180,
y1: 90,
x2: 180,
y2: -90
}).plot({
color: { scheme: "oranges", unknown: "red" }
})
Plot.raster(vapor, {
fill: vapor,
width: 360,
height: 180,
x1: -180,
y1: 90,
x2: 180,
y2: -90,
interpolate: "nearest",
clip: "sphere"
}).plot({
width: 600,
projection: "equal-earth",
color: { scheme: "oranges", unknown: "red" }
})
Plot.raster(vapor, {
fill: vapor,
width: 360,
height: 180,
x1: -180,
y1: 90,
x2: 180,
y2: -90,
interpolate: "barycentric",
clip: "sphere"
}).plot({
width: 600,
projection: "equal-earth",
color: { scheme: "blues" }
})
grid = [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, NaN, 1, 1, 1, 0, 1, 1, 1]
xy = ({ x: (d, i) => i % 5, y: (d, i) => (i / 5) | 0, fill: Plot.identity })
import { textcolor } from "@observablehq/text-color-annotations-in-markdown"
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.
