Supermarket Sales

100%

Supermarket Sales

✓ Published0🌍 Public

Last edited Jan 22, 2023

Created on Jan 22, 2023

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.

AI-generated description

The dataset has sales of a supermarket company which has recorded values in 3 different branches for 3 months data. For this dataset I would like to create a Sales dashboard containing information about important KPIs, trend in sales data, how seasonality can affect the profit margin, etc.

Link: https://www.kaggle.com/datasets/aungpyaeap/supermarket-sales

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 5-Supermarket Data

This example shows a summary of a supermarket sales dataset, displaying the file size, row count, and column count of the loaded CSV data. It also includes a static SVG image of a weather icon as a visual accent. The code uses D3 v7’s `d3.csv` to fetch and parse the data from a remote GitHub URL, then writes the computed metrics into a styled `pre` element using the DOM API. The page is styled with inline CSS, using orange and yellow backgrounds for emphasis, and relies on a plain HTML structure without React components despite the framework metadata.

Aarchanagoli@my.unt.edu

76% match

Loading thumbnail…

video game sales

This example displays the raw contents of the video game sales dataset as a JSON-formatted text dump, showing sales figures across regions and user scores for each title. The visualization initially loads data from a remote CSV file hosted on GitHub using `fetch()` and parses it with D3 v7’s `csvParse`. It uses a simple `pre` element bound to the parsed data array through a data join, with the `select`, `join`, and `text` APIs to render the dataset exactly as structured. The state management via `setState` handles the asynchronous loading sequence from `undefined` to `'LOADING'` to the final parsed array.

QQingyang Wang Profolio

73% match

Loading thumbnail…

Assignment1_10Q

This example loads a CSV file of supermarket sales data from a GitHub gist. It displays the first ten rows of the dataset as pretty-printed JSON in the page. The visualization uses D3 version 5 to fetch and parse the data with the `csv` function, and relies on the `select` and `append` APIs to add text elements to the body. The final output is rendered as SVG in the HTML.

Ppasyasahas

73% match

Loading thumbnail…

Product_Sales_Data

This example displays basic metadata from a product sales dataset, showing the file size, number of rows, and number of columns in a large text preformatted element. It loads the CSV from a GitHub gist using `d3.csv` and formats the data with `d3.csvFormat` to calculate the byte size. The display is rendered as plain text inside an HTML `<pre>` tag, with the data retrieved asynchronously via a Promise. The visualization does not plot any charts or graphs, focusing instead on a minimal summary of the dataset’s structure.

LlzlazmSylas

71% match

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size in kilobytes, row count, and column count within a styled HTML page. The code uses `d3.csv()` to fetch a remote Superstore dataset from a GitHub gist, then computes the formatted CSV length and reports the results in a `<pre>` element. The visualization itself is minimal, relying on React for structure and SVG-rendered decorative graphics, with D3 v7 handling data ingestion and formatting.

Ggayathri

71% match

Loading thumbnail…

Data Table Summary

This visualization displays a plain-text summary of a CSV file containing product data, showing the total number of rows, columns, and file size in kilobytes, followed by the first ten records as formatted JSON. The code uses D3 v5’s `select` and `csv` functions to fetch and parse the data, then appends `<pre>` elements to the page body. The dataset includes product names, prices, SKU numbers, and promotional details from an e‑commerce listing. The dark background with green monospaced text evokes a terminal aesthetic.

NNikkor

71% match

Loading thumbnail…

Super Car Sales

This visualization presents meta-information about a car sales dataset, displaying the file size, row count, and column count in a large, bold text overlay. The page centers a custom background SVG image of a car, with red headings and a hyperlink to the raw CSV data file hosted on GitHub Gist. The example uses the D3.js library, specifically the `d3.csv` and `d3.csvFormat` APIs, to fetch and analyze the dataset, then updates a `<pre>` element with the computed summary.

55577Satvik

71% match

Loading thumbnail…

First steps in parsing data

This example demonstrates how to parse a remote CSV file and display basic summary statistics about the dataset. The code loads sales data from a Gist-hosted CSV using `d3.csv`, then computes total and mean sales values with `d3.sum` and `d3.mean`. It also reports memory usage via `d3.csvFormat`, row and column counts, and column names. The results are rendered as plain text in a `<pre>` element on an HTML page styled with CSS, alongside a static basketball image.

PPlatoch

70% match