Skip to main content
SimilarExport ZIP
100%

Making a bar chart!

✓ Published0🌍 Public
MMichael Todd
Last edited May 19, 2020
Created on May 19, 2020

This chart displays the confirmed COVID-19 cases for the US and Russia using horizontal bars. The population values are read from a CSV file and rendered as an SVG. The code uses D3’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` functions within the d3.v5 framework to map the data to bar lengths and position the axes with margins. The bars are styled with a steelblue fill.

AI-generated description
MIT Licensed

Similar vizzes

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

Bar Chart

This bar chart visualizes the daily confirmed COVID-19 cases across eight countries from January to May 2020. The current configuration displays the US case count on the x-axis and dates on the y-axis, with each bar’s length representing the cumulative total. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render the SVG, with configurable axis labels and grid lines.

SSarahKiyani
82% match
Loading thumbnail…

data visualization project

This example presents a bar chart of COVID-19 total cases by country, using data loaded from a remote CSV file. The chart is rendered as an SVG element using D3 v7, with a rotated x-axis to accommodate country labels and a linear y-axis for case counts. The code demonstrates D3’s scaleBand and scaleLinear for axis scaling, and uses the `join` operator to efficiently create bar rectangles, with a steelblue fill for the bars.

Bbudalavijay2001@gmail.com
80% match
Loading thumbnail…

Let's make a face with D3.js!

This example visualizes the total number of COVID-19 infections per country using a simple bar chart. It loads data from a CSV file containing country names and case counts, then displays the values as vertical bars on an SVG canvas. The chart is built with D3.js version 5, using the `d3.select` and `d3.csv` APIs to fetch and parse the data, while the SVG element is sized directly from its width and height attributes. The bars represent the relative infection totals, with the US showing the largest value.

Jjorgebotas
80% match
Loading thumbnail…

Trabajo Final Covid19

This bar chart displays confirmed COVID-19 case counts for ten countries, with the United States leading at over one million cases. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map case numbers to horizontal bars and country names to vertical positions, rendering as SVG. Axes are generated with `axisBottom` and `axisLeft`, with tick formatting via `format('.3s')`. Data is loaded from a CSV file, and styling is applied through external CSS, including green-filled rectangles and custom title labels.

Ppablocenfo
79% match
Loading thumbnail…

Customized bar chart

This example presents a customized bar chart of COVID-19 case counts by U.S. jurisdiction, using data from August 2020. It displays the top ten locations ordered along the vertical axis, with horizontal bar lengths encoding total cases. The visualization is built with React and D3 v5, leveraging `scaleBand` for categorical positioning, `scaleLinear` for quantitative scaling, and `csv` for data loading. SVG rendering produces the bars, axes, and tick labels, with D3’s `format` function abbreviating large numbers (e.g., converting billions to “B”).

Rrsulli4
79% match
Loading thumbnail…

Making a bar chart

This example displays a horizontal bar chart of country populations, sourced from a CSV file and rendered as an SVG. The D3.js library maps population values to bar lengths using a linear scale, while country names define the categorical axis. Explicitly coded axis generators, `axisLeft` and `axisBottom`, place labels for interpretation. The bars are drawn by appending `rect` elements, whose width is derived from the scaled population data, and the visualization is styled with steelblue fills, as seen in the accompanying CSS.

SSamuel Elbaz
79% 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
79% match