100%

Mental illneses in American countries throughout the years

✓ Published0🌍 Public

Last edited Sep 21, 2020

Created on Sep 20, 2020

This visualization uses a multi-line chart to show the percentage of the population affected by mental illnesses in Costa Rica, Colombia, and Brazil from 2000 onward. The graph highlights that overall levels remain stable, with slight recent declines in Brazil and Colombia. It is built with Vega-Lite’s API for chart specification, using D3 to load CSV data from a Gist and vega-tooltip for interactivity. The chart applies a custom color scale and filters data to post-2000 years.

AI-generated description

This visualization was constructed using the vega-lite-api.

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?
- According to the graph, the total percentage of the population affected with a mental illness has remained relatively in the same level, however it is observed that both in Brazil and in Colombia this percentage has decreased in recent years.
Has there been a decrease in people with mental illnesses, or rather an increase?
- Analyzing the graph, the percentage of the population with mental illneses has remained at the same level, however it is important to see that in some countries such as Brazil and Colombia the level has decreased.

I really liked being able to use Vega-Lite because it is a very useful and easy to use tool, and at the same time it allowed me to implement my second sketch in a very similar way.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

People affected by mental diseases over the years in American Countries with Interactive Legends

This interactive line chart shows the percentage of the population affected by mental health disorders in four American countries—Costa Rica, Colombia, Honduras, and Ecuador—from 1990 to 2017. A dropdown menu lets users select among seven disorder types, while a color legend highlights individual country trends. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data, with hover interactions on the legend fading non-selected countries. The visualization draws SVG paths using `d3.line` with `curveNatural`, rendering data from a CSV loaded via `d3.csv`.

FFelipe Mejías

86% match

Loading thumbnail…

People affected by mental diseases over the years in American Countries

This interactive visualization shows how the percentage of a population affected by various mental health disorders changes over time across American countries. Users can select a country and a mental disease from dropdown menus to filter the view. A single line chart displays the trend using SVG paths generated with d3.line and curveNatural. The React application uses D3 v5 scales (scaleTime, scaleLinear) for axes and data from a CSV file loaded via d3.csv.

FFelipe Mejías

82% match

Loading thumbnail…

People affected by mental diseases over the years in American Countries - 2

This interactive chart displays the percentage of a population affected by a selected mental health disorder for a chosen American country over time. Using D3 and React, the visualization plots a single line for the selected country. The chart includes dropdown menus to filter the data by country and disorder type. A dedicated `useData` function loads a CSV file from a Gist, and the line mark is rendered as an SVG path using d3’s `line` and `curveNatural` functions. The data is sourced from the Gist dataset mentioned in the README.

AAbdul Salam Almadani

81% match

Loading thumbnail…

People affected by mental diseases over the years in American Countries - 2

A line chart displays the percentage of a selected American population affected by a chosen mental disorder per year. Users choose a country and a disorder from two dropdown menus; a single teal path then updates smoothly using d3.line with curveNatural, drawn on an SVG rendered via React. Axes are built with scaleTime and scaleLinear, and the data comes from a CSV hosted on Gist.

Qqcuong96

79% match

Loading thumbnail…

Percentage of the population that suffered from schizophrenia in Central American countries over the years

This visualization uses grouped bar charts to compare the percentage of the population suffering from schizophrenia in Costa Rica, Guatemala, Nicaragua, and Panama for the years 1995, 2005, and 2015. The vega-lite-api, built on Vega-Lite and Vega, renders the chart, with bar color encoding each country. Tooltips display the average schizophrenia percentage per country via a vega-tooltip handler. Data is loaded asynchronously from a CSV file using d3.csv and filtered to select the specified countries and years, with a custom config adjusting axis colors and font sizes.

FFelipe Mejías

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

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

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

74% match