Happiness and Depression rates with color legend

100%

Happiness and Depression rates with color legend

✓ Published0🌍 Public

Last edited May 19, 2023

Created on May 18, 2023

This scatter plot visualizes the relationship between Happiness Scores and depression rates across all ages, with points colored by year and a color legend that supports interactive filtering. Hovering over a legend year highlights only the corresponding data points and fades the rest. The visualization uses React components for rendering SVG elements, with D3 scales like `scaleLinear` and `scaleOrdinal` to map data to positions and colors. Data is loaded via D3’s `csv` from a GitHub gist, and axes are built using custom React components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Untitled

This scatter plot displays the relationship between a country's Happiness Score and its rate of depressive disorders, with each point's size representing population and color encoding geographic region. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.scaleOrdinal for the categorical color mapping. SVG circles are positioned via the xScale and yScale functions, with axis labels and tick marks generated using d3.axisBottom and d3.axisLeft within a React-rendered SVG container.

NNikithakatta30

84% match

Loading thumbnail…

Untitled

This scatter plot shows the relationship between Happiness Score and rate of depressive disorders, with each circle’s size encoding population and color distinguishing four geographic regions. The visualization uses D3.js (v3) to load a CSV file via `d3.csv`, maps data to positions with `d3.scaleLinear`, assigns categorical colors with `d3.scaleOrdinal`, and renders SVG circles. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with opacity set to 0.5 for overlapping points.

Vvihaansubhash

83% match

Loading thumbnail…

Depression vs Happiness

This visualization plots depression rates against happiness scores for different countries, with each circle representing a country and its position determined by those two metrics. A dropdown menu allows viewers to select a specific year, triggering a smooth transition of the data points. The chart uses D3 v6’s scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and SVG circles, with an animated `transition` to update positions when the year changes. Data is loaded from a CSV file via `d3.csv`.

NNikithakatta30

83% match

Loading thumbnail…

Fork of Scatter Plot of Happiness and Y axis attributes

This interactive scatter plot explores the relationship between the rate of depression across all ages and selected well-being indicators from the World Happiness Report. Users can switch between economy, social support, generosity, freedom, and perception of corruption using a dropdown menu, which updates the y-axis and its label. Built with React and D3 v5, the visualization uses D3’s `scaleLinear` and `extent` to compute scales, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG axes and circles. Point positions are set via `cx`/`cy` attributes, with tooltips formatted using D3’s `format`.

NNikithakatta30

83% match

Loading thumbnail…

Untitled

This interactive scatterplot compares a selected social indicator against age-standardized depression rates across countries, with each circle representing a year's data for a chosen region. Users can switch the x-axis between Freedom, Corruption, Generosity, and Health, and filter by geographic region via dropdown menus. Built with React and D3 v6, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles, with a color-coded legend distinguishing years. Data comes from the `data.csv` file, and the title suggests a thematic focus on societal factors versus depression.

NNikithakatta30

82% match

Loading thumbnail…

Untitled

A scatterplot maps each country's Happiness Score against a depression metric, with points colored by region and an interactive dropdown to toggle between the age20_40 and allages depression values. Built with d3.v6 and SVG, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color, and `d3.axisBottom`/`d3.axisLeft` for ticks. Data comes from the Kaggle "One Small Step for Data" dataset on world happiness.

NNikithakatta30

80% match

Loading thumbnail…

Untitled

This interactive scatterplot explores the relationship between a selectable metric (Freedom, Corruption, Generosity, or Health) and depression rates across all ages, filtered by world region. Colored dots represent different years, with tooltips revealing exact values. The visualization uses D3 v6 to load CSV data via `d3.csvParse`, render SVG elements, and update scales, axes, and circles dynamically through dropdown selectors.

NNikithakatta30

79% match