Public
Edited
Jun 4, 2023
2 forks
Importers
32 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 EarthCloud ContoursCountries by AreaVector fieldRaster & vectorVector tilesHexbin mapAntimeridian CuttingWorld AirportsWorld Airports DelaunayWorld airports Voronoiprojection.reflectXTesting projection visibilityNon-contiguous cartogramVersor ZoomingThree-Axis RotationOrthographic 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
Context to Curve
Also listed in…
d3-shape
<svg viewBox="0 0 ${width} ${height}" fill="none">
<path stroke="red" stroke-width="0.5" d="${d3.geoPath()(object)}"></path>
<path stroke="black" d="${geoCurvePath(d3.curveCatmullRomClosed)(object)}"></path>
</svg>
{
const context = DOM.context2d(width, height);
context.beginPath();
d3.geoPath(null, context)(object);
context.lineWidth = 0.5;
context.strokeStyle = "red";
context.stroke();
context.beginPath();
geoCurvePath(d3.curveCatmullRomClosed, null, context)(object);
context.lineWidth = 1.0;
context.strokeStyle = "black";
context.stroke();
context.canvas.style.display = "block";
context.canvas.style.margin = "auto";
return context.canvas;
}
function geoCurvePath(curve, projection, context) {
return object => {
const pathContext = context === undefined ? d3.path() : context;
d3.geoPath(projection, curveContext(curve(pathContext)))(object);
return context === undefined ? pathContext + "" : undefined;
};
}
function curveContext(curve) {
return {
moveTo(x, y) {
curve.lineStart();
curve.point(x, y);
},
lineTo(x, y) {
curve.point(x, y);
},
closePath() {
curve.lineEnd();
}
};
}
topology = FileAttachment("nation-albers.json").json()
object = topojson.feature(topology, topology.objects.nation)
width = 975
height = 610
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.
