Spain

100%

✓ Published0🌍 Public

Last edited Apr 18, 2017

Created on Mar 9, 2017

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.

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>

mit Licensed

Similar vizzes

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

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

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

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

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

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

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

75% match

Loading thumbnail…

Choropleth of spanish cities by population

This choropleth maps Spanish provinces by their share of the national population, using a blue sequential color scale with a horizontal legend. The visualization is built with D3 v3 and TopoJSON, loading province boundaries and population data from a TSV file. Province polygons are colored via a quantized scale based on population percentage, and hovering over a region displays a tooltip with the province name. Major cities are marked with red dots and labeled with their names. The map uses a Mercator projection and includes subtle dashed boundaries between provinces.

Aackuser

75% match