Interactive Map.js!

100%

Interactive Map.js!

✓ Published1🌍 Public

Last edited Dec 1, 2020

Created on Nov 30, 2020

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Map.js!

This interactive map displays world countries colored in blue, with hover highlighting in orange and a tooltip revealing happiness rank, happiness score, suicide mortality rate, and universal healthcare status from a 2016 happiness dataset. The visualization merges TopoJSON country boundaries with JSON happiness data using d3.json, d3.tsv, d3.geoPath, and d3.geoMercator projections, rendered as SVG paths. Zooming is supported through d3.zoom, and the map is drawn on a light gray sphere background. Countries without matching data show "Unknown" values in the tooltip.

JJasonYeong0821

94% match

Loading thumbnail…

Worldwide Suicide Map with Two Menu and Tooltips

This interactive world map visualizes suicide data from the World Health Organization, plotting circles at each country's coordinates. Users can select a specific year or view the most recent available data through dropdown menus, and a second menu highlights a chosen country in red. The visualization uses d3.geoPath with a d3.geoNaturalEarth1 projection to render land masses and graticules, while d3.scaleSqrt scales circle radii. Tooltips display the country name, year, and suicide count. The React application loads CSV suicide statistics and TopoJSON world atlas boundaries.

Ss-janibekova

83% match

Loading thumbnail…

Healthcare and The Will To Live

This interactive D3.js visualization argues for universal healthcare by correlating national happiness rankings with suicide rates across selected countries. Users explore a choropleth map, built with `d3.geoPath` and `d3.geoProjection`, to hover over countries and reveal metrics like happiness rank, suicides per 1000 population, healthcare access, median salary, and poverty rate. Accompanying bar charts and scatter plots, rendered with standard D3 scales, allow toggling between healthcare systems to compare these relationships. The analysis is based on country-level data presented through a static HTML interface with CSS styling.

Aargonaeut

83% match

Loading thumbnail…

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.

CChen Ding

82% match

Loading thumbnail…

Worldwide Suicide Map with Two Menu and Tooltips

This interactive world map visualizes global suicide rates from 1979 to 2016 using data from the World Health Organization. Two dropdown menus allow users to select a specific year and highlight a particular country, with circles sized by suicide count via d3.scaleSqrt and colored distinctly for the highlighted nation. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map projection and rendering, while React manages the interface state and d3-tip provides tooltips displaying country, year, and suicide number on hover.

CChen Ding

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

82% match

Loading thumbnail…

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.

CChen Ding

82% match

Loading thumbnail…

Worldwide Suicide Map with Menu

This interactive world map visualizes global suicide statistics from the World Health Organization, with a dropdown menu allowing users to select a specific year from 1979 to 2015 or view the most recent available data. Countries are represented by red circles scaled proportionally to suicide counts using d3.scaleSqrt, positioned via d3.geoNaturalEarth1 and rendered with d3.geoPath. The map displays land masses, graticules, and country borders from World Atlas TopoJSON data. Built with React and D3 v5, the visualization includes all geographic features in SVG format, with suicide rates parsed from CSV data.

Ssophburke

81% match