Samagoue

Zoomable Choropleth

A zoomable choropleth of U.S. unemployment rates by state and county. Clicking a state zooms the map to that state, revealing county-level data with smooth animated transitions; clicking a county returns the view to the full country. Built with D3 v4, it uses `d3.geoPath` with an Albers projection, `projection.fitExtent` for zooming, and `transition` for animations. A threshold color scale encodes unemployment values from BLS data, and county shapes are rendered as SVG paths.

COTE D'IVOIRE

This visualization displays administrative boundaries of Côte d'Ivoire, including districts, regions, departments, and sous-prefectures, with hover effects that highlight districts in red and sous-prefectures in yellow. It uses d3.v4 and TopoJSON, loading the gadm36_CIV.json file to render geographic features via d3.geoPath with a Mercator projection. The code draws district polygons and overlays mesh borders for regional, departmental, and sous-prefecture divisions, all rendered as SVG elements.

COTE D'IVOIRE

This map of Côte d'Ivoire shows administrative boundaries, with districts, regions, and departments outlined in white and sous-prefectures in finer detail. Hovering over a district turns it red, while hovering over a sous-prefecture turns it yellow. The visualization uses a TopoJSON file (`gadm36_CIV.json`) and the D3.js libraries `d3.geoMercator` and `d3.geoPath` to render the geographic features as SVG paths. It also employs the `topojson` API to extract district features and meshes for border drawing.

fresh block

This example displays administrative districts of Côte d'Ivoire as red-outlined SVG paths on a gray fill, rendered via a Mercator projection. The code loads GeoJSON topology from a local file using d3.json and converts it to GeoJSON features with topojson.feature, then draws each district with d3.geoPath. District boundaries are separated using topojson.mesh, and hover interactions are prepared through a tooltip div, though no click or color-change behavior is active in the visible code. The visualization relies on D3 v5 and topojson.v2.

Zoomable Choropleth to be gutted

This zoomable choropleth of U.S. county unemployment rates shows state-level data that animates to a county-level view when a state is clicked, with the option to zoom back out by clicking a county. Built with D3.js v4, it uses the `d3.geoAlbers` projection, `d3.geoPath`, and `projection.fitExtent()` to smoothly transition the map. The colors encode unemployment data from the BLS, and the code also sets `projection.precision(0)` to prevent interpolation issues during zoom animations.

DRC With Provinces

This example displays a map of the Democratic Republic of Congo, highlighting provincial boundaries with black strokes and internal territory divisions in gray. Using a Mercator projection, the visualization renders geographic features from a TopoJSON file containing separate layers for provinces, territories, and the national border. The code applies `d3.geoPath` and `topojson.mesh` to draw the hierarchical administrative boundaries, with distinct styling for each level from the COD_TOPO.json data source.

fresh block

A map of the Democratic Republic of the Congo displays internal administrative boundaries and the national outline. It shows province borders and territory-level divisions, rendered as distinct stroke layers. The visualization uses the D3 v4 library with the `d3.geoPath` projection to draw SVG elements from TopoJSON data loaded from a local file. Territory boundaries are differentiated from province boundaries using a `topojson.mesh` function with a filtering criterion based on territory ID prefixes.

Zoomable US States

Clicking a state zooms the map in to reveal its counties, which are colored by employment location quotient from the Bureau of Labor Statistics' QCEW survey. The darker the fill, the higher the quotient. The zoom and county transitions are handled with D3 v3 transitions, while map geometry from a TopoJSON file is drawn using `d3.geo.path` with a Mercator projection.

Zoomable US States

A choropleth map of US states and counties uses employment location quotients from the Bureau of Labor Statistics' QCEW survey to shade each county. Clicking a state triggers a zoom animation that reveals its counties, applying a square-root color scale to the data. The visualization is built with D3 v3, using `d3.geo.Mercator`, `d3.geo.path`, and TopoJSON to render state boundaries and county polygons as SVG.

US 2012 elections by zipcode

This interactive map shows the 2012 US presidential election results by county, visualized as a zoomable choropleth. The color of each county path reflects the difference between Democratic and Republican vote percentages, ranging from blue to red. Users can hover over counties to see details and click to zoom. Built with D3 v4, the visualization uses `d3.geoPath` and a custom `d3.zoom` handler to render topojson county boundaries. Election data is sourced from The Guardian.

Text tween