Prototype geluk 2.0

Prototype geluk 1.0

This bar chart visualizes reported happiness levels in the Netherlands from 1997 to 2018, with each bar’s length representing the yearly "geluk" score. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles with steelblue fill. Data is loaded from a local CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The visualization highlights slight annual fluctuations in happiness, remaining mostly stable between 87 and 89 points.

92% match

Prototype geluk 3.0

Prototype geluk 3.0 displays yearly happiness scores from 1997 to 2018 as a scatterplot, with each circle representing a year’s geluk value. The chart uses a linear x-scale for happiness and a point y-scale for years. Built with D3 v5, it renders SVG circles via data joins and includes axes with percentage formatting. Data is loaded from a CSV file using `d3.csv`.

89% match

Prototype geluk 3.0

This scatterplot shows the trend of reported happiness in the Netherlands from 1997 to 2018, with each circle representing a yearly score on a percentage scale. The visualization uses d3.csv to load the data and d3.scaleLinear and d3.scalePoint for the axes, rendering circles as SVG elements. The chart includes a bottom axis formatted as percentages and a left axis listing each year, with the source data stored in a plain CSV file.

86% match

Happiness Level Chart

This visualization shows global self-reported life satisfaction from 2004 to 2017, using data from the World Happiness Report 2017. It combines a scatter plot with a line chart, letting users explore different well-being metrics via a dropdown map. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. An animated cartoon face (built with d3.arc and transitions) reacts to the data, while a color legend and tooltips on mouseover provide interactive filtering and detail.

73% match

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.

73% match

Streamgraph 2.0

This streamgraph displays changes in Dutch societal indicators from 2000 to 2018, including happiness, depression-related deaths, suicides, and bachelor’s degree graduates. The visualization uses a silhouette offset to center the stacked areas around a central axis, with each colored layer representing a different metric. Built with D3 v4, the example loads data from a CSV file and uses `d3.stack` with `d3.stackOffsetSilhouette` to compute layer positions, while `d3.area` generates the SVG paths. An ordinal color scale applies the `d3.schemeDark2` palette, and interactive tooltips reveal the layer name on mouse hover.

72% match

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.

72% match

Happiness Level Chart

This visualization presents self-reported life satisfaction across countries from 2004 to 2017, using data from the World Happiness Report 2017. It combines a scatter plot with year and satisfaction metrics, a multi-line chart tracking trends per country, and an animated cartoon face that shifts expressions. Users select different satisfaction indicators via a dropdown menu and filter countries by clicking the color legend. The D3 v5 code builds SVG elements, uses scales like `scaleTime` and `scaleLinear`, and applies transitions to update data points and the face animation.