Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of D3: GeoEarth

✓ Published1🌍 Public
Bbindhureddy98
Last edited Apr 1, 2022
Created on Apr 1, 2022

This choropleth map visualizes global deaths from brain and central nervous system cancer for 2019, using a yellow-orange-red sequential color scale to encode mortality counts by country. The visualization uses React for component structure and D3 v7 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleSequential` to render the map, with TopoJSON world atlas data for country boundaries. A legend displays graduated color swatches, and hovering over a country reveals its name and total death count via D3 selections on a DOM overlay.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of D3: GeoEarth

This choropleth map visualizes global deaths from brain and central nervous system cancer for 2019, using a yellow-orange-red sequential color scale to encode mortality counts by country. The visualization uses React for component structure and D3 v7 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleSequential` to render the map, with TopoJSON world atlas data for country boundaries. A legend displays graduated color swatches, and hovering over a country reveals its name and total death count via D3 selections on a DOM overlay.

Bbindhureddy98
100% match
Loading thumbnail…

Fork of D3: GeoEarth

This choropleth map visualizes deaths from brain and central nervous system cancer across countries for 2019, using a yellow-to-red sequential color scale to encode mortality counts. The visualization renders world geography with `d3.geoNaturalEarth1` and `d3.geoPath`, combining TopoJSON country boundaries from the World Atlas with CSV health data joined via country codes. React manages interactive state, while D3’s `scaleSequential` with `interpolateYlOrRd` drives the color encoding. Hovering over a country displays its name and total deaths in a floating toolkit, and a legend shows the scale’s domain.

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

Fork of Fork of Fork of Fork of D3: GeoEarth

This choropleth map visualizes 2019 global deaths from brain and central nervous system cancer, coloring each country according to its death count using a yellow-to-red sequential scale. A legend shows the color mapping, while hovering over a country reveals its name and total deaths in an on-screen tooltip. The visualization combines TopoJSON country boundaries with CSV data, projecting them using d3.geoNaturalEarth1 and d3.geoPath. Built with React and styled with SVG, it loads data via d3.csv and renders interactive paths that respond to mouse events.

Bbindhureddy98
98% 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
97% match
Loading thumbnail…

Fork of D3: GeoEarth

This choropleth map visualizes brain and central nervous system cancer deaths for countries in 2019, using a yellow-to-red sequential color scale from D3’s `scaleSequential` and `interpolateYlOrRd`. The map renders with `geoNaturalEarth1`, `geoPath`, and TopoJSON world-atlas data. Hovering over a country reveals its name and total deaths via a tooltip appended with D3’s `select`. React manages state and lifecycle, loading CSV data from two external sources, while a static legend at the left encodes death-count ranges.

AAlankruthSai
96% match
Loading thumbnail…

Fork of D3: GeoEarth

This visualization displays global deaths from brain and central nervous system cancer for 2019, using a natural Earth projection with a sequential yellow-orange-red color scale. It shows country-level data from a CSV dataset of cancer statistics, mapped via ISO codes to world atlas geography. The code uses React to manage state, d3.geoPath and geoNaturalEarth1 for map rendering, d3.scaleSequential with interpolateYlOrRd for coloring, and topojson’s feature method to convert TopoJSON boundaries. Hovering reveals country names and death counts via a tooltip, while a legend indicates color ranges.

BBajiSharifPatan@my.unt.edu
95% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of D3: GeoEarth

This example shows a world map colored by deaths from brain and central nervous system cancer for 2019, using a yellow-orange sequential color scale. It renders geographic features with `d3.geoPath` and `geoNaturalEarth1`, pulling country shapes from world-atlas TopoJSON and matching them to CSV data via country codes. A mouseover tooltip appends the country name and death count, while a legend displays the color scale’s range. The code uses React hooks to load data and D3 v7 for mapping, with the topojson library for feature extraction.

Bbindhureddy98
95% match