ICE-6 DV

100%

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

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.

AI-generated description

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

Similar vizzes

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

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

90% match

Loading thumbnail…

ICE - 6 Scatter Plot

This interactive D3.js scatter plot visualizes grocery store data, plotting Cost Price on the x-axis against Profit on the y-axis. Points are colored by product category (Grocery, Produce, or other) and sized with additional attributes for Selling Price and Quantity. The visualization uses D3's `csv` loader to fetch data, `scaleLinear` for axis scaling, and `axisLeft` and `axisBottom` for rendering axes. The chart spans the full browser window and applies a custom margin, with data-driven circles drawn via SVG joins.

NNaveed945

83% match

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

83% match

Loading thumbnail…

ICE-6 Nithish Kumar

This horizontal bar chart displays the top cosmetic products by revenue, sourced from a CSV file. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map revenue values and product names, with SVG rectangles representing the bars. Axes are customized by removing domain lines and applying a tick formatter that converts large numbers to abbreviated units. The data is loaded via `d3.csv` and rendered with margins and labels for the title and x-axis.

NNithish Kumar

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

82% match

Loading thumbnail…

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

This example shows the top 9 most profitable companies as a horizontal bar chart using React and D3. It loads CSV data from a GitHub gist, converts profit values to numbers, and renders SVG bars with axes. The visualization uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and maps over tick values to create gridlines and labels. React manages the component state with `useState` and `useEffect`, while `ReactDOM.render` mounts the chart. Styling includes custom colored ticks and marks set via CSS classes.

TTejaswi@3271

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

82% match