Stacked Bar Chart of Depression Rates by Country

100%

Stacked Bar Chart of Depression Rates by Country

✓ Published0🌍 Public

Last edited May 21, 2023

Created on May 20, 2023

This horizontal stacked bar chart displays depression rates across countries, broken down by year from 2015 to 2019. Each bar represents a country, with colored segments corresponding to annual prevalence percentages, and hovering reveals exact values via a custom tooltip. Built with D3 v4, the visualization renders as SVG and uses `d3.stack` for the segmented bars, `d3.scaleOrdinal` for the color palette, and a CSV dataset from GitHub as the data source.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

82% match

Loading thumbnail…

Rate of Depression over Time per Country

This visualization shows the global rate of depression over time for each country, with a logarithmic y-axis displaying cumulative deaths. It uses React and d3.v5 to render an SVG line chart, with a Voronoi overlay for hover interactions that highlight the active country’s line and display a tooltip with exact values. Data comes from a CSV dataset processed via d3.csv, with scales and line generators built using d3.scaleTime, d3.scaleLog, and d3.line.

CCrossZeigler

82% match

Loading thumbnail…

Number with depression by country in D3 Scatter Plot

A D3.js scatter plot visualizes the number of people with depression by country from 1990 to 2016. Each blue circle represents a single country-year observation, plotted with prevalence of depressive disorders on the x-axis and the year on the y-axis, showing the distribution of affected populations over time. The code uses D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader to parse data from a GitHub Gist and render SVG circles with fill opacity. The visualization aggregates all sexes and ages, sourced from Our World in Data.

Mmnalk

81% match

Loading thumbnail…

Fork of Viz_3

This bar chart displays the top 10 countries with the highest depression rates (all ages) for the year 2019, using data from a CSV file filtered and sorted within the React app. It renders with SVG via D3 v5 and React, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Horizontal bars show the percentage values, with axes generated by custom `AxisBottom` and `AxisLeft` components. The chart is rendered using ReactDOM, and hover tooltips are provided via SVG `<title>` elements.

NNikithakatta30

81% match

Loading thumbnail…

Prevalence of depression by age in D3 Scatter Plot

This scatter plot visualizes the prevalence of depression among people aged 20–24 for a subset of countries, with each year on the x-axis and the percentage of affected individuals on the y-axis. Ten countries are distinguished by unique colors, such as Afghanistan in red and Albania in black. The visualization uses D3 v6 with SVG rendering, employing scales like `scaleLinear` for axes and circle marks to represent data points. Data is loaded from a CSV file on GitHub Gist using `d3.csv`, with axis labels and a title added programmatically.

Mmnalk

79% match

Loading thumbnail…

DataViz Project - Second Visualization

This interactive bar chart compares unemployment rates and mental illness prevalence across the five most affected countries for a selected year. Users can switch between 1995, 2000, 2005, 2010, and 2015 via a React dropdown menu. The visualization uses React hooks, d3.scaleBand and d3.scaleLinear for axes, and d3.csv to load the mental health dataset from a GitHub gist. Hovering over the color legend highlights corresponding bars and fades others, with tooltips showing exact values.

FFelipe Mejías

79% match

Loading thumbnail…

Your Project

This interactive bar chart visualizes the depression rate (Allages) for the top 10 happiest countries in a selected year, allowing users to filter by year via a dropdown menu. The chart updates dynamically, sorting countries by Happiness Score in descending order and displaying a title reflecting the chosen year. Built with React and D3.js, it uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rectangles for bars. The code also employs `d3.axisBottom` and `d3.axisLeft` for rendering the axes.

Ssrividyap03

79% match