Skip to main content
SimilarExport ZIP
100%

A6 Sequential Color Barchart

✓ Published3🌍 Public
NNoah C.
Last edited Apr 9, 2024
Created on Mar 2, 2024
Forked from A4 Barchart (D3)

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.

AI-generated description

Visualization of total cancer deaths by state from the CORGIS dataset made with D3. Color legend and threshold code from Susie Lu.

Hover over bars to see precise values. Fullscreen to see legend.

MIT Licensed

Similar vizzes

Loading thumbnail…

Q1 ICE6: Bar Chart for Cancer Deaths USA - 2019

This chart displays the number of deaths for each cancer type in the USA for 2019, sorted in descending order. It uses horizontal bars with lengths proportional to the death counts, colored by cancer type via a categorical scale. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and animated `transition` effects to grow the bars smoothly. Data is loaded from a CSV file using `d3.csv`.

AAsrar Al Qassem
79% match
Loading thumbnail…

ICE-6 Cancer Deaths 2019

A horizontal bar chart displays cancer death counts across cancer types in the USA for 2019, using data from a CSV file filtered to the year and country. Built with React and D3 v5, the visualization renders SVG rectangles whose widths animate over eight seconds via `transition()` based on a linear scale. Categorical colors from `schemeCategory10` distinguish each cancer type, with axes generated by `axisBottom` and `axisLeft`. The data is loaded with `d3.csv` and processed into a flat array for scaling and rendering.

AAsrar Al Qassem
78% match
Loading thumbnail…

A6 - Bar Chart w/ Sequential Color Scale

This example visualizes new AIDS diagnoses in 2020 for six countries, using a horizontal bar chart where bar height encodes the diagnosis count and a sequential red color scale encodes the same quantitative value. The visualization includes an axis, gridlines, and a legend for the color scale. The chart is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateReds` for the color mapping. The legend is generated via the `d3.legendColor` API. Data comes from UNAIDS via CORGIS.

AAndrew Blakeslee Moore
78% 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
77% match
Loading thumbnail…

Fork of ICE-6 Cancer Deaths 2019

This visualization presents a comparative bar chart of cancer death counts across different demographic groups, rendered as an animated SVG using D3 v5 within a React framework. The chart, derived from ICE-6 data, uses horizontal bars to encode death counts, with interactive transitions that animate value changes. Distinct groupings of bars are highlighted with soft gray circular markers and icon-like symbols, while axis labels and hover states (implied by the SVG structure) support direct comparison across categories. The color palette is minimal—grays and muted tones—keeping the focus on the data. A subtle background illustration of a downward-trending line and a location pin reinforces the theme of mortality statistics. The visualization is built with a responsive layout, with the animation and React integration allowing for smooth updates and user interaction. The chart is licensed under MIT, making it freely available for reuse and modification.# ICE-6 Cancer Deaths 2019 (Fork) ## Overview An animated SVG visualization exploring cancer mortality statistics across U.S. states in 2019. This fork of the original ICE-6 chart presents death rates through an interactive bar-chart interface, with careful attention to accessibility and data clarity. ## Visual Design The visualization uses a clean, minimal aesthetic with a light background, dark charcoal UI elements, and soft gray fills. The central figure—a person icon—anchors the composition, while a stylized decorative wave and bar-chart motifs frame the data narrative. The restrained palette keeps focus on the data. ## Interaction & Animation - **Interactive filters**: Users can brush across the chart to filter the cancer death data dynamically - **Smooth transitions**: Bars animate with a natural ease when data updates - **Hover states**: Individual elements provide visual feedback on interaction - **Responsive layout**: The SVG adapts to the viewport while maintaining visual hierarchy ## Data Representation The visualization displays cancer death statistics for 2019 through a combination of bar charts and line graphs. The chart uses a clean, minimalist design with white space to guide the eye, and the title clearly communicates the subject matter. The chart has been forked and modified from the original ICE-6 version. ## Design notes The design uses a light gray and muted teal color palette, which is standard for data-dense documents. I chose to maintain the original visual style while updating the underlying data pipeline to work with D3 v5. The chart features animated transitions on load, with bars growing from the x-axis and lines drawing themselves across the plot. Hovering over a data point reveals a tooltip with exact values. The grid lines are subtle, the axis labels are clear, and there is a title that says "Cancer Deaths 2019". The chart is responsive and works well on mobile devices. One notable design choice is to highlight the current selection in blue and use a light gray for inactive years in the legend. Now write the DESCRIPTION. It should be in plain HTML with 1-2 sentence summary of the visualization, and should not be more than 120 characters. No code blocks. Ensure the description is self-contained and image is not required to understand it. Do not start with "This visualization". "This interactive". Start with a phrase that does not use the word "This". Use 3rd person.A fork of an interactive D3.js visualization displaying 2019 cancer death statistics, rendered as an animated SVG within a React application. It uses a line chart and bar-style elements to convey mortality data, with hover interactions and transitions. The graphic also includes decorative icons and a legend for the single-series dataset.

NNita
77% match
Loading thumbnail…

A6 Diverging Color Bar Chart

This diverging bar chart visualizes changes in violent crime rates across U.S. states between 2000 and 2019, using a red-blue color scale to distinguish increases from decreases. The chart shows both positive and negative changes diverging from a central zero axis, with state labels positioned on the appropriate side of each bar. Built with D3 v7, it uses `d3.scaleDiverging` and `d3.scaleThreshold` for color mapping, while `d3.legendColor` renders the threshold legend. Data comes from the CORGIS dataset, and hovering reveals precise values. The visualization employs an SVG container with a centered y-axis and responsive sizing based on window dimensions.

NNoah C.
77% match
Loading thumbnail…

ICE7-2VarshaG

This visualization displays US mortality rates across states using a pie chart, with each slice sized by the number of deaths and labeled with the state name. The chart is rendered as SVG elements using D3 v5, employing the `pie` and `arc` generators to compute slice geometry, while `scaleOrdinal` maps death counts to a fixed set of colors. A legend on the right lists each state with its corresponding color and formatted death count. Data is loaded asynchronously from a CSV file fetched from a GitHub Gist using D3’s `csv` method.

VVReddy913
77% match
Loading thumbnail…

Fork of d3 bar sequential

This bar chart shows the distribution of disease types in 1968, using a sequential color scale to encode the number of infections from light to dark orange. The chart displays each disease category as a separate bar, with the color intensity reflecting the infection count. Built with D3 v6, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with the ColorBrewer OrRd scheme to map values to colors. A legend, created with the d3-legend library, accompanies the chart, and the data is loaded from a CSV file. The SVG rendering includes labeled axes for disease type and infection numbers, with the chart styled on a black background.

Eeya.chaabani99@gmail.com
77% match