Path stroke with moveToFront

Path stroke with selection.raise()

A choropleth map of Zaragoza municipalities colors each district by population density using a threshold color scale, while a thin white stroke separates the polygons. On mouseover, the selected path receives a thicker black stroke and is brought to the front via `selection.raise()`, emphasizing its boundary against neighbors. The map is rendered with SVG and `d3.geoPath`, using TopoJSON for boundaries and CSV data for rates, projected with `d3.geoConicConformalSpain` from d3-composite-projections.

86% match

Canvas+SVG hover stroke effect

This choropleth map of Spanish municipalities uses a dual-rendering strategy: SVG paths provide hover interaction while a Canvas context draws the color-coded population density fills. The map layers transparent SVG municipality outlines over the Canvas raster, which uses a threshold color scale to visualize population rates. When a user hovers over an SVG path, its stroke becomes visible, creating a highlight effect. The example utilizes `d3.geoPath` and `d3.scaleThreshold` to generate both the vector outlines and the Canvas-rendered fills.

83% match

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.

79% match

RBush+canvas+svg

A choropleth map of Spanish municipalities colors each region by population variation, using a canvas basemap for the filled polygons and an SVG overlay for a hover outline. The code builds an R-tree spatial index with `rbush` to quickly identify the municipality under the cursor, then renders a highlighted `d3.geoPath` in SVG. It uses `d3-geo` with the `geoConicConformalSpain` projection and `topojson-client` to load boundaries, with tooltip data from a companion JSON file.

74% 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.

Fork of Let's make a map with D3.js!

This choropleth map of Spain overlays bubble markers on each province to compare COVID-19 cases and vaccination rates. Circle size encodes case counts via `d3.scaleSqrt`, while fill color uses `d3.scaleSequential` with `d3.interpolateRdYlBu` for vaccination percentages. The map is rendered with `d3.geoMercator` and `d3.geoPath` from TopoJSON data, with interactive tooltips and legend components built from `d3.csv` data and custom SVG groups.

Mmartajimpac

Fork of Fork of Let's make a map with D3.js!

A choropleth map of Spain displays COVID-19 cases as proportional circles and vaccination percentages via a sequential YlOrRd color scale, with hover tooltips revealing province names. Using d3.csv and d3.json, the visualization merges external COVID data with TopoJSON geographic boundaries from es-atlas. d3.geoMercator projects the map, while d3.geoPath draws province paths, and d3.scaleSqrt sizes circles based on case counts. The d3.scaleSequential color scale encodes vaccination rates, with interactive hover effects changing province fill colors.

Mmartajimpac

mouseover constant stroke effect

This example shows a choropleth map of U.S. unemployment rates by county, where hovering over a county triggers a constant, dark stroke outline that highlights the selected area. The map uses D3.js and its `d3.json` and `d3.tsv` loaders to fetch TopoJSON geographic data and tab-separated rate values, which are then mapped to a color scale. On mouseover, jQuery clones the path element and applies a fixed `stroke` and `stroke-width` to create the highlight effect.