Skip to main content
SimilarExport ZIP
100%

Fork of DataViz Project - Third Visualization - Mental Illness Choropleth Map

✓ Published0🌍 Public
VVenkata Rajashekar Reddy Chinthala
Last edited Apr 3, 2022
Created on Apr 3, 2022

This interactive D3.js v5 choropleth map shows the percentage of each country’s population affected by mental illness in 2017, using a sequential blue color scale over a Natural Earth projection. The React-based view renders SVG paths for countries, with missing data marked in black, and includes graticules, a sphere background, and interior boundaries. It uses `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.geoGraticule` for map geometry, while pulling data from a CSV of health disorders and a country-code lookup.

AI-generated description
MIT Licensed

Similar vizzes

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
94% 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
91% 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
91% 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
84% match
Loading thumbnail…

Fork of D3: GeoEarth

This choropleth map visualizes global brain and central nervous system cancer deaths in 2019, with countries colored on a yellow-orange-red sequential scale from the D3 `scaleSequential` and `interpolateYlOrRd` scheme. A legend shows the magnitude of deaths, and hovering over a country reveals its name and total death count via a tooltip. The visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries from TopoJSON world atlas data, merged with CSV datasets for country codes and cancer mortality statistics. The React app loads these data through custom hooks and updates the SVG elements dynamically.

VVenkata Rajashekar Reddy Chinthala
82% 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
82% match
Loading thumbnail…

Fork of Fork of D3: GeoEarth

This interactive choropleth map visualizes global deaths from brain and central nervous system cancer for 2019, with countries colored on a yellow-to-red sequential scale using d3.scaleSequential and interpolateYlOrRd. The geographic projection is rendered via d3.geoPath with geoNaturalEarth1, while country boundaries come from World Atlas TopoJSON data and mortality statistics are joined from CSV files. A legend and hover tooltip, implemented with React state and D3 selections, display country names and death counts. The visualization uses React to manage the component lifecycle and d3.v7 for data loading, mapping, and SVG rendering.

Bbindhureddy98
80% match
Loading thumbnail…

Fork of D3: GeoEarth

This interactive choropleth map visualizes global brain and central nervous system cancer deaths for the year 2019, colored using a yellow-to-red sequential scale. Built with React and D3 v7, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, while `d3.csv` loads the data appended to a TopoJSON world atlas. A legend and hover tooltip, implemented with `d3.select`, show the total death counts per country.

Bbindhureddy98
80% match