Rivers of Spain

100%

Rivers of Spain

✓ Published0🌍 Public

Last edited May 23, 2019

Created on May 23, 2019

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.

AI-generated description

Simplified Rivers of Spain. Data from Ministerio para la Transición Ecológica .

MIT Licensed

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

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

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

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

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

70% match

Loading thumbnail…

Map of Spain

This visualization displays a map of Spain using D3.js version 5. It loads world country geometries in TopoJSON format from the world-atlas package and extracts the feature for Spain. The code applies a geoMercator projection fitted to a 960×500 pixel viewport, then renders the country outline as a single SVG path using d3.geoPath. The map appears without additional styling, showing only the vector boundary of the Spanish territory.

RRamya19-hub

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

68% match

Loading thumbnail…

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.

LLuisSevillano

67% match