Grocery Store Sales Data Loading

100%

Grocery Store Sales Data Loading

✓ Published0🌍 Public

Last edited Sep 4, 2025

Created on Sep 3, 2025

This example demonstrates loading and displaying a grocery store sales dataset from an external CSV file. The visualization fetches the data using the Fetch API, parses it with `d3.csvParse`, and renders the parsed rows as formatted JSON text in a `<pre>` element using D3’s `select` and data join. The code uses D3 v7 and manages state transitions from an initial undefined value through a loading phase to the final parsed array. The dataset includes sales records with fields such as product name, total amount, and loyalty points from multiple store locations.

AI-generated description

This dataset contains information about grocery store sales from multiple location. Some of the fields of this dataset include product name, total transation amount, loyalty points, etc.

Here is the link to the Kaggle Dataset: https://www.kaggle.com/datasets/pratyushpuri/grocery-store-sales-dataset-in-2025-1900-record

cusomter id -- id given to each customer that makes a transaction at the store (will not be used as data)
store name -- name of the store that the customer attended (categorical variable)
transaction date -- the date in which the customer bought the item (date)
aisle -- the number of the aisle where the product was shelved (quantitative variable)
product name -- the name of the product bought by the customer (categorical variable)
quantity -- the number of items bought by the customer (quantitative variable)
unit price -- the cost of one of the chosen product measured in dollars (quantitative variable)
total amount -- the summed cost of the items purchased by the customer measured in dollars (quantitative variable)
discount amount -- the amount removed from the total price of the purchase measured in dollares (quantitative varible)
final amount -- the total amount paid by the customer after factoring in the discount measured in dollars (quantitative variable)
loyalty points -- the amount of loyalty points earned by the customer for this purchase (quantitative variable)

MIT Licensed

Similar vizzes

Loading thumbnail…

Supermarket Sales

This example shows the raw contents of a supermarket sales dataset as a formatted JSON preview, displaying fields such as branch, product line, unit price, quantity, tax, total, and rating. It demonstrates a simple data-loading pattern: the code initially sets a loading state, fetches the CSV file, and parses it with `d3.csvParse`. The parsed data is then rendered into a `<pre>` element using D3's data join (`select`, `data`, `join`), giving a clear view of the structured records. The visualization is built with D3 v7 and uses a minimal state management approach.

GGauri Jare

83% match

Loading thumbnail…

Loading Data Online Furniture Sales

This example demonstrates the process of loading a JSON dataset through a simple asynchronous workflow. The visualization begins with an undefined state, transitions to a "LOADING" indicator, and finally displays the parsed data as formatted JSON text. The code uses `fetch` to retrieve the file and the D3.js selection API (`select`, `.join`) to bind and render the data into a `<pre>` element. The underlying dataset, an online furniture retail dataset, includes information about product categories, pricing, delivery status, and customer ratings, available within the gallery’s example files.

Aadamsnothere@gmail.com

78% match

Loading thumbnail…

Loading data - vgsales.csv

This example loads the Video Games Sales dataset from a GitHub-hosted CSV and displays its size, row count, and column count in large text. It demonstrates two approaches to fetching and parsing data: the primary method uses `d3.csv` to load and parse the file, while an alternative commented implementation uses `fetch` with `async`/`await` and `d3.csvParse`. The page also includes a commented “pyramid of doom” example showing nested promise callbacks. All results are rendered into a `<pre>` element via `document.getElementById`.

VVarun Eranki

78% match

Loading thumbnail…

Loading and Parsing vgsales.csv

This example loads a CSV file of video game sales data and displays basic file statistics: the dataset’s size in kilobytes, row count, and column count. The page uses D3 v5’s `d3.csv` method to fetch and parse the data from a GitHub Gist, then renders the summary in a large `<pre>` element. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse` to demonstrate different parsing approaches.

DDaniel Ribaudo

77% match

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data into a React application using D3 utilities. It fetches a CSV file containing sample sales data via the `d3.csv` method and displays summary statistics—approximate file size in kilobytes, row count, and column count—in a large text element. The React `useState` hook manages the data asynchronously, showing a “Loading...” message until the fetch resolves. The visualization relies on React 16.9, D3 v7, and the raw CSV hosted on GitHub.

TTousifAhamed

76% match

Loading thumbnail…

Loading Data - Goodreads Books

This example demonstrates the initial step of a data visualization pipeline: loading a Goodreads dataset from a CSV file. It shows raw JSON-formatted data in a `<pre>` element, with attribute names and values like book titles and ratings clearly visible. The code uses D3 v7's `csvParse` and `select` within a state-management pattern, where `fetch` retrieves the file and `setState` updates the view after parsing. The visualization itself is minimal, displaying the loaded data structure without any graphical encoding.

AAlexis Caira

76% match

Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the Iris dataset as formatted JSON text in a `<pre>` element. The visualization initially shows a "LOADING" state, then fetches `data.csv` via the Fetch API and parses it using `d3.csvParse`. The code explicitly converts string measurements into numbers for all four numeric columns. State management is handled through a simple `setState` pattern, where the `viz` function checks whether data is loaded, triggers the asynchronous fetch, and re-renders once the parsed array of objects is available.

CCurran Kelleher

76% match

Loading thumbnail…

Loading and Parsing VGSales.csv

This example loads and parses the VGSales.csv dataset, displaying the raw file size, row count, and column count in large text. It shows how D3 fetches and parses CSV data to summarize its structure. The code uses `d3.csv` to load the remote file, then formats the data with `d3.csvFormat` to calculate its size. An alternative approach using `fetch`, `async/await`, and `d3.csvParse` is also included. The dataset, sourced from Kaggle, contains video game sales metrics across global regions.

TT-Reiser

76% match