Fork of World Happiness and Health Expenditures Correlation

100%

Fork of World Happiness and Health Expenditures Correlation

✓ Published0🌍 Public

Last edited May 5, 2021

Created on May 5, 2021

Forked from World Happiness and Health Expenditures Correlation

This visualization shows the correlation between national happiness scores and health expenditures per person, using a line chart to depict the trend across countries. It loads country-level data from a CSV file and renders it with Vega-Lite, using vega-lite-api and d3.csv for data fetching. The chart is customized with config.js for readability, and includes a layer for a least-squares regression line exported from lregression.js, which calculates the linear relationship fit to the data points.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Happiness and Health Expenditures Correlation

This visualization uses a line mark to plot the correlation between a country’s happiness score and its health expenditure per person, with points aggregated by average and the y-axis not starting at zero. It loads CSV data via `d3.csv` from a GitHub gist, then renders the chart using Vega-Lite API functions like `vl.markLine` and `vl.encode`, with a custom config for font sizes and axis styling. The code also includes a commented-out least-squares regression layer and tooltip setup via vega-tooltip, though the active view only displays the basic trend line.

Mmkt-ds

93% match

Loading thumbnail…

Linear Regression Line with D3.js

This visualization plots the correlation between a country's happiness score and its health expenditure per person, using a scatter plot of circles and an overlaid linear regression trendline. The data is loaded from a CSV file via `d3.csv` and rendered as SVG. The least-squares computation is performed manually in `index.js` to calculate slope, intercept, and r-squared, which are then used to draw the line via `d3.svg.line` and the `d3.scale.linear` axis scales.

Mmkt-ds

81% match

Loading thumbnail…

Linear Regression Line with D3.js

This example shows the correlation between a country’s happiness score and its health expenditure per person using a scatter plot with a linear regression trendline. The visualization, built with D3.js v3 and SVG, plots each country as a green circle, with axes labeled in dollars and happiness scores, and overlays a blue best-fit line computed via a least-squares function that returns the slope, intercept, and R-squared value. Data is loaded from a CSV file hosted on GitHub, while the regression calculation uses native array methods like `map` and `reduce`.

KKeerthiKandadai

81% match

Loading thumbnail…

Fork of regression

A scatter plot compares GDP to health expenditures across countries, with a regression line showing their correlation. A checkbox toggles a logarithmic scale for the x-axis, which compresses the skewed GDP distribution. Point radius encodes each country’s World Happiness Score. The chart uses D3 v3/v4 with `d3.svg.axis`, `d3.scale.linear`, and a custom least-squares function for the regression. Data comes from the World Happiness Report, loaded via `d3.csv`.

JjohnmurphyLC

79% match

Loading thumbnail…

GDP vs Health Expenditures with a regression line with and without logscale

This scatter plot compares GDP per capita to health expenditure per person across 156 countries, with each point sized by the World Happiness Score. A checkbox toggles between linear and logarithmic scales, recalculating the regression line in real time. The visualization uses d3.v4 with SVG rendering, d3.csv for data loading, and custom least-squares calculations for the regression. Data comes from the World Happiness Report via Kaggle.

Mmkt-ds

77% match

Loading thumbnail…

Vega-Lite API Template

This scatterplot displays the relationship between happiness score and logged GDP per capita for countries in the 2020 World Happiness Report, with point color encoding regional indicator and size representing healthy life expectancy. Tooltips reveal country name, happiness score, and GDP per capita on hover. The visualization is built using the vega-lite-api library, which wraps Vega-Lite’s declarative syntax, while D3’s `csv` function loads the external dataset. The chart automatically fits the window dimensions and uses a custom configuration to adjust axis and label styling.

AAnurag Desai

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

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

75% match