Fork of Pink Face

100%

Fork of Pink Face

✓ Published0🌍 Public

Last edited Mar 15, 2024

Created on Mar 15, 2024

This example shows a bar chart of randomly selected cancer types and their death counts for the USA, titled “Cancer Deaths in the USA (Random Selection).” It loads a CSV dataset via `d3.csv`, filters it to USA records, and picks three random column names to build the dataset. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and renders SVG rectangles as bars, with `d3.axisBottom` and `d3.axisLeft` for the axes.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

81% match

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

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

76% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot animates through cancer death rates in the USA by education level, cycling between Bacherlors, Masters, PHD, and Jobs categories. It uses a reusable D3 chart function with `scaleLinear`, `axisBottom`, `axisLeft`, and `symbol` to render differently shaped points per data type. The visualization transitions every two seconds, updating the dataset and title while preserving the SVG axes. Data comes from a Cancer in USA CSV file, loaded via `d3.csv`, with the chart redrawn using the d3 v6 selection and transition APIs.

Vvinodreddysagam929@gmail.com

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

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

75% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for ten countries, sorted from highest (USA) to lowest (Argentina). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Custom axis formatting converts large numbers using the `format` function, replacing 'G' with 'B' for billions. The bars and tick labels are styled with linear gradients defined in SVG defs, while the x-axis includes a custom label and tick marks that extend across the plot area. Data comes from a CSV file loaded via `d3.csv`.

Ttolik518

74% match

Loading thumbnail…

A6 Sequential Color Barchart

This example visualizes total cancer deaths by U.S. state using a sequential color barchart. The bars encode the death count by height while their color reflects the death rate per 100,000 people, ranging from light to dark red. Hovering over a bar reveals precise values via a native title tooltip. The chart is built with D3 v7, using `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.scaleSequential` with `d3.interpolateReds` for color, and the `d3-legend` plugin to display the color threshold legend. Data comes from the CORGIS dataset, rendered as SVG.

NNoah C.

74% match