Skip to main content
SimilarExport ZIP
100%

data visualization project

✓ Published0🌍 Public
Bbudalavijay2001@gmail.com
Last edited Apr 23, 2024
Created on Apr 18, 2024
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

data visualization stacked bar chart

This example visualizes COVID-19 total cases by country, grouped into stacked horizontal bars organized by continent. The chart uses D3 v7’s `d3.csv` to load remote data, `d3.groups` to structure the data hierarchically, and `d3.scaleBand`/`d3.scaleLinear` with SVG rendering. Each country is a rectangle colored via `d3.schemeSet3`, with rotated axis labels for readability.

Bbudalavijay2001@gmail.com
89% match
Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

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

Untitled

This example presents a bar chart of total COVID-19 cases by location, using data from a remote CSV file. The chart uses an SVG rendering with a band scale for the categorical x-axis and a linear scale for the numeric y-axis, both configured with d3.scaleBand and d3.scaleLinear. Bars are drawn as SVG rect elements with a fixed fill color, and the x-axis labels are rotated for readability. The code loads data via d3.csv and applies margins to position the visualization.

Fferneyhoughedward@gmail.com
86% match
Loading thumbnail…

covid-19 bar chart

This bar chart displays total COVID-19 case counts for different countries, with bars colored using a categorical palette and labeled with case numbers. It shows tooltips on hover containing country and total case information. The visualization uses D3 v7 to build the SVG, employing `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for bar colors. The underlying data is embedded directly in the source code.

HHarinathChakali33@gmail.com
85% match
Loading thumbnail…

Covid Project Viz 2

This example visualizes active, recovered, and total COVID-19 cases across fifteen countries using overlapping horizontal bars. The visualization renders as an SVG via React, with red, blue, and green rectangles representing total vaccinations, total cases, and total tests respectively. It loads data from a remote CSV file using `d3.csv` and scales the bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while drawing gridlines and tick labels manually. The code leverages D3 v5 alongside React state and effects for data fetching.

SSushmaNamidi@my.unt.edu
85% match
Loading thumbnail…

Covid-19 Data Visualization

This visualization displays total COVID-19 case counts for fourteen countries using a bar chart. Each bar’s height and value labels are mapped through d3.scaleBand and d3.scaleLinear, while d3.axisBottom and d3.axisLeft render the axes. Tooltips appear via mouseover events, and the SVG rendering includes a title and case number annotations. The data is embedded in the code as a static array, with cases formatted using the toLocaleString method.

AAbdul Kareem
85% match
Loading thumbnail…

data visualization bubble chart

This example visualizes COVID-19 cases, deaths, and population across countries using a bubble chart. Each bubble’s position maps total cases on the x-axis and total deaths on the y-axis, while bubble radius encodes population via a square-root scale. The chart is rendered in SVG using D3 v7, with linear scales, axis generators, and a legend showing population magnitude. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

Bbudalavijay2001@gmail.com
85% match