Fork of ICE-6

100%

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 22, 2023

Forked from Fork of Fork of ICE-6 Bar Graph

This is a bar chart of supermarket sales data, showing the unit price for the first ten product lines from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles for each bar. Data is loaded asynchronously via `d3.csv` and limited to ten entries before being displayed. The chart includes custom axes with gridlines and labels, all rendered as SVG elements within a React component.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6

This visualization presents a horizontal bar chart displaying the "Unitprice" for the top 10 records from a Supermarket Sales CSV dataset. Each bar represents a product line, with its length proportional to the unit price. The chart is built using React and D3 v5, leveraging `d3.csv` for data loading, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis price scale. The SVG rendering includes grid lines and axis labels, with blue bars drawn using SVG rectangles within a transformed group.

LLakshmiManjushaReddyYarreddu

93% match

Loading thumbnail…

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

This bar chart displays supermarket sales data, showing the unit price for different product lines. Built with React and D3 v5, it renders as an SVG with vertical grid lines and horizontal bars. The visualization uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and loads data from a CSV file via `d3.csv`. React’s state management handles the asynchronous data loading and updates the chart accordingly.

SSreejaBellamkonda

92% match

Loading thumbnail…

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

A horizontal bar chart displays revenue per month for twelve products from a supermarket dataset, loaded via `d3.csv` from a GitHub Gist. React state and hooks manage the asynchronous data loading, while D3’s `scaleBand` and `scaleLinear` map product categories and revenue values to SVG rectangles. Axes and gridlines are manually rendered with D3’s `ticks` and positioned using SVG transforms, with React generating the markup for each element.

Ddivyakota99

88% match

Loading thumbnail…

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

This interactive bar chart visualizes product sales across 15 countries, encoding country names on the y-axis and sales values on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, rendered as SVG rectangles. Data loads from a CSV via `d3.csv`, with grid lines drawn from `xScale.ticks()`. The chart updates reactively using React state hooks, combining D3’s scaling and formatting utilities with React’s declarative component structure.

SSaiipriiya

86% match

Loading thumbnail…

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

This bar chart displays sales data for the top 11 best-selling books, sourced from a CSV file. The visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering marks as SVG rectangles within a React `<svg>` element. The code imports specific D3 functions like `select`, `csv`, and `scaleLinear`, and employs React's `useState` and `useEffect` hooks to load and process the data before rendering.

RRohith arabati

86% match

Loading thumbnail…

ICE-6

This example renders a minimalist bar chart of grocery product profits using React and D3 v5. It loads CSV data via `d3.csv` and displays only the first two records. The visualization uses `scaleBand` for the y-axis positions and `scaleLinear` for x-axis widths, with profit values mapped to rectangle widths inside an SVG. The chart intentionally lacks axes or labels, and the data comes from a GitHub-hosted grocery dataset rather than the UN population data mentioned in the README.

NNaveed945

85% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This example displays a horizontal bar chart comparing monthly basic Amazon costs across different countries, using the first twelve rows of a CSV dataset. The visualization renders SVG elements through React components, with D3 v5 handling data loading via `d3.csv`, scale construction using `scaleBand` and `scaleLinear`, and axis generation through `axisBottom` and `axisLeft`. The chart includes red gridlines with tick labels, country names along the y-axis, and colored rectangles representing costs. Data updates occur after the CSV loads, triggering React state changes that re-render the SVG. The visualization appears within a React app, with D3’s `max` function setting the x-axis domain.

Aajaysonu

85% match

Loading thumbnail…

Fork of ICE-6 Bar Graph

This fork of ICE-6 renders an SVG bar chart of Amazon prices in different states, showing the first 12 countries from a CSV dataset loaded via `d3.csv`. It uses React with the `useState` and `useEffect` hooks to fetch and store the data, then maps it to rectangular bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are custom-built using `d3.axisBottom`-style tick generation, though the code manually draws grid lines and labels with SVG elements. The chart is titled “Amazon Prices in different States” and displays loading text until data arrives.

MMgk1255

85% match