Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Jan 3, 2024

Created on Jan 3, 2024

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.

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

85% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot displays country-level well-being indicators, with happiness score on the x-axis and a selectable y-axis metric (economy, social support, generosity, freedom, or corruption). Each circle represents a country, with an HTML `<title>` tooltip showing its exact happiness score. The React-based visualization uses D3 v5 scales (`scaleLinear`), axes (`AxisBottom`, `AxisLeft`), and CSV data loading (`d3.csv`) from a GitHub gist. Users switch the y-axis via a dropdown, triggering React state updates that re-render the SVG marks.

NNikithakatta30

82% match

Loading thumbnail…

Final project

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.

Yyihsuan

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

79% match

Loading thumbnail…

Happiness Level Plot

This scatter plot displays each country’s life satisfaction ranking against the year, from 2004 to 2016, using data from the World Happiness Report 2017. It is built with D3 v5 and renders as an SVG, with a time-scaled x-axis and a linear y-axis. The code uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, and appends semi-transparent orange circles to represent data points. The CSV dataset is loaded via D3’s `csv` method, and the plot includes axis labels and a title.

CChooo4u

79% match

Loading thumbnail…

Fork of D3.js Line Chart

This chart shows the trend of Happiness Scores for China, India, and Japan over five years, drawing on data from the World Happiness Report. A single line is rendered using an SVG path generated by the D3.js `d3.line` function. The x-axis uses an ordinal scale (`d3.scaleBand`), while the y-axis is a linear scale (`d3.scaleLinear`); both axes are created with `d3.axisBottom` and `d3.axisLeft`. The visualization aggregates the data to show the overall score trajectory, though it does not distinguish between the three countries in its line presentation.

NNikithakatta30

79% match

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the relationship between Happiness Score and ageStandard, with each point colored by country. The visualization uses React with SVG rendering, employing d3’s scaleLinear for axes, scaleOrdinal for categorical color mapping, and format for tick labels. Data is loaded from a CSV via d3.csv and parsed with numeric coercion. Hovering over a circle reveals a tooltip showing the happiness score.

NNikithakatta30

78% match

Loading thumbnail…

Happiness Level Line Chart - Test

This visualization displays the happiness levels of 163 countries over time, using a line chart where each line represents a country's trajectory. Users can interact with a dropdown menu to select a specific country, and the color legend allows filtering by country. The chart updates dynamically with transitions. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and `axisLeft`/`axisBottom`. The data comes from a CSV file, and the rendering uses SVG with animation.

CChooo4u

78% match