shaded relief with custom projection

d3-composite-projections test

This example demonstrates an interactive map of Spain’s autonomous regions using the d3-composite-projections library to combine separate projections into a single visualization. It loads preprojected TopoJSON data from the es-atlas package and renders boundaries with `d3.geoPath`, while a dashed brown overlay marks the composite projection’s internal borders. As the user moves the mouse, the code uses `projection.invert` to display geographic coordinates and appends fading circles at each cursor position, using SVG transitions to shrink them. Points outside the valid projection area trigger an error message instead of drawing.

73% match

spanish provinces

A choropleth-style map of Spanish provinces rendered on a canvas, colored with a light yellow fill and gray borders, plus a dashed line marking the boundary between the Iberian Peninsula and the Canary Islands. The visualization uses a composite conic conformal projection handled by the custom `d3.geo.conicConformalSpain` function, with TopoJSON data presimplified via `topojson.presimplify`. It leverages `StaticCanvasMap` from the spam library to manage partial rendering and efficient spatial indexing through RBush. Boundaries are stroked with `CanvasRenderingContext2D`, and an interactive hover state is prepared for future mouse tracking.

71% match

Albers Projection

This example displays a map of the United States using the Albers projection, a conic equal-area projection commonly used for national-scale choropleths. It renders the geographic boundaries as gray SVG paths with white strokes, loaded from a local `states.json` GeoJSON file. The code uses the D3 v3 library, specifically the `d3.geo.albers()` projection and `d3.geo.path()` to project and draw the feature collection.

71% match

Preprojected TopoJSON

This example shows the autonomous regions of Spain displayed as a preprojected TopoJSON topology. The map is rendered using the `d3.geoPath` function to draw the polygon and MultiPolygon geometries, with shared arcs efficiently referenced between regions to form the composite border. The code loads the TopoJSON file with a `transform` and `scale` property, indicating the data is preprojected into planar coordinates. The visualization uses the D3.js library to parse and render the topology, demonstrating how complex boundary data can be compactly encoded and reproduced without a full geographic projection system.

71% match

AlbersUSA + PR

This example presents a modified Albers USA map projection that includes Puerto Rico, rendered as an SVG using D3.js v3 and TopoJSON. The code defines a custom `albersUsaPr()` function, which composes four separate conic equal-area projections for the lower 48 states, Alaska, Hawaii, and Puerto Rico, each with its own translation and clipping. The map displays graticules and a sphere outline via `d3.geo.graticule()` and `d3.geo.path()`, and it loads US state boundaries from an external JSON file. Interactive mouse movement logs the projected coordinates using `projection.invert()`.

Spanish municipalities choropleth test with Canvas and preprojected TopoJSON

A choropleth map of Spanish municipalities colors each region by population density using a threshold color scale. The visualization renders on a Canvas via `d3.geoPath`, reading preprojected TopoJSON geometry and joining it to CSV population data by municipality ID. A national border is stroked afterward for context. The map uses a forked `d3-geo-projection` pipeline to streamline drawing performance.

Custom Projection

This example displays a map of California counties and their boundaries, rendered with a custom 2D affine transform instead of a standard geographic projection. The `d3.geoPath` and `d3.geoTransform` APIs apply a matrix operation that flips the y-axis, allowing pre-projected TopoJSON data to be correctly positioned within the SVG viewport. The map uses gray fills and strokes, with counties and boundary lines drawn as separate SVG paths.

Albers Projection

This example displays a map of the United States using the Albers projection, with each state drawn as a filled gray polygon with white outlines. The visualization loads GeoJSON data from a remote `us.json` file via `d3.json`, which is then converted into SVG paths using `topojson.feature` and `d3.geo.path()`. The map is rendered as a single SVG path element within a 960×500 canvas, demonstrating a basic static choropleth without additional interactivity or styling layers.