Fork of ice-6

100%

✓ Published0🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

Forked from ice-6

A horizontal bar chart shows the number of hospitalized confirmed COVID-19 patients for the top 20 counties, fetched from a CSV file via `d3.csv`. The chart uses React state and effects to load data, then renders SVG `rect` elements scaled with `d3.scaleBand` for counties and `d3.scaleLinear` for patient counts. Orange gridlines and tick labels are drawn manually, with axes positioned using SVG transforms.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ice-6

This example shows the number of hospitalized COVID-confirmed patients per county as a horizontal bar chart, with bars colored orange against a plain SVG backdrop and an axis showing tick values. It uses React with D3 v5, employing `scaleBand` for the county categories and `scaleLinear` for the patient counts, while `csv` loads data from a remote GitHub gist. The visualization renders as raw SVG elements, with gridlines and county labels manually drawn via `select` and standard SVG components.

Hhm0421

91% match

Loading thumbnail…

ice-6

This visualization displays the number of hospitalized confirmed COVID-19 patients for each county, using a horizontal bar chart with an orange grid. Built with React and D3 v5, it loads CSV data via `d3.csv`, filters to the top 20 counties, and renders SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Tick labels and grid lines are generated from `xScale.ticks()`. The chart updates dynamically when the data loads, showing the title in magenta above the plot.

DDineshK2602

91% match

Loading thumbnail…

Fork of ICE-6

This visualization displays the relationship between age and BMI for insured individuals, showing a bar chart of hospitalized COVID-confirmed patients per county. The data comes from a CSV file loaded via `d3.csv`, with the first fifteen records rendered as horizontal bars. The chart uses React for component management and D3 v5’s `scaleBand`, `scaleLinear`, and `max` functions to map county names and patient counts. The SVG output includes manually drawn axes with tick marks and labels, while the grid lines are styled in red.

Hhm0421

89% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha

86% match

Loading thumbnail…

Fork of Fork of ICE-6

This horizontal bar chart displays the relationship between county-level COVID-19 hospitalization counts and patient BMI among insured individuals, using the first 15 records from a Walmart-related CSV dataset. The visualization is built with React and D3 v5, using `d3.csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and SVG `<rect>` elements for bars. Axes are manually generated with tick loops, and the chart is rendered in the browser from a bundled `bundle.js` file.

Hhm0421

86% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays a horizontal bar chart of COVID-19 case counts for the top 20 countries, using a bar length to encode population values. The chart is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` define the y- and x-axes, and React renders SVG `rect` marks for each bar with gridlines and tick labels. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to the case count column.

Bblikitha

86% match

Loading thumbnail…

CSCE 5320 ICE-6

This example shows the relationship between hospitalized COVID suspected and confirmed patients across 15 counties, using a horizontal bar chart rendered as SVG. Each bar’s length encodes the count of hospitalized suspected patients per county, with axes and tick labels generated manually. The code uses React for component state and lifecycle, alongside D3 v5 functions including `csv`, `scaleBand`, `scaleLinear`, and `max`. Data is loaded from a GitHub gist URL and sliced to the first 15 rows, with bars drawn using SVG `<rect>` elements and red gridlines.

DDineshK2602

85% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes the top 20 countries by confirmed COVID-19 cases, using horizontal bars to compare population metrics. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `d3.scaleBand`/`d3.scaleLinear` for axis scaling. SVG elements are rendered declaratively through React, with `rect` marks for bars and text grids for tick labels, displaying both chart axes and data directly from the raw CSV file.

AArefa Patwary

85% match