Skip to main content
SimilarExport ZIP
100%

Cancer Survival Rates

✓ Published2🌍 Public
AAsrar Al Qassem
Last edited Mar 26, 2024
Created on Mar 22, 2024

This visualization uses overlapping semi-transparent areas to compare cancer survival rates for females and males from 1977 to 2013. The chart highlights the trend in survival percentages over time for each sex, with pink representing females and light blue representing males. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `csv` to load and parse data, then renders the areas and axes via SVG. A legend and labeled axes clarify the visualization, which sources data from the five-year cancer survival rates by sex and race.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cancer Survival Rates

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.

AAsrar Al Qassem
75% match
Loading thumbnail…

Area Chart

This area chart displays US cancer cases recorded annually from 2009 to 2022, using a smooth curve to highlight the overall trend in case counts over time. The visualization is built with D3 v5, employing `scaleLinear` for both axes, `area` with `curveBasis` to generate the filled path, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file via `csv`, with year and case values parsed as numbers. The SVG rendering includes styled axis labels and a filled area in a distinct color, with grid lines created through negative tick sizes.

Aadapasaidivya99@gmail.com
75% match
Loading thumbnail…

ICE-6 Impact of Cancer Deaths 2019

This interactive visualization displays cancer mortality trends in the United States from 1990 to 2019, plotting individual yearly death counts for fifteen distinct cancer types as colored dots. The scatterplot uses SVG circles rendered through React and D3, with each cancer type assigned a unique color and an interactive tooltip revealing exact death numbers on hover. Built with D3 scales (`scaleTime`, `scaleLinear`), axes (`axisLeft`, `axisBottom`), and event handlers, the chart reads from a CSV dataset filtered for USA records, making temporal patterns across cancer categories immediately comparable.

AAsrar Al Qassem
73% match
Loading thumbnail…

Q2_AreaChart

This area chart displays reported US cancer cases from 2009 to 2022, using a smoothly curved line and a filled teal area beneath it to emphasize the trend over time. The visualization is rendered as an SVG using D3 v5, with axes and grid lines generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV source, parsed into numeric year and case counts, and mapped to positions using `d3.scaleLinear` for both axes, while `d3.line` and `d3.area` with `d3.curveBasis` construct the geometric paths.

Lleelakrishnadivi7@gmail.com
73% match
Loading thumbnail…

Breast Cancer Data Bar Chart

This bar chart visualizes breast cancer data, comparing two numeric attributes—perimeter_mean on the x-axis and radius_mean on the y-axis—across individual records. The chart uses D3 v7 to fetch a CSV dataset from a GitHub repository, then renders horizontal bars via SVG rectangles. Scales are created with d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, while d3.axisBottom and d3.axisLeft generate the corresponding tick marks and labels. The code includes React components for reusable axes and marks, though the primary implementation in index.html directly manipulates the SVG.

HHemanthh81
73% match
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Bbhavana.bayyapu@gmail.com
72% 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
72% match
Loading thumbnail…

Kankerscatter

A responsive scatterplot visualizes cancer prevalence (x-axis) and survival rates (y-axis) for 19 cancer types, with each type represented as two connected points (male and female). Users toggle between a full view of all cancers and a zoomed-in view focusing on rarer types. The visualization uses a D3.js SVG pipeline, with `d3.scale.linear` axes, `d3.svg.axis` for ticks, and `d3.tip` for interactive tooltips. Data comes from a local CSV (`cancerdata.csv`) and animations are handled through D3’s enter/exit transitions. The layout is generated from an SVG block with buttons controlling the zoom state.

AAndresAnayaIsaza
72% match