ICE_6

100%

✓ Published0🌍 Public

Last edited Mar 5, 2022

Created on Mar 4, 2022

Forked from ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the high stock prices for United Health Care across ten dates, rendered as a horizontal bar chart using SVG. React manages the component state, while D3 v5’s `csv` loads the data, and `scaleBand` and `scaleLinear` map dates to y-positions and high prices to bar widths. The chart includes axis ticks and gridlines, with data sourced from a GitHub-hosted CSV file.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE-6

This bar chart visualizes Netflix stock price data, showing the High values for a selection of dates. The chart uses a horizontal bar layout, with dates on the y-axis and price on the x-axis. Built with React and D3 v5, it loads CSV data via `d3.csv` and renders SVG rectangles positioned by `scaleBand` and `scaleLinear`. The grid lines and axis ticks are generated using D3’s scale methods.

AAkrutiKhurana2103

84% match

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

83% match

Loading thumbnail…

ICE-6

This visualization displays the top 20 companies by value using a horizontal bar chart, with company names on the y-axis and numerical values on the x-axis. It loads data from a CSV file via `d3.csv` and renders SVG elements using React. The chart leverages `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick lines and labels. Data is transformed with a row function that ensures value fields are parsed correctly before rendering red rectangular bars.

RRupeshGandham

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

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

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

81% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

80% match

Loading thumbnail…

ICE-6

This horizontal bar chart visualizes the relationship between age and BMI for insured individuals, displaying the first 15 records from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the age categories on the y-axis, and `d3.scaleLinear` for the BMI values on the x-axis. The chart renders as an SVG, with red gridlines and text labels generated via D3’s axis utilities.

Vvagdevi-369

80% match