World Map with Cancer Data

100%

World Map with Cancer Data

✓ Published0🌍 Public

Last edited Jul 16, 2023

Created on Jul 16, 2023

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

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

79% 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 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…

Covid-19 cases global data

This visualization displays global COVID-19 case data on an interactive world map using a natural Earth projection, with each country rendered as a green SVG path that turns red on hover. The map uses d3.geoPath with d3.geoNaturalEarth1 for geographic projection, and d3.zoom enables panning and zooming. Country boundaries come from the world-atlas TopoJSON dataset, while country names are joined via the corresponding TSV file. The sphere background is styled blue, and the visualization relies on D3 v5 and topojson.feature to process the geographic data.

Ggcappadaniel

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

77% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global COVID-19 cumulative case counts by country, with each nation shaded according to its reported total. The map uses a natural Earth projection and is rendered as SVG, with a zoom interaction allowing users to inspect regions in detail. Data comes from a CSV file joined with world country boundaries from the World Atlas TopoJSON, while colors are assigned via d3.scaleOrdinal with a spectral scheme. Hovering reveals the country name and case count through an SVG title element.

Ggcappadaniel

77% match

Loading thumbnail…

Covid19 world map

This visualization presents a world map showing cumulative COVID-19 cases as of June 6, 2021, using a natural Earth projection rendered with SVG via `d3.geoPath`. Circle markers sized by a square-root scale represent case counts per country, while a corresponding size legend and a color legend for missing data are included. The map supports zooming through `d3.zoom`, and tooltips display country names and case totals using `d3.format`. Data is loaded from a CSV file merged with TopoJSON world geometry via `topojson.feature`, with graticule lines and hover effects on country paths.

Mmunpro2002

76% match