Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
SSanchay
Last edited Mar 5, 2022
Created on Mar 1, 2022
Forked from HTML Starter

This example visualizes COVID-19 vaccination rates across U.S. states as of February 28, 2022, using a horizontal bar chart. The code employs React for component state and rendering, with D3 v5’s `csv` to load data, `scaleBand` for categorical y-positions, and `scaleLinear` for the x-axis. SVG rectangles represent each state’s fully vaccinated population, while axis ticks are generated manually using `xScale.ticks()` and styled with blue gridlines. The visualization updates reactively from the fetched dataset.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Chart

This D3.js bar chart visualizes COVID-19 case totals for fifteen U.S. states, sourced from a CSV file fetched via `d3.csv`. The horizontal bars, rendered as SVG rectangles, are scaled with `d3.scaleBand` and `d3.scaleLinear` based on the maximum case count. The chart includes gridlines and axis tick labels generated through custom mapping functions, and is built within a React component using `useState` and `useEffect` hooks, with styling applied via inline attributes.

Ggayuvurukuti@gmail.com
86% match
Loading thumbnail…

ICE-6 DV

This example displays a horizontal bar chart comparing the population of the first 20 U.S. states from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` for the y-axis categories, and `scaleLinear` for the x-axis values. The SVG rendering includes custom axis ticks and blue grid lines, with `rect` elements representing each state’s population.

Ssowmyanagula@my.unt.edu
86% match
Loading thumbnail…

ICE-6

This example visualizes the relationship between age and BMI in insured individuals using a horizontal bar chart, displaying the top 15 counties by the number of hospitalized COVID-confirmed patients. The chart uses an SVG rendering with React for state management and D3 v5 for scales, axes, and data loading. Specifically, it employs `scaleBand` for the y-axis counties and `scaleLinear` for the x-axis patient counts, with data fetched via `d3.csv` from a GitHub raw URL. The bars are drawn as SVG `<rect>` elements, and custom tick labels replace traditional axes for clarity.

DDineshK2602
85% match
Loading thumbnail…

ICE 6

This visualization displays the first 20 countries from a COVID-19 dataset as a horizontal bar chart, with bar lengths representing confirmed cases on January 28, 2020. The React component loads data via d3.csv and renders SVG rectangles using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Grid lines and tick labels are manually generated from the scales, with a blue stroke for vertical lines. The chart updates once data arrives, showing a loading message beforehand.

AAmar09nath
84% match
Loading thumbnail…

ICE -6

This visualization displays COVID-19 data for ten countries, using a horizontal bar chart where bar length represents each country's population based on latitude values from the CSV data source. The React application uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and renders SVG rectangles with orange stroke styling. D3's csv parser loads the external data, while d3.max computes the domain for the linear scale, and tick marks are generated programmatically with custom grid lines.

GGARIDIDEEKSHITHREDDY
84% match
Loading thumbnail…

ICE - 6 Bar Graph

The visualization displays a bar chart comparing the population of U.S. states, sourced from a CSV file. It uses React with D3 v5 to render SVG bars, where each bar’s height and color vary by population value. The code employs `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` to generate the scales, and formats population values by stripping commas.

MM
83% match
Loading thumbnail…

ICE-6

This visualization shows the relationship between Country/Region and Confirmed COVID-19 cases for the first 15 entries in a dataset, rendered as a horizontal bar chart using React and D3 v5. The code uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent the bars, with red gridlines and text labels drawn via D3 selections. The chart is embedded in a React component with a blue title, and data originates from a GitHub gist URL.

Hhm0421
83% match
Loading thumbnail…

ICE_6

This horizontal bar chart displays population estimates for a subset of US states using React and D3 v5. The visualization maps state names to the y-axis and population values to scaled bar widths on the x-axis. Population data is loaded from a CSV file via `d3.csv`, parsed with `parseInt`, and sliced to 11 records. The chart uses `d3.scaleBand` for categorical y-positions and `d3.scaleLinear` for quantitative scaling, with SVG `rect` marks for bars and manual axis tick rendering via `xScale.ticks()`.

Cchilukuritagore1427@gmail.com
83% match