Skip to main content
SimilarExport ZIP
100%

D3: GeoEarth

✓ Published0🌍 Public
Ssowmyanagula@my.unt.edu
Last edited Apr 1, 2022
Created on Apr 1, 2022

A choropleth world map visualizes 2019 death rates from brain and central nervous system cancer by country, using an orange-to-red sequential color scale. The map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country boundaries from World Atlas TopoJSON. React manages state for data loading via `d3.csv` and a custom hook, while hover interactions append tooltip text. A legend built with SVG rectangles shows the color scale’s domain, and the code uses `d3.scaleSequential` with `interpolateYlOrRd` for color encoding.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3: GeoEarth

This example displays a world map colored by deaths from brain and central nervous system cancer for the year 2019, using a yellow-orange-red sequential color scale. It leverages d3.geoPath with a d3.geoNaturalEarth1 projection to render country boundaries from the World Atlas TopoJSON. The choropleth maps data from a CSV joined to country codes via ISO-3166 codes, with colors scaled by d3.scaleSequential using d3.interpolateYlOrRd.

SSiddharthMittal07
94% match
Loading thumbnail…

D3: GeoEarth

This interactive chloropleth map visualizes global deaths from brain and central nervous system cancer in 2019, using a yellow-to-red sequential color scale via `d3.scaleSequential` and `d3.interpolateYlOrRd`. A `d3.geoNaturalEarth1` projection renders country boundaries from the World Atlas TopoJSON, with each country’s fill determined by matching ISO country codes from a CSV to cancer mortality data. Users hover over a country to display its name and total deaths in a floating tooltip, while a legend shows the color scale range. The visualization uses React for state management, `d3.geoPath` for drawing, and `topojson.feature` for geographic data processing.

SSiddharthMittal07
93% 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
93% 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
92% 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
92% match
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
91% match
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
91% 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
91% match