Bar chart

100%

✓ Published0🌍 Public

Last edited May 18, 2022

Created on May 18, 2022

This example shows a bar chart of COVID-19 cases per one million people by country, fetching live data from the disease.sh API. The visualization uses React for component structure and D3.js utilities, specifically `d3.max` and `d3.scaleLinear`, to map data values to pixel heights within an SVG rendered via React. The `useEffect` hook triggers the chart-building function, while the fetched JSON populates the state that drives the bars.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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…

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

84% match

Loading thumbnail…

bar graph

This bar graph displays the total number of COVID-19 cases for twelve countries, ranked along a horizontal axis with country names on the vertical axis. The chart uses the D3 library (v6) with an SVG rendering approach in a React framework. It employs `scaleLinear` and `scaleBand` for the scales, `axisBottom` and `axisLeft` for the axes, and loads data from a CSV file. The bars are colored pink via CSS.

Rrajan1508

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

82% 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…

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

This interactive COVID-19 dashboard displays country-level statistics using horizontal bars. Users select an attribute from a dropdown, and React state updates the chart to show that metric. Driven by a CSV of global pandemic data, the visualization renders bars with SVG rectangles via React components, using D3 scales (`scaleBand`, `scaleLinear`) and axes (`AxisBottom`, `AxisLeft`) to position the data. Tooltips appear on hover through SVG `<title>` elements.

WW9183907

81% match

Loading thumbnail…

3D chart

This 3D bar chart visualizes the top 10 countries most affected by COVID-19, with each country’s total case count represented as a vertical bar. The example uses D3 v5 alongside the d3-3d and d3-x3d libraries to generate the interactive scene, which is rendered through X3DOM in the browser. Data is loaded asynchronously from a CSV file, then parsed and passed to a `d3.x3d.chart.barChartMultiSeries()` component attached to a chart holder div. The page includes custom CSS styling for the heading and body layout.

Bbhargavarathod

81% match