ICE-6

100%

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

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.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 DV

This visualization displays the profit earned by the top 11 grocery products, rendered as a horizontal bar chart using React and D3 v5. The chart uses `scaleBand` for the product categories on the y-axis and `scaleLinear` for profit values on the x-axis, with purple bars showing relative profitability. Data is loaded from a CSV file via `d3.csv` and simple SVG `<rect>` elements are generated for each bar, accompanied by axis labels and tick marks drawn with SVG primitives.

NNaveed945

90% match

Loading thumbnail…

ICE-6:

This visualization displays the profit for the top 12 grocery products using a horizontal bar chart rendered as SVG through React. The code uses React hooks (useState, useEffect, useCallback) to load CSV data via d3.csv, then constructs scales with d3.scaleBand and d3.scaleLinear to map product names and profit values. Profit bars are drawn as SVG rect elements, with gridlines and tick labels generated manually from scale ticks. The data comes from a GitHub-hosted Grocery.csv file, and the chart title appears above the visualization.

NNaveed945

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

85% match

Loading thumbnail…

Fork of ICE-6

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.

SsreepavanKothapalli

85% match

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch

85% match

Loading thumbnail…

ICE-6 Bar Graph

This example displays a horizontal bar chart of total revenue for twelve countries, loaded from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with gridlines and axis tick labels generated via `xScale.ticks()` and custom text elements. The data is fetched asynchronously using `d3.csv` and processed with a row function to convert revenue values to numbers.

Ggayathrikavya

84% match

Loading thumbnail…

ICE-6 Rendering Marks and Channels with React & D3

A horizontal bar chart displays revenue for ten cosmetic products, with purple bars and blue axes on an SVG canvas. React manages the state and rendering loop, while D3 v5 functions (`csv`, `scaleBand`, `scaleLinear`, `max`) load the CSV data and compute scales. D3's `csv` fetches the data from a GitHub Gist URL, and the chart maps product names to y-axis positions and revenue values to bar widths.

SShishiraRudrabhatla

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

83% match