Published
Edited
Jul 4, 2022
5 forks
Importers
19 stars
Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicOceansWinding orderOrthographic shadingSolar TerminatorU.S. airports VoronoiStar mapSolar pathRaster tilesThreshold ChoroplethMapbox Vector TilesRaster Tiles (Canvas)Raster & vector IIClipped map tilesGraticule labels (stereographic)Sketchy EarthCountries by AreaVector fieldRaster & vectorVector tilesHexbin mapAntimeridian CuttingWorld AirportsWorld Airports DelaunayWorld airports Voronoiprojection.reflectXTesting projection visibilityNon-contiguous cartogramVersor ZoomingThree-Axis RotationContext to CurveOrthographic to equirectangularU.S. Map with Puerto RicoProjection TransitionsZoom to bounding boxZoomable Raster & VectorWorld Map (SVG)Web Mercator tilesU.S. Map (Canvas)Bivariate choroplethTissot’s indicatrixProjection comparisonCassiniWorld tourU.S. State CapitalsWorld map (canvas)U.S. MapConic Equal-AreaTransverse MercatorVersor draggingStereographicGnomonicOrthographicMercatorAzimuthal Equal-AreaAzimuthal EquidistantEquirectangularConic ConformalTobler–MercatorConic EquidistantNatural EarthEqual EarthOrthographic (SVG)Quantile Choropleth
Cloud Contours
Also listed in…
d3-contour
canvas = {
const context = DOM.context2d(width, height);
const projection = d3.geoIdentity().scale(width / n);
const path = d3.geoPath(projection, context);
context.lineWidth = 2;
context.lineJoin = "round";
context.strokeStyle = "magenta";
for (let t = 0, T = 240; true; t = (t + 1) % T) {
context.drawImage(image, 0, 0, width, height);
context.beginPath();
path(contours.contour(values, t / T));
context.stroke();
yield context.canvas;
}
}
contours = d3.contours().size([n, m])
m = image.naturalHeight
n = image.naturalWidth
values = {
const canvas = document.createElement("canvas");
canvas.width = n;
canvas.height = m;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
const data = context.getImageData(0, 0, n, m);
const values = new Float64Array(n * m);
for (let j = 0, k = 0; j < m; ++j) {
for (let i = 0; i < n; ++i, ++k) {
values[k] = data.data[k << 2] / 255;
}
}
return d3.blur2({data: values, width: n}, 3).data;
}
image = Object.assign(await FileAttachment("cloud-fraction.png").image(), {style: "max-height: 33px; display: block;"})
height = Math.ceil(width / 2)
d3 = require("d3@7.6.0/dist/d3.min.js") // d3.blur was introduced in d3-array@3.2 and d3@7.6
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.
