Untitled

100%

✓ Published0🌍 Public

Last edited May 15, 2023

Created on May 15, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Untitled

This interactive scatter plot visualizes the relationship between "Menus" (a perceived social metric) and depression levels across different regions and years, using data loaded via `d3.csv`. The visualization compares various quantitative attributes—Freedom, Corruption, Generosity, and Health—against the "Allages" depression score, with data points colored by year. Users select a specific region and X-axis attribute through dropdown menus, which triggers an `update` function to filter the dataset, rescale the linear axes via `d3.scaleLinear`, and redraw the circles. The code uses D3 v6 APIs for SVG rendering, axis generation (`d3.axisBottom`, `d3.axisLeft`), and categorical color assignment (`d3.scaleOrdinal`).

NNikithakatta30

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

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

85% match

Loading thumbnail…

Untitled

This interactive bar chart visualizes the depression rate across the top 10 happiest countries for a selected year. A dropdown menu, populated from a CSV file, lets the user choose a year, triggering a new chart that shows the "Allages" depression rate for each country. Built with D3 v6, the visualization uses `d3.select`, `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG, with bars colored green and rotated country labels for readability.

CCrossZeigler

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 interactive bar chart compares depression rates across the top 10 happiest countries for a selected year. A dropdown menu, populated from the data’s unique years, triggers a redraw. The chart uses d3.csv to load the dataset, d3.scaleBand and d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft for rendering. Bars are colored with a fixed teal fill, and country labels are rotated. The visualization updates dynamically by clearing the SVG and re-rendering for the chosen year.

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

82% match