The avatar for @recifs
recifs
Fil’s live coding experiments
Public
Edited
Nov 3, 2023
2 stars
1
Support
D3 contours and Plot spatial interpolators
Pie chart with radialGradientCoahuilagraph (user support)Derive and filter in arqueroSUM(ROUND()) doesn't like NaNParquet files directly from GitHubAggregating dataProject and clipDuckDB and bigintAdd a class to an observable inputA button to download a FileAttachmentCreate an average line in PlotA centered titleCatches sites
Also listed in…
Plot Support
Insert cell
Insert cell
Insert cell
ca55 = FileAttachment("ca55-south.csv").csv({ typed: true })
Insert cell
Insert cell
Plot.contour(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "MAG_IGRF90",
interpolate: "barycentric",
blur: 2
}).plot({
color: { type: "diverging" }
})
Insert cell
Insert cell
m = 200
Insert cell
n = 150
Insert cell
Insert cell
x = d3.scaleLinear(
d3.extent(ca55, (d) => d.LONGITUDE),
[0, m - 1]
)
Insert cell
X = ca55.map((d) => x(d.LONGITUDE))
Insert cell
y = d3.scaleLinear(
d3.extent(ca55, (d) => d.LATITUDE),
[n - 1, 0] // 🎃 reversed because latitude is pointing UP, and SVG is pointing down.
)
Insert cell
Y = ca55.map((d) => y(d.LATITUDE))
Insert cell
V = ca55.map((d) => d.MAG_IGRF90)
Insert cell
Insert cell
gridded = Plot.interpolatorBarycentric()(d3.range(V.length), m, n, X, Y, V)
Insert cell
Insert cell
Insert cell
blurred = d3.blur2({ width: m, height: n, data: gridded }, 1)
Insert cell
Insert cell
contoursg = d3.contours().size([m, n])(blurred.data)
Insert cell
Insert cell
contours = contoursg.map(({ coordinates, ...rest }) => ({
coordinates: coordinates.map((polygon) =>
polygon.map((ring) => ring.map((d) => [x.invert(d[0]), y.invert(d[1])]))
),
...rest
}))
Insert cell

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.
Learn more