Skip to main content
SimilarExport ZIP
100%

Making bar chart

✓ Published0🌍 Public
Llori99-data
Last edited Mar 19, 2020
Created on Mar 19, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on recent COVID-19 case counts, with countries on the y-axis and today’s new cases on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart with custom tick formatting. Data is loaded asynchronously from a remote API via `d3.json`, and each bar’s length is scaled to the maximum case value. The chart includes axis labels and a title, with axes customized to remove domain lines.

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

<iframe width="560" height="292" src="https://vizhub.com/blikitha/f111e8fa345c43fa9a6e6d45227a5024?mode=embed" title="Untitled" frameborder="0" ></iframe>

This example presents a horizontal bar chart that displays the top 20 countries by reported COVID-19 cases, based on data from a CSV file loaded via `d3.csv`. The visualization uses React to manage component state and render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and case counts to pixel positions. Each rectangle’s width encodes the case count, and the chart includes a blue gridline for the x-axis ticks.

Bblikitha
84% match
Loading thumbnail…

HTML Starter

This example demonstrates a bar chart visualization of COVID-19 data, showing confirmed cases, recoveries, and deaths across multiple countries on a specific date. The chart uses the D3.js library, specifically `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering for the bars. The data is loaded from a CSV file containing country-level pandemic statistics. The visualization includes axes with labels and interactive mouseover/mouseout events, though the actual data displayed focuses on the initial case counts from January 2020.

SSarahKiyani
84% match
Loading thumbnail…

Let's make a BarChart 2

This example displays a time-series bar chart of daily COVID-19 case counts from August to September 2020. The bars are animated into view, and hovering over a bar changes its opacity and reveals a tooltip. The visualization uses D3 v6 to parse the CSV data, map dates to the x-axis via `d3.scaleTime` and case numbers to the y-axis with `d3.scaleLinear`, and render the bars as SVG rectangles. The axes are generated using `d3.axisLeft` and `d3.axisBottom`, while mouse interactions rely on D3’s selection and transition APIs.

SST-commits
84% match
Loading thumbnail…

Making a bar chart!

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.

MMichael Todd
84% match
Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays COVID-19 active case counts for different countries, with values shown in thousands. The visualization uses React hooks to load and manage CSV data from a GitHub gist, while D3 v5 APIs handle the rendering. It employs `scaleBand` for the categorical y-axis representing countries and `scaleLinear` for the numeric x-axis showing case counts. The SVG output includes red rectangular bars and custom axes, with gridlines and tick labels formatted using D3’s axis utilities.

Mmanojgne
83% match