Week 5: viz-happiness-2024 Scatter Plot

100%

Week 5: viz-happiness-2024 Scatter Plot

✓ Published0🌍 Public

Last edited Sep 24, 2025

Created on Sep 24, 2025

Forked from viz-happiness-2024

This scatter plot visualizes the World Happiness Report 2024 data, mapping each country's Ladder score against its explained component from Log GDP per capita. The visualization uses D3 v7, importing data via `csvParse` and rendering the filtered dataset with a simple `pre` element display. The interactive example loads the CSV file asynchronously, parses and converts the relevant columns to numeric values, and filters out any rows with missing Ladder score or GDP data before presenting the results.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

viz-happiness-2024

This example displays the raw data from the World Happiness Report 2024 as a formatted JSON preview, showing country names and their associated happiness indicators including Ladder score, social support, and GDP per capita. The visualization loads data from a CSV file using the `fetch` API and parses it with `d3.csvParse`, converting numeric fields from strings to numbers. The code renders the parsed data structure in a `<pre>` element, providing a simple text-based investigation of the dataset before any graphical mapping is applied. The implementation follows a state management pattern where data loading triggers a re-render of the view.

XXiaojun

84% match

Loading thumbnail…

World Happiness Report

This visualization displays the relationship between a country’s happiness score and its GDP per capita, with each circle colored by whether the country is classed as the “happiest country.” Built with the vega-lite-api and D3 v5, it loads CSV data from a GitHub gist and renders a scatterplot using `vl.markCircle`. The chart applies custom axis and label styling from a shared config, uses a tooltip to show country names, and fits the view to the window dimensions.

Mmkt-ds

81% match

Loading thumbnail…

Question4

This scatterplot compares countries by GDP per capita (x-axis) and Life Ladder score (y-axis), using the World Happiness Report dataset. Each circle encodes social support through its radius and healthy life expectancy through a blue sequential color scale (d3.scaleSequential). The chart renders as SVG, with axes via d3.axisBottom and d3.axisLeft, plus hover interactions that enlarge points. A gradient legend displays the color mapping, while tooltips (title elements) reveal detailed country-year values.

Vvishu.valandas@gmail.com

81% match

Loading thumbnail…

WHR2024

This scatter plot displays the relationship between GDP per capita and happiness scores for countries in the 2024 World Happiness Report. Each black circle represents a country, positioned by its logged GDP contribution and overall ladder score. Built with React and D3 v7, the visualization uses `scaleLinear` to map data coordinates and idempotent `select` operations to render circles and axes. The SVG rendering handles axis labels and margins through helper modules.

XXiaojun

80% match

Loading thumbnail…

World Happiness Scatter Plot

This scatter plot visualizes the relationship between happiness ladder scores and generosity across countries, with each red circle representing a country based on data from the World Happiness Report 2019. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and SVG circles rendered via d3.select and .enter().append('circle'). The chart includes axis labels and a title, with data loaded via d3.csv from an external dataset, and styled through CSS for circle opacity and tick formatting.

SShanthi Acharya

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

80% match

Loading thumbnail…

1027Happiness Level Scatter Plot

This visualization displays global self-reported life satisfaction from 2004 to 2017, plotting each country-year observation as a point on a scatter plot with selectable y-axis metrics such as GDP per capita or social support. A line chart beneath the scatter plot traces each country’s trends over time, while a color legend allows filtering by specific countries. Built with D3 v5, it uses SVG rendering with animated transitions, d3.scaleOrdinal with interpolateRdYlBu for color mapping, and d3.nest for grouping country lines. Data comes from the World Happiness Report 2017 via Our World in Data.

CChooo4u

79% match

Loading thumbnail…

1027Happiness Level Scatter Plot

This scatter plot displays life satisfaction levels across various countries from 2004 to 2017, featuring interactive tools for exploration. Users can select different metrics from a dropdown menu to change the y-axis, and click legend items to highlight specific data points. The visualization, built with D3 v5, renders circles positioned by year and happiness score, with color encoding for countries. A tooltip reveals country and value details on hover, while the legend provides an interactive filter. Data is loaded from a remote CSV file sourced from the World Happiness Report.

KKeerthiKandadai

79% match