Skip to main content
SimilarExport ZIP
100%

Cancers Map

✓ Published0🌍 Public
AAsrar Al Qassem
Last edited Apr 2, 2024
Created on Mar 31, 2024

This map visualizes total cancer-related deaths by country using a logarithmic color scale from light pink to dark red. It renders world geography using a Natural Earth projection via `d3.geoNaturalEarth` and `d3.geoPath`. Country data from Cancer.csv is matched to GeoJSON features using `d3.map`. A `d3.legendColor` with threshold labels displays the death count legend. SVG paths fill each nation based on the mapped totals.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with Cancer Data

This example visualizes cancer case counts by country on a natural Earth projection world map. The choropleth map colors each country with a sequential blue scale based on its reported cases, while a legend and interactive tooltip display exact values on hover. It builds the map using D3 v6’s `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSequential`, and `d3.interpolateBlues`, loading GeoJSON shapes and joining them with a sample dataset. The code also incorporates an axis-based legend and SVG rendering.

VVenkat-Sumith-Thota
84% match
Loading thumbnail…

Fork of Fork of D3: GeoEarth

This example visualizes global deaths from brain and central nervous system cancer in 2019, coloring each country on a natural Earth projection map using a sequential yellow-orange-red scale based on total mortality counts. The visualization uses React to manage state and render the SVG, with D3 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSequential`, and `d3.csv` for loading the cancer mortality data. Country boundaries come from TopoJSON world-atlas data, and hovering over a country displays its name and death count in a tooltip div. A legend on the left provides a color reference, with data sourced from a CSV file containing all cancer types by country.

BBajiSharifPatan@my.unt.edu
80% 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
79% 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
78% 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
78% match
Loading thumbnail…

Fork of D3: GeoEarth

This interactive SVG map displays global brain and central nervous system cancer deaths for 2019, using a YlOrRd sequential color scale to encode mortality counts per country. Built with React, it loads country boundaries via `d3.json`, converts them with TopoJSON’s `feature`, and projects them using `geoNaturalEarth1` and `d3.geoPath`. A hover-triggered tooltip appends country names and death totals, while a legend provides color reference. Data comes from a WHO-style cancer mortality CSV joined to ISO country codes.

NNikkko1
77% 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
77% match
Loading thumbnail…

D3: GeoEarth

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.

Ssowmyanagula@my.unt.edu
77% match