Let's make a choropleth map with D3.js!

Worldwide Suicide Map Multi-views

This interactive visualization combines a world bubble map and a horizontal bar chart to explore global suicide rates from 1979 to 2016. Users select a year and country via dropdown menus, which highlights the chosen country on the map while the bar chart updates to show the top 15 countries with the highest suicide numbers for that year. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, with circles sized via `d3.scaleSqrt`. The bar chart is rendered with React and `d3.scaleBand`, both featuring tooltips for detailed data. The visualization sources suicide data from a CSV and country boundaries from the World Atlas TopoJSON.

Worldwide Suicide Map

This interactive world map visualizes suicide rates from the World Health Organization, with translucent red circles scaled by the most recent suicide number per country using a square-root scale. Users can select a specific year from 1979 to 2015 or view the latest data via a dropdown menu. The visualization uses React for state management and D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the map. Country boundaries come from World Atlas TopoJSON, while suicide data and coordinates are loaded from CSV sources using `d3.csv`.

Fork of Suicide Rates

A choropleth bubble map overlaid on a natural Earth projection displays global suicide counts by location, with circle size proportional to the number of suicides. A linked time-series histogram below shows monthly totals, and brushing a time range filters the map’s circles in real time. The visualization uses React, d3.geoPath for map rendering, d3.scaleSqrt for bubble sizing, and d3.brushX for interactive time filtering. Data combines World Cities coordinates with a Suicide Rates dataset processed through a Jupyter notebook.

Ddasari234

Worldwide Suicide Map with BarChart

This interactive visualization combines a world map with a bar chart to explore global suicide statistics from 1979 to 2016. A natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath displays circles sized by the square root scale of total deaths and missing persons per country. The map is paired with a histogram showing the top 15 countries by year, with user interaction filtering the map by selected date. The data is loaded via d3.csv from a GitHub Gist, while geographic boundaries come from the world-atlas TopoJSON dataset.

Interactive Map.js!

This interactive map displays global happiness and suicide mortality data, with each country colored blue and highlighted orange on hover. A tooltip reveals the country’s happiness rank, score, suicide mortality rate, and universal healthcare status when available, or states these as unknown otherwise. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` to render SVG paths from TopoJSON world-atlas data, while `d3.zoom` enables panning and zooming. Happiness and suicide statistics come from a hosted JSON dataset, and hover text is implemented via SVG `<title>` elements.

Aargonaeut

81% match

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

81% match

World Suicide Statistics

This visualization displays world suicide statistics on a map, shading countries with a red ordinal color scale based on categorized suicide rates. The map uses an equirectangular projection, rendered via d3.geoPath, with country shapes loaded from a TopoJSON world atlas (world-atlas 50m) and associated statistical data from a local CSV file. Hovering a country reveals its name and suicide categorization in a tooltip. A custom SVG color legend, built with d3.scaleOrdinal and a red scheme, shows the mapping of categories to colors.

Jjustprophet

81% match

Worldwide Suicide Map with Two Menu and Tooltips

An interactive world map visualizes suicide counts by country, highlighting the selected nation in red while others appear orange. Two dropdown menus allow users to filter by year or highlight a specific country, with tooltips revealing exact values. Built with React and D3 v5, it uses d3.geoNaturalEarth1 and geoPath for map rendering, plus a sqrt scale for circle sizing. Data comes from WHO suicide statistics, with country boundaries from World Atlas TopoJSON.