Gist a5c5c4084afdd5eb9eb543491c2a3880

100%

Gist a5c5c4084afdd5eb9eb543491c2a3880

✓ Published0🌍 Public

Last edited May 8, 2016

Created on May 8, 2016

This interactive map of Spain highlights its autonomous communities, rendered as SVG paths using a Mercator projection. Clicking a region smoothly zooms and centers it, turning it blue to indicate selection, while clicking the background resets the view. The map also supports free pan and zoom via D3’s zoom behavior, with stroke widths adjusting dynamically, and uses TopoJSON data for the region boundaries.

AI-generated description

Similar vizzes

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

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

79% match

Loading thumbnail…

Spain

This visualization uses a modified conic conformal projection to display Spain’s provinces, repositioning the Canary Islands next to the Iberian Peninsula for easier data analysis. Built with D3 v4 and TopoJSON, it renders provincial boundaries as SVG paths with white strokes over dark land areas. The projection, adapted from the d3-composite-projections library, adjusts the Canary Islands’ location while preserving the conformal properties of the map.

Aale0xB

79% match

Loading thumbnail…

conicConformalSpain example

This example uses the geoConicConformalSpain composite projection from d3-composite-projections to render an interactive map of Spain's provinces from TopoJSON data. The SVG visualization displays each province as a light green polygon with thin black strokes, and includes a red outline showing the composition borders where the projection joins the Canary Islands and the mainland. Hovering over a province triggers a smooth transition to red, and moving the mouse away transitions it back to the original color, demonstrating animated interactivity with d3-transition.

Aackuser

77% match

Loading thumbnail…

Map of Spain

This example displays a map of Spain, projected using a Mercator projection and rendered as a single SVG path element. It loads world country boundaries from a TopoJSON file hosted on jsDelivr, then extracts Spain’s geometry using `topojson.feature`. The code uses `d3.geoMercator()` with `fitSize` to scale and center the map, and `d3.geoPath()` to generate the SVG path data. It demonstrates loading external GeoJSON/TopoJSON data asynchronously with `d3.json` and appending the result to an SVG canvas.

OOluoch Odhiambo

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

76% match

Loading thumbnail…

Spain Modified Hit Area

This visualization presents a modified conic conformal projection of Spain that relocates the Canary Islands next to the Iberian Peninsula, making it easier to work with Spanish geographic data. The map renders land areas in dark gray with white county and state boundaries, and includes an interactive tooltip that appears on hover. Built with d3.v4 and the d3-composite-projections library, the example uses SVG and animation to display the adjusted projection, which is based on a fork of rveciana's conicConformalSpain block.

Aale0xB

74% match

Loading thumbnail…

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

74% match