Skip to main content
SimilarExport ZIP
100%

DataViz Project - Suicides Visualization

✓ Published0🌍 Public
FFelipe Mejías
Last edited Oct 30, 2020
Created on Oct 30, 2020

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.

AI-generated description

This visualization was constructed using the D3 & React.

The idea behind this visualization was to show the percentage of the population of various countries in America that suffer from some mental illness over the years.

Questions I wanted to answer with this visualization

  • How has the percentage of mental diseases in some American countries changed over time?
  • Has there been a decrease in people with mental illnesses, or rather an increase?

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

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

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

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.

FFelipe Mejías
88% match
Loading thumbnail…

S ucide For Selected Country

This interactive visualization displays suicide rates by year for a user-selected country, using data from a CSV file covering 1979 to 2016. A dropdown menu triggers an update of the line chart, which uses d3.scaleLinear, d3.scaleOrdinal, d3.line, and d3.curveBasis for rendering the smoothed lines. The SVG includes axes with d3.axisBottom and d3.axisLeft, a color legend for the selected country, and a title, all rendered using d3.select and d3.append. The visualization uses React for dropdown interaction and d3.v5 for the core charting logic.

PPakcheera Choppradit
88% 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
85% match
Loading thumbnail…

Line Graph of Deaths

This visualization uses three natural curves to show annual counts of suicide, alcohol-related, and firearm deaths in the United States. The data is loaded via `d3.csv` from a GitHub Gist, and the React app uses `d3.scaleLinear`, `d3.line`, and `d3.curveNatural` to render SVG paths for each death type. Interactive dropdown menus for sex, ethnicity, age group, and y-axis death metric are present, though the README notes the filter logic is incomplete, so the displayed lines currently aggregate all demographics. A color legend for sex is also included but does not affect the rendered marks.

PPeter Maida
84% match
Loading thumbnail…

Suicides rates in countries

The chart displays suicide rates over time for various countries, with a line chart connecting yearly data points. The visualization uses D3 v5 to load CSV data, parses year values, and scales the time and linear axes. It renders an SVG with a maroon line path, axis labels, and gridlines, with the data pulled from the source at vizhub.com/wishcsdev/datasets/suicides.csv.

Wwishcsdev
84% match
Loading thumbnail…

Suicide Number By Country with Year Menu

This interactive bar chart displays the top 15 countries by suicide number for a selected year, with a dropdown menu offering choices from 1979 to 2015 or the most recent available data. The visualization uses React to manage the year selection state, D3 v5’s `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles with tooltips showing exact values. Data comes from a CSV file of suicide rates by country, loaded via `d3.csv` and sorted in descending order before display. Users can compare rankings across years to observe trends in national suicide statistics.

CChen Ding
83% match
Loading thumbnail…

Suicide Rates 11/17/2021

This interactive visualization maps global suicide rates using a bubble map, where circle size encodes the number of suicides per country and color distinguishes categories. A linked time-series histogram below allows brushing to filter the map by year. The project uses React, D3 v5 (including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, and `brushX`), and Tippy.js tooltips. Data comes from a CSV of suicide rates merged with city coordinates, rendered as SVG over a world atlas TopoJSON.

Mmnalk
83% match