D3 Bar chart

100%

✓ Published0🌍 Public

Last edited Apr 5, 2020

Created on Apr 5, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

D3 Bar chart

This example displays a bar chart of confirmed COVID-19 cases per province, using a vertical bar for each region ordered along the x-axis. A D3 v4 script loads data from a CSV file and maps the province names and confirmed counts to a band scale and a linear scale, respectively. The bars are rendered as SVG rectangles, with axes added via `d3.axisBottom` and `d3.axisLeft`, within a fixed 600×600 pixel SVG canvas.

Vvine-web

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

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

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

82% match

Loading thumbnail…

Making bar chart

A horizontal bar chart displays COVID-19 case counts per country, with bars ordered by the data’s CSV order. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisLeft`/`axisBottom` for gridlines. Data is loaded via `d3.csv` and rendered as SVG rectangles with a steelblue fill, while a clickable “Hello” button triggers a browser alert.

Llori99-data

81% match

Loading thumbnail…

covid-19 bar chart

This bar chart displays total COVID-19 case counts for different countries, with bars colored using a categorical palette and labeled with case numbers. It shows tooltips on hover containing country and total case information. The visualization uses D3 v7 to build the SVG, employing `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for bar colors. The underlying data is embedded directly in the source code.

HHarinathChakali33@gmail.com

81% match