Skip to main content
SimilarExport ZIP
100%

Travel HuBei Distribution Chart

✓ Published0🌍 Public
LLex
Last edited Apr 7, 2020
Created on Mar 31, 2020

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.

AI-generated description
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
78% 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
76% 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
76% match
Loading thumbnail…

Infection Type Chart

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.

Aatrixx
75% 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
74% match
Loading thumbnail…

D3 Bar chart

This bar chart visualizes the confirmed COVID-19 case counts across several Chinese provinces, using data from a local CSV file. It employs an SVG rendering approach with D3 v4's `scaleBand` for the categorical province axis and `scaleLinear` for the continuous case count axis. The chart displays horizontal bars whose heights are proportional to the number of cases, with axes labeled and styled using `d3.axisBottom` and `d3.axisLeft`. The file is a static, non-interactive visualization generated entirely through D3's imperative API.

Vvine-web
73% match
Loading thumbnail…

Persons of Concern StreamGraph by Origin

This streamgraph visualizes the number of confirmed COVID-19 cases in China’s provinces and autonomous regions over time, using a wiggle-offset stacked area chart. Data is loaded from a local JSON file, interpolated for daily values, and rendered as SVG paths using the D3.js stack, area, and curveBasis APIs, with labels positioned by the d3-area-label library. The visualization highlights the rise and fall of case counts across regions, with each colored band representing a province’s contribution to the total.

Ppgy-iacas
73% match
Loading thumbnail…

Persons of Concern StreamGraph by Origin

A streamgraph shows the number of COVID-19 cases across Chinese provinces over time. The visualization uses D3.js v4 with a stacked area chart, employing `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to create the flowing shape. Data is interpolated between recorded dates using a custom bisector function. Labels are positioned with the `d3-area-label` library, and the chart renders as an SVG with hover interactions that highlight individual provinces. The underlying data comes from a JSON file tracking daily case counts per region.

Ppgy-iacas
73% match