Skip to main content
SimilarExport ZIP
100%

Fork of GeoVisualization - Choropleth map of the world

✓ Published0🌍 Public
PPedram
Last edited Jan 11, 2023
Created on Jan 11, 2023

This example displays a choropleth map of the world, rendering country boundaries as gray paths on an SVG. When the user hovers over a country, its fill changes to red, and it reverts to gray on mouseout. The code loads GeoJSON data from a GitHub repository using `d3.json` and applies the `d3.geoEqualEarth` projection with `projection.fitExtent` to fit the map to the viewport. It uses `d3.geoPath` to generate the path data for each feature, with the SVG sized dynamically based on the window dimensions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This example shows a choropleth map of the world coloring each country by population, with a blue threshold color scale. It uses `d3.geoPath` and `d3.geoMercator` to project and draw country boundaries from a GeoJSON file, while population data is loaded from a CSV and mapped by country code. Mouseover transitions dim all countries except the hovered one, which gains a black stroke. The visualization is built with D3 v6 and rendered as SVG, using `d3.scaleThreshold` and `d3.schemeBlues[7]` for the color encoding.

EEjenavi16
89% match
Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This visualization presents an orthographic choropleth map of the world, coloring each country by its population using a threshold scale with sequential blue shades. The code loads GeoJSON country boundaries and CSV population data via `d3.json` and `d3.csv`, projecting them with `d3.geoOrthographic` and rendering paths through `d3.geoPath`. Hover interactions trigger opacity transitions and stroke highlights on the SVG countries, while all elements are drawn with D3 v6 in a React environment.

KKetaki789
88% match
Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This choropleth map of the world visualizes population by country using a threshold color scale, with dark blue representing higher populations. The map renders in SVG and responds to mouse-over and mouse-leave events by adjusting the opacity of all countries and highlighting the hovered one with a black stroke. The code loads GeoJSON boundaries and CSV population data via `Promise.all`, projects the paths using `d3.geoPath` with a Mercator projection, and colors each country through `d3.scaleThreshold` and `d3.schemeBlues`. Interactions are handled with D3 transitions for smooth visual feedback.

YYerlan Yeszhanov
85% match
Loading thumbnail…

GeoVisualization - Choropleth map of the world

This example presents a choropleth map of the world, coloring each country according to its population using a threshold color scale with sequential blues. The visualization uses D3.js (v6) to load GeoJSON and CSV data, projecting the map with a Mercator projection via `d3.geoMercator` and drawing paths with `d3.geoPath`. Interactivity highlights countries on mouseover by adjusting opacity and stroke, while the SVG rendering displays the result.

AAlark Joshi
85% match
Loading thumbnail…

Fork of Fork of Fork of Map with D3 geoEquirectangular()

This example displays a world map rendered with the equirectangular projection, showing country boundaries as styled SVG paths. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The visualization uses D3 v5’s `geoPath` and `geoEquirectangular` to generate the map, with countries filled in a light beige and outlined with a dark stroke. The code demonstrates basic data fetching, projection setup, and DOM manipulation through D3 selections.

CChawin Sungwalngern
85% match
Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries, rendered as an SVG using React and D3 v5. It uses the `d3.geoEqualEarth` projection and `d3.geoPath` to draw the sphere, graticules, landmasses, and country interiors, with geospatial data sourced from a GeoJSON file. The visualization is styled with distinct fill and stroke colors, applying a clean, polished aesthetic while the map loads asynchronously via the `json` function from D3.

JJumblii
84% match
Loading thumbnail…

Fork of Fork of World Map Simple

This example displays a world map rendered as SVG paths, with countries drawn as filled shapes with white borders, a graticule of latitude and longitude lines, and an outline around the map’s edge. It uses d3-geo’s `geoNaturalEarth1` projection and `geoPath` to draw the map, and the country boundaries come from a TopoJSON file fetched from a GitHub gist, which is converted to GeoJSON features using `topojson-client`. The interface is built with React and D3, loading data asynchronously and rendering the map once the data arrives.

Ssnehareddygurram
83% match
Loading thumbnail…

Fork of React Starter

A choropleth map of world countries colors each nation by continent using a D3 geo path generator and a color scale. The visualization renders as an SVG globe inside a React component built with React hooks, fetching geographic data from the World Atlas TopoJSON and TSV files. Hovering reveals country names and indices appended as SVG title elements, while a transparent sphere outline frames the map. The code leverages d3.json, d3.tsv, and d3.geoPath to construct the projection and interactivity.

IIgor Bojković
83% match