Skip to main content
SimilarExport ZIP
100%

ICE-6-SCATTER PLOT.

✓ Published1🌍 Public
Aasowmyasri15@gmail.com
Last edited Mar 23, 2025
Created on Mar 19, 2025

This scatter plot visualizes product sales by comparing Monday sales against Tuesday sales for individual products. The visualization is built with React and D3.js, rendering as an SVG with animated clouds and a meditative Buddha scene in the background. Using d3.csv, it loads data from a GitHub Gist and employs d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to construct axes. Interactive tooltips provide product details on hover, while click events toggle point selection, changing the fill color to orangered. The chart uses a white background with a subtle shadow.

AI-generated description

This project visualizes product sales data using a scatter plot, specifically comparing "Monday vs Tuesday" sales for different products. FEATURES: Built with HTML,CSS and D3.js Fully responsive SVG-based scatter plot. Visualizes the relationship between Monday and Tuesday sales. Includes labeled axes and interactive tooltips for each data points. Technologies used: D3.js for data driven visualizations. HTML5 & CSS3 for layout and styling. AUTHOR: Sowmya Sree Aitharaju.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot ICE-7

This interactive scatter plot visualizes the distribution of various products across different days of the week using a dropdown selector to switch between Monday and Sunday. Built with D3.js v7 and React, it displays data points as circles positioned along a categorical x-axis and a linear y-axis, with tooltips revealing exact product values on hover. The visualization loads CSV data from a GitHub Gist and animates transitions between days using D3's transition methods, while the SVG chart is accompanied by a decorative scene featuring a Buddha, tree, and moving clouds.

Aasowmyasri15@gmail.com
88% 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
85% 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
83% match
Loading thumbnail…

ICE-6-BarGraph.

This example visualizes Tuesday’s product distribution quantities as a bar chart, with each bar colored light sky blue and turning orange on hover. Selecting a bar reveals a tooltip displaying the product name and its quantity. The chart is built with React components and D3.js v7, using `scaleBand` and `scaleLinear` for axes, and `d3.csv` to load the dataset. Animated SVG elements, including drifting clouds, a recursive fractal tree, and a Buddha figure, are rendered as a decorative background behind the data visualization.

Aasowmyasri15@gmail.com
82% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
81% match
Loading thumbnail…

ICE 7

This example shows a reusable D3 scatter plot of product sales versus profit, with each circle representing an item and axes scaled to the data. It fetches CSV data from a GitHub Gist, falling back to embedded data if the request fails. The visualization is built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`, and drawn as SVG circles. The plot is sized to the window and styled with the Share Tech font, using a minimal, full-screen layout.

Ssarasaketh3@gmail.com
81% match
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
80% match
Loading thumbnail…

Latha Bemanadham 11714828 scatter plot

This interactive scatter plot visualizes product distribution across different days of the week, with a dropdown menu allowing users to switch between days. The chart uses D3.js (v7) to render SVG circles positioned on a band scale for products and a linear scale for values, with smooth transitions animating position updates. Hovering over a circle enlarges it and displays a tooltip with the product name and value. The data is loaded from a CSV file hosted in a GitHub Gist.

Llathabemanadham@my.unt.edu
80% match