ICE-06: COMBINED CHART

ICE-06: Multi-line Series Chart

This multi-line series chart visualizes average grocery spending across four categories—produce, dairy, snacks, and beverages—over ten time segments. Each colored line represents a category, with a legend identifying them. The chart uses d3.csv to load remote spending data, then groups it into ten segments and applies d3.mean for aggregation. D3’s line generator builds the SVG paths, while d3.scaleLinear and d3.axisBottom/axisLeft handle scales and axes. The rendering is SVG-based with React managing the component structure.

LLaasyaJ256

91% match

ICE-7 line chart

This line chart displays the price (USD) of grocery items from an ICE-6 CSV dataset, using D3.js v7 with SVG rendering. It maps item names on the x-axis and price values on the y-axis, scaling the linear y-axis with `d3.scaleLinear` and `d3.max` for the domain. A categorical band scale (`d3.scaleBand`) positions items, and x-axis labels appear at the band centers. The chart is created by loading external CSV data via `d3.csv`, parsing numeric columns, and generating a path with `d3.line` while adding axes and labels through `d3.axisBottom`, `d3.axisLeft`, and SVG text elements.

UUday Kiran

79% match

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.

79% match

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.

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.

ICE_6_Amalgamated_Bar_Line

This visualization presents quarterly retail sales data in two complementary views. The first chart uses multiple line series with d3.line and d3.scalePoint to compare sales trends across North, West, and East regions. The second chart combines bar and line marks, using d3.scaleBand for advertising spending and a second linear scale for total sales, with data aggregated from a CSV file. The SVG rendering uses d3.axisBottom and d3.axisLeft for axes, while custom legends identify series colors.

Jjgaur96@gmail.com

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.