Let's make a BarChart 2

100%

Let's make a BarChart 2

✓ Published1🌍 Public

Last edited Sep 11, 2020

Created on Sep 9, 2020

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.

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…

Stylized Bar Chart

This interactive visualization displays the cumulative count of cases over time as a horizontal bar chart, showing daily recorded values from March to April 2020. The chart uses React to render SVG elements, with d3.scaleBand for the categorical date axis and d3.scaleLinear for the value axis. Each bar includes a tooltip via SVG title elements, while axes are constructed using d3's tick generation through custom React components. The data comes from a local CSV file, parsed with d3.csv, and styled with a custom Poppins font.

PProger666

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…

Covid Cases Hover

A bar chart displays worldwide confirmed COVID-19 cases over time, with a tooltip revealing the exact date and case count when hovering over each bar. The visualization uses an SVG rendering with a black-to-orange hover effect, scaling the y-axis linearly and the x-axis with a band scale. It employs d3.v5, the d3.tip library for interactive tooltips, and loads data from a CSV file containing daily global case totals. Axis labels include "Date" and "Number of Confirmed Cases," styled with IBM Plex fonts.

SSarahKiyani

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

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

80% match

Loading thumbnail…

Making a Bar Chart

This animated scatter plot compares COVID-19 vaccination rates (blue) against reported case counts (gray) in the US, using dual y-axes with proportional data drawn from CDC vaccination counts and NYT 7-day average case data. Built with D3 v5, the chart uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `transition` to animate points as they grow and reposition over time. Interactive dropdown menus, implemented via a reusable `menu` component, allow switching between partial and fully vaccinated metrics, while annotations highlight key dates and case reduction percentages.

Xxiaojingwu138

80% match

Loading thumbnail…

Covid Cases Hover

A bar chart displays daily COVID-19 cases in New York City from February to May 2020, using a black-and-orange color scheme. The chart uses D3's `scaleBand` for the date axis and `scaleLinear` for the case count axis, rendering SVG rectangles. Hovering over a bar triggers a custom tooltip via the `d3.tip` library, showing the exact date and case number. Data from NYC Health data is loaded from a CSV file.

Cclaudiatomateo

80% match