Skip to main content
SimilarExport ZIP
100%

ICE7-Reusable storesales

✓ Published0🌍 Public
AAnanyaSamala
Last edited Jul 3, 2022
Created on Jul 2, 2022

This interactive scatterplot animates sales and profit data from a storesales CSV dataset, cycling through four axis configurations via `setInterval`. The visualization uses D3 v6 APIs including `scatterPlot`, `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data loading, with SVG rendering. Data points are colored by category—Furniture, Office Supplies, and Technology—using hardcoded color markers, while a legend and rotating axis labels update dynamically. The reusable scatterplot module accepts configurable accessors for x/y values, margins, and radius, demonstrating a modular approach to animated data exploration.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com
86% match
Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatterplot visualizes sales data, showing the relationship between the number of orders placed by customers, available stock, and sales revenue for different product categories. The visualization uses D3.js (v6) with SVG rendering to display colored circles representing product categories, with an animation that periodically switches the x-axis between 'Number of Orders' and 'Available in Stock' using `setInterval`. A legend with category colors and axis labels enhances readability, while the reusable `scatterPlot` module handles axis scaling and circle positioning.

Llibramanju
86% match
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com
85% match
Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

MMahendraGullinkala
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through four Iris flower measurements on the x-axis while keeping sepal length on the y-axis, with each species colored distinctly (orange, blue, black). Using d3.csv to load the store sales dataset, the visualization employs d3.scaleLinear for axes and d3.axisBottom/axisLeft for ticks. A setInterval timer updates the x-axis value every few seconds, re-rendering the chart. The code also manually draws legend circles and text labels, with a custom scatterPlot module handling the reusable chart structure.

AAnanyaSamala
83% 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
82% match
Loading thumbnail…

ICE7 Reusable scatter plot

This interactive scatter plot visualizes automotive data, cycling through four variables—mileage, engine size, car age, and horsepower—on the x-axis every two seconds. Built with D3.js, the chart uses the `scaleLinear` and `extent` APIs to map data to coordinates, while `axisLeft` and `axisBottom` render axes. The SVG rendering is animated via `setInterval`, and the reusable `scatterPlot` component accepts configurable width, height, margins, and radius, demonstrating a modular chart design.

MM
82% match
Loading thumbnail…

Fork of ICE7 Reusable Scatter

This example visualizes PS4 game sales data as an animated scatter plot, showing global sales against release year across product categories. The visualization cycles the x-axis between Year and North American sales every few seconds. Built with D3 v6 and React, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, renders circles as SVG marks, and includes a hand-coded legend with color-coded categories. Data loads from a CSV via `d3.csv`, with axis transitions driven by `setInterval`.

Mmaheganesh
82% match