100%

Project Dashboard - Mental Illnesses, Unemployment and Suicides over the years

✓ Published1🌍 Public

Last edited Nov 1, 2020

Created on Oct 28, 2020

This dashboard combines multiple linked views to explore mental illness, unemployment, and suicide rates. It shows how the top five countries affected by unemployment compare in mental illness prevalence for a selected year, alongside line charts tracking these metrics over time for chosen countries and conditions. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for the bar chart, `scaleTime` for temporal axes, and custom drop-down menus for filtering. Data comes from an external CSV file, rendered as SVG with interactive color legends and hover effects.

AI-generated description

This visualization was constructed using D3 & React.

The idea behind this multiple views is to analyze which are the 5 countries that have been most affected by unemployment, and at the same time analyze how the percentage of the population that has suffered a mental illness has varied over the years.

Questions I wanted to answer with this visualization

How has the percentage of mental diseases in each country changed over time?
Has there been a decrease in people with mental illnesses, or rather an increase?
Which countries have been most affected by unemployment?
Which are the countries that have been most affected by unemployment, and what is the percentage of the population that suffers from a mental illness in these countries?

The data used in this visualization can be found on Gist here: Mental Healths Disorders Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Project Dashboard - Mental Illnesses, Unemployment and Suicides over the years

This dashboard combines four linked views to explore relationships between mental illness, unemployment, and suicide rates across countries over time. It shows how the percentage of the population affected by mental illness has changed, alongside unemployment and suicide death rates, with a bar chart highlighting the top five countries most affected by unemployment for a selected year. The visualization uses D3 v5 and React, rendering SVG charts with scales including `scaleBand`, `scaleLinear`, and `scaleTime`, and incorporates dropdown menus for user interaction. It leverages d3-shape’s `line` and `curveNatural` for smooth line paths, with data sourced from a CSV file.

Jjimmy.fisher@member.mensa.org

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

90% match

Loading thumbnail…

DataViz Project - Suicides Visualization

An interactive line chart visualizes suicide death rates in American countries over time, alongside related mental health and unemployment metrics. A country selector filters the dataset, and a color legend distinguishes unemployment from mental illness data. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` for path rendering, with data from a CSV hosted on GitHub Gist. The SVG output includes custom axes and a dropdown menu for country selection.

FFelipe Mejías

88% match

Loading thumbnail…

DataViz Project - First Visualization

This interactive line chart, built with React and D3 v5, visualizes the percentage of a country's population affected by mental illness and unemployment over time, with a dropdown menu to select among six American countries. The SVG rendering uses D3's `scaleTime` and `scaleLinear` for the axes, and natural cubic spline curves via `line().curve(curveNatural)` to smooth the trends. A custom color legend distinguishes the two metrics, shown as green (mental illness) and orange (unemployment) lines, using data from a CSV file hosted on Gist.

FFelipe Mejías

87% match

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map with Linked Line Chart

A choropleth map shades countries by the percentage of their population with mental illness for a selected year, while a linked line chart below plots the same metric over time for every country. Moving the mouse horizontally across the chart updates the map to the corresponding year. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for the map, `scaleSequential` with `interpolatePuBu` for color encoding, and `scaleTime` for the year axis. Data comes from a CSV of mental health disorders, with country boundaries from World Atlas TopoJSON.

FFelipe Mejías

81% match

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map with Linked Line Chart and Color Legends

A choropleth map displays the global percentage of national populations with mental illness for a selected year, with a linked line chart below showing each country's trend over time. Moving the mouse across the chart updates the selected year, redrawing the map's sequential blue color scale and positioning a vertical line on the line chart. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map projections, `scaleSequential` for coloring, and `scaleTime`/`scaleLinear` for the line chart. Data comes from a CSV of mental health disorders, with country boundaries from TopoJSON.

FFelipe Mejías

80% match

Loading thumbnail…

A world map showing cities with a population greater than 50,000

This interactive dashboard visualizes suicide rates across countries with a world map and linked charts. The map displays circles sized by suicide count, colored by categorical data, and positioned using `d3.geoNaturalEarth1` projection and `geoPath`. Tooltips provide detailed country statistics via Tippy.js. A brushable time-series histogram filters data by year, dynamically updating the map and a scatter plot, which allows users to explore relationships between attributes like GDP and suicide numbers using `d3.scaleLinear` and dropdown menus. The visualization uses SVG and React with D3 v4, sourced from a merged dataset of world cities and suicide rates.

Mmnalk

80% match

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map

This choropleth map visualizes the percentage of each country’s population affected by mental illness in 2017, highlighting geographical disparities and enabling comparisons across regions. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render country boundaries and graticules, while a `scaleSequential` with `interpolatePuBu` encodes data values as color intensity. Country codes are mapped to numeric identifiers via CSV data, and missing values appear in black. The map is interactive through SVG tooltips showing country names.

FFelipe Mejías

79% match