Skip to main content
SimilarExport ZIP
100%

Choropleth Map NU

✓ Published0🌍 Public
CCrossZeigler
Last edited May 19, 2023
Created on May 18, 2023
Forked from HTML Starter

A choropleth map displays the World Happiness Report 2019 scores of countries. The map uses a Robinson projection and colors each nation according to its happiness score using a sequential OrRd color scale. The visualization is built with D3 v4 and React, and renders as an SVG. The code uses `d3.geoPath`, `d3.geoRobinson`, and `d3.scaleThreshold` for the choropleth. It fetches GeoJSON and CSV data from GitHub. Interactive features include a tooltip and click-to-zoom animation using `d3.transition`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map NU

This choropleth map visualizes the World Happiness Report 2019, using a color scale to show each country's happiness score. Built with React and rendering to an SVG element, it uses the `d3.geoPath` API to draw country boundaries and a tooltip div to display the underlying data values. The map is centered within a styled container, with a legend and title above the visualization.

SSrividya Panchagnula
93% match
Loading thumbnail…

Happiness Choropleth Map

This choropleth map visualizes national happiness scores for 2017, with countries colored on a sequential yellow-orange-red scale based on their reported Happiness Score. The visualization uses a Natural Earth projection rendered as SVG, with country boundaries, graticules, and a sphere outline drawn via d3.geoPath. Data combines the World Happiness Report with ISO country codes, joined to TopoJSON world atlas geometries, and missing countries appear in gray. React manages the component state and rendering, while d3.scaleSequential and interpolateYlOrRd generate the color encoding.

SSrividya Panchagnula
86% match
Loading thumbnail…

Happiness Choropleth Map

A choropleth map displays national happiness scores for the year 2017, using a yellow-orange-red sequential color scale. Countries without data appear gray. The map is rendered with SVG using D3’s `geoNaturalEarth1` projection and `geoPath`, with graticules and country interiors drawn from TopoJSON world atlas data. Happiness values are loaded from a CSV and matched to countries via ISO codes. A D3 color legend with circles and labels explains the scale, built with React components.

CCrossZeigler
85% match
Loading thumbnail…

Happiness Choropleth Map

This choropleth map visualizes national happiness scores, with each country colored on a sequential blue scale from light to dark based on its reported score. The visualization uses a Mercator projection with graticules and country boundaries, rendering missing data in light gray. Built with React and D3 v5, the map employs `d3.geoMercator`, `d3.geoPath`, and `d3.geoGraticule` to draw the geographic features, while `d3.scaleSequential` with `d3.interpolatePuBu` maps scores to colors. Country codes are joined to happiness data from a CSV file, and geographic boundaries come from World Atlas TopoJSON.

Xxyang3672
85% match
Loading thumbnail…

Fork of Choropleth Map

A choropleth map visualizes national happiness scores by coloring countries according to their economy classification from the World Happiness Report CSV. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with color mapping through `d3.scaleOrdinal` and the spectral scheme. A custom legend component shows color categories, while zoom functionality is implemented with `d3.zoom`. Countries display tooltips with their name and economy type, and hover states change fill color to red.

Xxyang3672
78% match
Loading thumbnail…

Choropleth map

This choropleth map visualizes annual population growth rates by country for 2017, using a diverging color scale from indigo (negative growth) to white (no change) to dark green (positive growth). The visualization renders world country shapes using D3’s `geoEqualEarth` projection and `geoPath`, with graticule and sphere overlays. It loads World Bank data from a CSV and geospatial data from GeoJSON, and includes an interactive tooltip on hover plus a user-location marker via the Geolocation API.

Jjbruzzo
77% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global population data from the UN’s 2019 dataset, coloring each country according to its population value. The visualization uses D3’s geoMercator projection and geoPath to render country outlines from World Atlas TopoJSON data, while the D3 scaleOrdinal and schemeSpectral functions generate the color scale. A custom color legend shows the mapping between colors and population values, and hovering over a country highlights it in red.

SSophia Murage
77% match
Loading thumbnail…

World Happiness Scores by Population

This visualization maps world happiness scores by population, with each country represented by a colored circle whose area reflects its population. Clicking a circle reveals the happiness score, while hovering displays additional details, and pan/zoom enables closer inspection. The D3.js implementation uses `geoPath` with `geoNaturalEarth1` projection, `scaleSqrt` for circle sizing, and `scaleSequential` with `interpolateInferno` for color encoding. Data comes from the World Happiness Report via a CSV file, rendered as SVG with TopoJSON country boundaries.

Mmkt-ds
77% match