Skip to main content
SimilarExport ZIP
100%

Province Data Compare

✓ Published1🌍 Public
LLex
Last edited Apr 11, 2020
Created on Apr 11, 2020

The visualization compares case numbers across Chinese provinces using a grouped bar chart, with bars representing "OurData" and "ActrualData" from a JSON dataset. It renders SVG bars that animate upward on load, while axes and legend fade in sequentially. Built with D3 v3, it uses ordinal scales for categorical positioning, linear scaling for values, and transitions to animate bar heights and element opacity. Hover interactions darken bar colors, and the chart includes rotated x-axis labels for province names.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

Fork of Untitled

This radial bar chart compares data across Chinese provinces, plotting two series per category as concentric arcs. The green outer bars show “OurData” values, while red inner bars represent “ActualData” for each province, with labels rotated around the circle for readability. Built with D3 v4, it uses `d3.scaleBand` for the angular axis, `d3.scaleRadial` for the radius, and `d3.arc` to generate the SVG paths. The data originates from a local file with province names and paired value/rate fields.

NNarayana Reddy
77% 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
77% match
Loading thumbnail…

Line

This visualization displays the progression of COVID-19 cases across multiple Chinese provinces from January to February 2020. It animates line curves for each province, showing the count of existing confirmed cases over time, with provinces added sequentially. The code uses D3 v6 with a time-scale for the x-axis and a reversed linear scale for the y-axis, rendering SVG paths with cardinal spline curves. Data is loaded from a CSV file, and each province’s line is animated into place using d3 transitions over two seconds.

Vvivianaaai@qq.com
77% match
Loading thumbnail…

Making a bar chart

This bar chart displays the number of confirmed cases across nine Chinese provinces, using horizontal bars sorted by province name on the y-axis and a linear scale for case counts on the x-axis. The visualization is rendered as an SVG using D3 v5, with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart and axes. The data is loaded from a local CSV file via `d3.csv`, and the bars are drawn as `rect` elements with a steelblue fill. The example highlights axis customization and margin-based layout for a clean, labeled presentation.

FFadziMandondo
76% match
Loading thumbnail…

bar chart example

This example presents a horizontal bar chart comparing the populations of ten Chinese provinces, with populations listed in the data.csv file and scaled by a factor of 1000. The visualization uses D3.js v5 within a React framework, rendering to an SVG element. The code constructs linear and band scales, and employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, with CSS styling for the bar fill color and text size.

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

Gender Distribution Chart

This interactive stacked bar chart visualizes gender distribution across Chinese provinces, with controls to toggle between raw counts and percentage-of-total values. The visualization uses D3.js v3, loading province and gender data from CSV files and animating transitions between the two display modes via `transition()` calls. The chart resets the stack layout's offset between "zero" and "expand" to switch counting methods, while axis tick formats change accordingly. A custom legend maps categorical colors to gender segments, and hover effects reduce rectangle opacity for emphasis.

LLex
75% match