D3 contours and Plot spatial interpolatorsPie chart with radialGradientCoahuilagraph (user support)Derive and filter in arqueroSUM(ROUND()) doesn't like NaNParquet files directly from GitHubAggregating dataDuckDB and bigintAdd a class to an observable inputA button to download a FileAttachmentCreate an average line in PlotA centered titleCatches sites
Project and clip
projectedEurope = d3.geoProject(
world,
d3
.geoAzimuthalEqualArea()
.rotate([-10, -50])
.fitSize([200, 120], {
type: "MultiPoint",
coordinates: [
[-10, 32],
[60, 61]
]
})
.clipExtent([
[0, 0],
[200, 120]
])
)
{
const height = (width * 0.6) | 0;
const context = DOM.context2d(width, height);
// since the shape is now in projected coordinates, we just need to adjust it to the viewport
// with a scale+translate projection — this is why we use d3.geoIdentity.
const projection = d3.geoIdentity().fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
projectedEurope
);
const path = d3.geoPath().projection(projection).context(context);
context.beginPath();
path(projectedEurope);
context.fillStyle = "#eee";
context.fill();
context.stroke();
return context.canvas;
}
d3 = require("d3-geo-projection@4", "d3-geo@3")
world = fetch(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
).then((d) => d.json())
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.
