RBush+canvas+svg

100%

RBush+canvas+svg

✓ Published0🌍 Public

Last edited Sep 20, 2017

Created on May 11, 2017

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.

AI-generated description

This canvas map use rbush to create a R-tree-based 2D spatial index for a best hover effect performance.

The idea is to create a canvas basemap where a svg path appears to create the hover effect.

Spain has more than 8120 municipalities (features) so it's a great scenario to test this idea. Thanks to rbush its not necessary to iterate along the whole feature set to extract the feature where user is hovering.

Inspiration implementation comes from spamjs. Data from ElConfidencial.com

Similar vizzes

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

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

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

74% match

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

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

72% match

Loading thumbnail…

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.

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

71% match