D3 Bar chart

100%

✓ Published1🌍 Public

Last edited Apr 5, 2020

Created on Apr 5, 2020

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.

AI-generated description

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

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

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

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

83% match

Loading thumbnail…

Make a bar chat d3js

This example shows a simple bar chart of COVID-19 total cases by geographic region, using data from a local CSV file. The bar heights represent case counts, with regions listed along the y-axis. It uses d3.scaleLinear for the x-axis domain, d3.scaleBand for the categorical y-axis, and renders SVG rectangles via d3.selectAll and data joins. The code imports specific functions from D3 v7 and the CSV loading is handled with d3.csv.

GGodspower Wodi

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

81% match

Loading thumbnail…

Bar Chart!

This example shows a horizontal bar chart of deaths across Canadian provinces and territories, ordered from highest to lowest. The chart uses a linear scale for the x-axis and a band scale for the y-axis, with bars rendered as SVG rectangles. D3 v5 functions such as `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` load the data and generate the axes, while a custom tick formatter shortens large numbers. The visualization reads from an external CSV file and includes a title and axis label.

Rrandom-program

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

80% match