Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Mmosesimmanuelvemana@my.unt.edu
Last edited Mar 12, 2023
Created on Mar 11, 2023

This example displays Walmart sales figures for 15 U.S. cities using a horizontal bar chart rendered as SVG. It loads data from a CSV file via `d3.csv`, maps sales values to bar widths with `d3.scaleLinear`, and positions city labels using `d3.scaleBand`. Gridlines and tick labels are generated from the x-scale’s ticks. The visualization is built with React components and D3 v5, where axes are manually drawn using SVG elements rather than D3’s axis helpers.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Rendering walmart sales and unemployment with React and D3

This visualization displays weekly sales data from Walmart across different dates, with horizontal bars representing sales figures for each time period using a bar chart layout. Built with React and D3.js v7, the application loads CSV data from a GitHub gist and renders the first 20 records as an SVG. The code uses d3.scaleBand for the categorical date axis, d3.scaleLinear for the continuous sales axis, and React's useState and useEffect hooks to manage data loading and state.

SSanjib Paudel
87% match
Loading thumbnail…

ICE 7.3

This example shows Walmart sales over an 11-year period as a single line chart, with time on the x-axis and total sales value on the y-axis. The visualization is built with React and rendered as an SVG using D3 v5, specifically leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator to draw the path. Data is loaded as CSV and parsed with `d3.timeParse` to convert date strings into temporal values. Grid lines are styled via CSS, and axis labels are added as SVG text elements.

Kkartik900
86% 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…

ICE 7.4

This visualization displays 11 years of Walmart sales data as a smooth area chart, with a black line tracing sales over time above a yellow filled region. The SVG chart uses D3.js v5 scales, axes, and generators, including `scaleTime`, `scaleLinear`, `line`, and `area` with `curveBasis` for smoothing. The data is loaded from a remote CSV file, with years parsed via `d3.timeParse` and sales converted to numbers. Axis labels and gridlines are styled through CSS, while tick labels on the y-axis are formatted using D3's `format` with the `.3s` specifier.

Kkartik900
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
84% match
Loading thumbnail…

ICE-6

A bar chart displays total sales amounts by region, with bars sorted in descending order. The visualization is built with D3.js v7 and rendered as an SVG within a React framework. It uses `d3.csv` to load data, `d3.rollups` to aggregate sales by region, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars are drawn using SVG `rect` elements, with a tooltip-free design and axis labels. The code is structured modularly with functions like `renderBars` and `renderTitle`, and includes interactive element selection through click handlers.

Ssrinathkarumuru@my.unt.edu
81% 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
81% match
Loading thumbnail…

ICE6 - Bar Chart

This bar chart displays Super Store sales totals across different states, sourced from a CSV of the first 100 records of the dataset. The visualization uses React to manage the data-fetching state and D3.js to render the scalable vector graphics (SVG) bars and axes. Specifically, `scaleBand` and `scaleLinear` position the bars, while custom tick rendering replaces default axes, with gridlines drawn in blue. The chart encodes sales values as bar lengths, making state-level comparisons straightforward. Data is loaded asynchronously via `d3.csv`, with each row’s `Sales` field converted to a numeric `Cost` value for plotting.

Kkuraakhila9@gmail.com
81% match