Skip to main content
SimilarExport ZIP
100%

Infection Type Chart

✓ Published0🌍 Public
Aatrixx
Last edited Apr 17, 2020
Created on Apr 17, 2020

This example shows the number of COVID-19 infection cases across Chinese provinces, stacked by transmission type (PublicTransit, Relative, Social, Unknown). Users can toggle between absolute counts and percentage-based views. The visualization uses d3.layout.stack and d3.svg.axis to render animated, stacked bar charts in SVG. A radio button triggers transitions between count and percent modes, while a custom tooltip and legend provide context. Data comes from a CSV file listing cases per province and transmission category.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Infection Type Chart

This stacked bar chart displays COVID-19 infection cases across Chinese provinces, broken down by transmission type: public transit, relative, social, and unknown. The visualization uses d3.layout.stack to stack the data series, with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. A form allows switching between absolute case counts and percentage-normalized views via stack.offset("expand"), with smooth transitions on the bars and axis. Hovering highlights individual segments using SVG opacity changes, and a custom legend is drawn manually.

LLex
95% match
Loading thumbnail…

Infection Type Chart

A stacked bar chart displays infection case counts across Chinese provinces, segmented by transmission type: Travel, Relative, Social, and Unknown. Users toggle between absolute counts and percentage-normalized views via radio buttons, triggering animated transitions. The visualization uses d3.layout.stack for stacking, d3.scale.ordinal for the x-axis, and SVG rectangles with smooth transitions. Data comes from data3.csv, sorted alphabetically by province, with a color-coded legend and hover tooltips for additional detail.

Kkalyanreddy997
93% match
Loading thumbnail…

Infection Type Chart

A stacked bar chart displays infection case counts across Chinese provinces, segmented by transmission type: Travel, Relative, Social, and Unknown. Users toggle between absolute counts and percentage-normalized views via radio buttons, triggering animated transitions. The visualization uses d3.layout.stack for stacking, d3.scale.ordinal for the x-axis, and SVG rectangles with smooth transitions. Data comes from data3.csv, sorted alphabetically by province, with a color-coded legend and hover tooltips for additional detail.

Kkalyanreddy997
93% match
Loading thumbnail…

Fork of Infection Type Chart

This fork of the Infection Type Chart visualizes stacked bar counts of infection types—Unknown, Social, Relative, Travel—across Chinese provinces, with an animated toggle between absolute case numbers and percentage shares. Using D3 v3 with SVG, it employs `d3.layout.stack` to arrange the series and transitions to update bar geometry and axes on user input. The chart sorts provinces alphabetically, rotates x-axis labels, and includes a hand-built legend and hover tooltip styling from `styles.css`.

NNarayana Reddy
85% match
Loading thumbnail…

Charts for Fun

This bar chart visualization displays the number of confirmed COVID-19 cases across Chinese provinces as of January 21, 2020. The chart uses a circular mark to represent each province's confirmed case count, with the y-axis scaled linearly and the x-axis using band scaling for categorical province names. The visualization demonstrates custom axis styling and labels using D3's axis functions, with data loaded from a local CSV file. The code uses D3 v5, specifically `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading. The SVG rendering includes bold, italic, and underlined title text.

FFadziMandondo
78% match
Loading thumbnail…

Untitled

This bar chart displays the number of confirmed COVID-19 cases across several Chinese provinces, using data from a local CSV file. The visualization uses D3.js v4 to map provinces on the x-axis and case counts on the y-axis, rendering bars in SVG with steelblue fill. The chart includes axes with ticks, axis labels, and a title, all positioned within an SVG canvas. The code constructs scales with `d3.scaleBand` and `d3.scaleLinear` and uses `d3.axisBottom` and `d3.axisLeft` for tick generation, with data loaded via `d3.csv`.

Vvine-web
76% match
Loading thumbnail…

Charts for Fun

This example creates a bar chart from a CSV file, displaying confirmed COVID-19 cases across Chinese provinces on January 21, 2020. The visualization uses D3 v5’s `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to map provinces to the x-axis and case counts to the y-axis. Red, semi-transparent circles are drawn with `.append("circle")`, and custom titles and axis labels are added as SVG text elements. The underlying data is loaded using `d3.csv`.

FFadziMandondo
75% match
Loading thumbnail…

Travel HuBei Distribution Chart

This chart displays the distribution of travel history among COVID-19 cases across Chinese provinces, using stacked horizontal bars to compare counts of patients with and without travel history. Users can toggle between raw counts and percentage-normalized views, which triggers animated transitions that rescale the axes and recalculate bar heights. The visualization is built with D3.js version 3.5.6, utilizing the `d3.layout.stack` API for stacking, `d3.svg.axis` for axes, and SVG for rendering the interactive chart.

LLex
75% match