Charts for Fun

100%

Charts for Fun

✓ Published1🌍 Public

Last edited Apr 5, 2020

Created on Apr 5, 2020

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

LINE CHART

This line chart displays the number of confirmed COVID-19 cases in various Chinese provinces on January 21st, based on data from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.line with curveBasis to create a smooth, interpolated path. The SVG rendering includes axis labels, a title, and a light blue stroke for the line.

FFadziMandondo

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

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

88% match

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This visualization shows the cumulative number of COVID-19 cases across Chinese provinces over time, using a streamgraph where each colored band represents a province's reported case count. The data, sourced from daily JSON records, is interpolated to fill gaps between dates. Built with D3 v4, it uses `d3.stack` with the `stackOffsetWiggle` and `stackOrderInsideOut` methods, alongside `d3.area` with `curveBasis`. Labels are positioned via the `d3-area-label` library, while axes and styling are handled through standard D3 scales and SVG elements.

ZZhi Guangda

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

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

82% match