Skip to main content
SimilarExport ZIP
100%

Fork of Cancer Survival Rates

✓ Published1🌍 Public
AAsrar Al Qassem
Last edited Mar 30, 2024
Created on Mar 30, 2024

This visualization shows a network of cancer types in the United States, with the country as a central red node connected to various blue cancer-type nodes. The code uses D3.js v6 with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, along with `d3.drag` for interactivity. Data is loaded from a CSV file using `d3.csv` and rendered as SVG elements, with labels displaying each cancer type.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Network graph of 10 Types of Cancer - US & Canada

This network graph visualizes 2019 cancer incidence and mortality data for the United States and Canada, connecting each country to its respective cancer types and associated deaths. The interactive layout uses D3.js v6 force simulations to position nodes, with edges indicating relationships between countries, cancer categories, and death records. Rendered as SVG within a React framework, the graph distinguishes node groups—countries, cancers, and deaths—through visual properties, providing an exploratory overview of comparative oncology statistics across the two nations.

AAsrar Al Qassem
83% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This animated scatter plot visualizes cancer mortality rates in the U.S. from 1999 to 2019, cycling through four cancer types—Liver, Breast, Prostate, and Thyroid—using distinct D3 symbols. The chart updates every two seconds, redrawing points with a smooth transition, while the title and axes labels adapt to reflect the selected cancer type. Built with reusable D3 modules, the visualization highlights year-over-year death trends with a clean, animated design.

Vviveknaroju999@gmail.com
82% match
Loading thumbnail…

Fork of HTML Starter

This visualization uses a scatterplot to show cancer mortality trends in the USA from 1990 to 2019, with each circle representing a specific cancer type’s annual death count. It displays data from a CSV file loaded via D3’s `csv` function, with time-scaled x-axis and linear y-axis. React manages the component state and lifecycle, while D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` render the axes. Hovering over a circle triggers a tooltip with details, and a color-coded legend identifies each cancer type.

NNandini Maddula
81% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four cancer types in the U.S., plotting yearly death rates using D3’s reusable chart pattern. Each type—liver, breast, prostate, and thyroid cancer—is represented by a different symbol (star, square, circle, square), with the data updating every two seconds. The chart uses SVG rendering and smooth transitions, with axes labeled "Years" and "Number of Death", while a dynamic title indicates the currently displayed cancer type.

Rrobertotienonyaranga@gmail.com
80% match
Loading thumbnail…

Fork of Fork of HTML Starter

This animated scatter plot cycles through four cancer types—Liver, Breast, Prostate, and Thyroid—using D3.js to visualize death rates in the US from 1990 to 2019. Each cancer type is encoded with a distinct symbol (star, square, circle) and the chart updates every two seconds with a smooth transition, while a dynamic title indicates the currently displayed cancer type. The reusable chart component supports axes labels, margins, and configurable data accessors.

Rrobertotienonyaranga@gmail.com
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…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer incidence data from the U.S., visualizing death rates for liver, breast, prostate, and thyroid cancers over time. Using D3 v3, it maps years to the x-axis and population to the y-axis, with each cancer type distinguished by a unique symbol (star, square, circle). The chart updates every two seconds, transitioning smoothly between datasets while rotating through the cancer types, with a title indicating the current type. Built as a reusable module, it demonstrates animated transitions, SVG rendering, and dynamic symbol mapping in a clean, informative design.

AArun
78% match
Loading thumbnail…

Fork of Fly

This bar chart visualizes cancer deaths in the USA for 2019, comparing three cancer types: liver, kidney, and lip/oral cavity. The code loads CSV data from a GitHub gist using `d3.csv`, filters for USA and year 2019, and maps the selected values to a dataset. It uses `d3.scaleBand` and `d3.scaleLinear` to position bars, with `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes rotated x-axis labels and a title, with bars filled with steelblue.

AAsrar Al Qassem
78% match