Canvas+SVG hover stroke effect

100%

Canvas+SVG hover stroke effect

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 21, 2017

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.

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

83% 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

81% 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

79% match

Loading thumbnail…

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.

LLuisSevillano

79% 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

76% match

Loading thumbnail…

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.

LLuisSevillano

74% match

Loading thumbnail…

Simple canvas map

A simple canvas map displays unemployment rates across the municipalities of a Spanish island using a threshold color scale. The visualization loads a TopoJSON file with `d3.json` and renders directly to a canvas element via `d3.geoPath`, iterating through each municipality to fill its polygon with color based on the unemployment value. White dashed lines stroke municipal boundaries, while a solid line outlines the island. The project is part of a QGIS and d3 workshop by LuisSevillano.

LLuisSevillano

71% match

Loading thumbnail…

New composite border in es-atlas

This example shows a map of Spanish municipal boundaries rendered with D3.js. It uses a composite border for the Canary Islands, a cartographic convention, alongside the standard municipal outlines. The code loads a TopoJSON file and applies a geographic identity projection with `d3.geoPath` to draw the shapes. It uses `topojson.feature` to extract the border and composite border objects, and the `d3-composite-projections` library to support the projection, resulting in an SVG visualization.

LLuisSevillano

70% match