conicConformalSpain example

100%

conicConformalSpain example

✓ Published0🌍 Public

Last edited Sep 23, 2016

Created on Jan 17, 2023

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.

AI-generated description

This file shows how to use the geoConicConformalSpain projection from d3-composite-projections.

To change the file, edit draw.js and run

browserify draw.js| uglifyjs > bundle.js

The dependencies are installed with:

npm install d3-composite-projections d3-geo d3-request d3-selection d3-transition topojson

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

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

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

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

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

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

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

73% match

Loading thumbnail…

conic world tour

The visualization "Conic World Tour" uses D3.js (v4) to animate a rotating globe composed of conic geographic projections. It alternates between several conic projections—such as conic conformal, conic equal-area, and conic equidistant—while smoothly transitioning the globe’s rotation. Country boundaries are drawn as SVG paths over a canvas-rendered graticule, with the active country highlighted in a bright color as the tour cycles through each nation in sequence, labeling it by name. The animation continuously shifts the projection parameters to create a morphing, globe-like effect.

11wheel

72% match