Skip to main content
SimilarExport ZIP
100%

Happiness Choropleth Map

✓ Published0🌍 Public
Xxyang3672
Last edited Mar 13, 2021
Created on Mar 13, 2021

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.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

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
94% 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
94% match
Loading thumbnail…

Choropleth Map NU

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`.

CCrossZeigler
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
84% match
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
83% match
Loading thumbnail…

A9 World Choropleth

This choropleth displays world happiness scores for 2022, coloring each country on a blue sequential scale and revealing its name and score on hover via SVG `<title>` tooltips. It loads CSV data and TopoJSON world geometry, then renders paths with `d3.geoPath()` and a Mercator projection. The implementation uses D3 v7, TopoJSON, and d3-legend, with color mapping from `d3.scaleSequential` and `d3.interpolateBlues`.

NNoah C.
82% match
Loading thumbnail…

World Happiness Graph

A linked choropleth map and scatter plot visualize global happiness data, highlighting country scores, GDP per capita, and continent groupings. Interactive tooltips reveal detailed country information on hover. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection and `d3.scaleLinear` for color encoding. The scatter plot, built with `d3.axisBottom` and `d3.axisRight`, shows a log-scaled GDP axis against happiness scores, colored by continent using `d3.scaleOrdinal`. Data is rendered as SVG from loaded map and country datasets.

Kkaijavanzante@gmail.com
82% match
Loading thumbnail…

Happiness Level Scatter Plot

This interactive visualization displays global happiness levels from 2004 to 2017, using data from the World Happiness Report 2017. It combines a line chart showing happiness trends over time with a map, allowing users to click on a country to see its specific happiness trajectory or select a year to view global distribution. Built with D3 v5, the visualization uses `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom` to construct the charts, while SVG rendering handles the map and line paths. The interface includes a dropdown menu for year selection and color-coded points representing happiness scores.

CChooo4u
81% match