Final project

100%

✓ Published1🌍 Public

Last edited Jan 4, 2024

Created on Jan 3, 2024

This interactive visualization explores global happiness data from 2015–2023, allowing users to switch between a choropleth map, leaderboard, line chart, and correlation matrix. The map colors countries by selected factors using d3.scaleSequential with interpolateYlGnBu, while the line chart compares individual country trends against the global average. The visualization uses d3-geo projections, d3-scale-chromatic, and SVG rendering, with support for zooming, tooltips, and animated year sliders.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Final project

This interactive visualization explores global happiness data (2015–2019) across multiple dimensions, including economy, family, health, freedom, trust, and generosity. It presents a choropleth world map colored by selected metrics, a leaderboard for ranking countries, a detail view for individual country comparisons, and a correlation matrix between factors. Users can switch views, filter by year or region, and adjust rank ranges. Built with D3 v7, it uses `d3.geoPath` with Natural Earth projections for the map, `d3.scaleSequential` for color encoding, and animated transitions for temporal changes, rendering in SVG.

Sstanley.shen2003@gmail.com

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

82% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows how a selected country’s happiness and its contributing factors (economy, family, health, freedom, trust, generosity) change from 2015 to 2023, either as raw scores or as differences from the global yearly average. The user can switch between these two modes via a flag. The chart renders multiple colored lines, one per feature, using d3.line and d3.scaleOrdinal with d3.schemeSet2, and includes axes from d3.axisBottom and d3.axisLeft. Data comes from the CSV file, which is loaded with d3.csv.

Yyihsuan

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

81% match

Loading thumbnail…

Viz Project

This visualization explores global trends in the World Happiness Report by mapping each country’s life satisfaction against GDP per capita, with additional dimensions for social support, life expectancy, freedom, generosity, and corruption. Using D3 v4 with SVG and animation, the chart animates through years to reveal changes in the happiness landscape. Each country is represented as a circle, with its position encoding the relationship between GDP and the life ladder score, while size and color can encode additional variables. The visualization updates smoothly as the year changes, allowing users to compare how countries shift in relative happiness and economic standing over time.

CCJKraenzle

81% match

Loading thumbnail…

Interactive Map.js!

This interactive map displays world countries colored in blue, with hover highlighting in orange and a tooltip revealing happiness rank, happiness score, suicide mortality rate, and universal healthcare status from a 2016 happiness dataset. The visualization merges TopoJSON country boundaries with JSON happiness data using d3.json, d3.tsv, d3.geoPath, and d3.geoMercator projections, rendered as SVG paths. Zooming is supported through d3.zoom, and the map is drawn on a light gray sphere background. Countries without matching data show "Unknown" values in the tooltip.

JJasonYeong0821

80% match

Loading thumbnail…

1027Happiness Level Line Chart

This visualization displays self-reported life satisfaction across countries from 2004 to 2017, using a scatter plot where each circle represents a country-year observation. Users select a metric from a dropdown menu, and clicking a color legend entry highlights that country’s points while dimming others. The D3.js v5 code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and transitions to animate marks, with `interpolateRdYlBu` for color encoding. Data originates from the World Happiness Report 2017, rendered as an SVG with interactive legend and dropdown functionality.

CChooo4u

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

80% match