Skip to main content
100%

Spain Modified Hit Area

✓ Published0🌍 Public
Aale0xB
Last edited Apr 19, 2017
Created on Apr 19, 2017

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.

AI-generated description

A modified conic conformal projection that shows the Canary Islands next to the Iberian Peninsula so working with data in Spain becomes easier.

forked from <a href='http://bl.ocks.org/rveciana/'>rveciana</a>'s block: <a href='http://bl.ocks.org/rveciana/58937a0e85ba5419c230'>conicConformalSpain</a>

forked from <a href='http://bl.ocks.org/ale0xb/'>ale0xb</a>'s block: <a href='http://bl.ocks.org/ale0xb/90c91fe1d5f3171352ec88122b775d19'>Spain</a>

mit Licensed

Similar vizzes

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
89% 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
82% 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
79% 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
74% 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
74% match
Loading thumbnail…

Gist a5c5c4084afdd5eb9eb543491c2a3880

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.

Aackuser
74% match
Loading thumbnail…

satellite projection

A satellite projection shows Earth as seen from an orbiting spacecraft, with the Iberian Peninsula centered on a curved horizon. The map layers Spanish coastline, provincial boundaries, and urban areas, rendered with a soft glow and a highlighted marker for Madrid. Built with D3.js and the `d3.geo.satellite` projection, the visualization uses canvas-based rendering for efficient drawing. Geographic data comes from Natural Earth, processed with TopoJSON, while a spatial index (RBush) accelerates feature lookup during rendering.

LLuisSevillano
71% match
Loading thumbnail…

mapa España

This interactive choropleth map of Spain displays the percentage of the population served by health sectors in Aragon for 2022, with colored regions representing value ranges and a legend for interpretation. The visualization uses D3 v5 with topojson to load geographic boundaries, applies a Mercator projection through `d3.geoMercator` and `d3.geoPath`, and renders the map as an SVG. Data is parsed from a CSV file hosted on GitHub, containing population counts per sector, which are converted into percentage values. The map includes animations and dynamic color scaling via `d3.scaleThreshold`, with interactivity for selecting regions.

AAleOG
69% match