Store sales scatter plot

100%

Store sales scatter plot

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 22, 2023

A scatter plot displays sales figures for five store products, with each product represented by a color-coded circle positioned along a band scale for product names and a linear scale for sales values. Sales numbers appear as labels above each circle, while axis titles identify the product and sales dimensions. Built with D3 v6, the SVG chart uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization from static in-memory data.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot displays store sales data across three different y-axis metrics, cycling through Store_Sales, Daily_Customer_Count, and Items_Available every two seconds. Built with D3.js v7, the visualization uses d3.csv, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the SVG plot. The reusable scatterPlot function updates the y-axis and data binding asynchronously, demonstrating a data-driven approach where the top ten store area values are displayed with circles of radius 5.

RRohithNaiduDevareddy@my.unt.edu

79% match

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Llibramanju

79% match

Loading thumbnail…

Scatter Plot Using superstore.csv

This scatter plot visualizes the relationship between Sales and Profit in the Superstore dataset, with each circle representing a data point. The code loads data from a remote CSV file using `d3.csv`, then maps Sales and Profit values to x and y coordinates with `scaleLinear`. Axes are generated using `axisLeft` and `axisBottom`, while SVG circles are appended with a fixed radius. The plot is rendered using D3 v6 within a full-window SVG, with styled axis labels for both dimensions.

Ssrivalliwuyyuru

77% match

Loading thumbnail…

Scatter Plot group4

This scatter plot visualizes the relationship between sales and profit from a sample dataset. The SVG chart is rendered using the D3.js library, specifically leveraging `d3.csv` to load data, `d3.scaleLinear` to map values, and `d3.axisBottom`/`d3.axisLeft` for the axes. Each data point is drawn as a steelblue circle with a radius of five, positioned according to its sales and profit coordinates. The chart title and axis labels are added as SVG text elements.

Ssaikrishnabussa

76% match

Loading thumbnail…

Beauty Product Sales Scatter Plot

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each circle labeled to identify its product name. The visualization uses the D3.js library (v5) within a React framework, rendering as an SVG. It reads data from a CSV file, scales the axes using `d3.scaleLinear` for both variables, and employs `d3.axisBottom` and `d3.axisLeft` to create the coordinate system. Data points are drawn as circles with `d3.selectAll` and appended with `.enter()`, and product names are added as text labels positioned next to each point.

Hharsha

76% match

Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot visualizes store sales data, dynamically cycling through different attributes (Store Area, Daily Customer Count, Store Sales, and Items Available) on the x-axis every two seconds. Built with D3.js, the visualization uses an SVG scatter plot with circles representing individual stores, where the y-axis displays items available and the x-axis automatically updates to showcase different metrics. The animation highlights the flexibility of D3's data joins and method chaining, allowing the chart to smoothly transition between different data views. The reusable chart pattern keeps the code modular and maintainable.

RRohithNaiduDevareddy@my.unt.edu

76% match

Loading thumbnail…

Beauty Product Sales Scatter Plot

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each point labeled by product name. The chart uses D3 v5 to load the CSV data, scale linear axes, and render SVG circles and text labels. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while points are positioned using the `xScale` and `yScale` functions. The visualization highlights trends between sales volume and revenue, such as higher-revenue products not always having the highest units sold.

NNukaShravanKumar

76% match

Loading thumbnail…

Line Chart for sales

This line chart visualizes total sales across product categories, with the y-axis representing sales figures and the x-axis categorizing products. The chart uses D3.js v7, loading CSV data from a GitHub gist. The code converts string sales values to numbers, defines an SVG canvas, and constructs scales with `d3.scaleBand` and `d3.scaleLinear`. It renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the line using D3's `d3.line` generator, styled with a steelblue stroke. The SVG output includes labels for both axes.

Ssreeramyamini@gmail.com

75% match