Path stroke with selection.raise()

100%

Path stroke with selection.raise()

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 21, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Path stroke with moveToFront

This choropleth map of Spanish municipalities encodes population density using a threshold color scale, with nine discrete steps from light to dark blue. The path stroke effect is created by applying a `moveToFront` method to the SVG elements on mouseover, which reorders the selected municipality to the top of the drawing stack, while a thicker black stroke highlights it. The code uses `d3.geoPath` with a `d3.geoConicConformalSpain` projection to render the map, and it aggregates data from a CSV file, mapping each municipality's rate to a color via `d3.scaleThreshold`. The map is rendered as SVG, with the region outline drawn separately and municipalities filled according to the data.

LLuisSevillano

86% match

Loading thumbnail…

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.

LLuisSevillano

79% match

Loading thumbnail…

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.

LLuisSevillano

73% match

Loading thumbnail…

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.

LLuisSevillano

72% match

Loading thumbnail…

Rivers of Spain

A choropleth of Spain's river network, drawn from Ministerio para la Transición Ecológica data, uses a custom power-law width scale to encode river order (from 1 to 14) as tapered line strokes. The code renders vector features via `topojson-client` and `d3-geo`’s `geoIdentity` and `geoPath` onto a Canvas surface, then exports the result to a static PNG. The border is stroked separately in a contrasting dark teal, while river lines use a near-black stroke.

LLuisSevillano

68% match

Loading thumbnail…

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.

LLuisSevillano

67% match

Loading thumbnail…

map-other-density

This example displays a choropleth map of eight blocks in Palghar district, India, using SVG paths rendered via `d3.geoPath` with a `geoMercator` projection. The map shows the percentage of stunted children per block, with fill patterns generated using the textures library and a slider to adjust classification thresholds. A tooltip appears on mouseover, and zooming is enabled through `d3.zoom`. Data is loaded from a CSV file and joined to GeoJSON features.

Zzoniyac

67% match

Loading thumbnail…

mapa aragon

A choropleth map of Aragón colors each province by its share of the region’s 2021 population, using a green sequential scale derived from `d3.schemeGreens`. Hovering a province reveals its exact percentage in a tooltip. The visualization loads GeoJSON boundaries and a CSV dataset via `fetch` and `d3.csv`, then renders paths with `d3.geoPath` and a `geoMercator` projection. Interactive pan and zoom are enabled through `d3.zoom`, while a legend built with `scaleOrdinal` summarizes the color ranges.

AAleOG

66% match