Reusable Scatter Plot ICE-7

100%

Reusable Scatter Plot ICE-7

✓ Published2🌍 Public

Last edited Apr 1, 2025

Created on Mar 27, 2025

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.

AI-generated description

This project is a D3.js- based interactive scatter plot that visualizes the distribution of various products across different days of the weeek. Features: Dynamic scatter plot: Visualizes product distribution values for any selected day. Day selector: Switch between Monday to Sunday to update the plot. Tooltips: Hover over each data point to see exact values and product names. Reusable design: Easily extensible for new datasets or attributes.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6-SCATTER PLOT.

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.

Aasowmyasri15@gmail.com

88% 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

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-7 Reusable Scatter Plot with Menu (Dhanusree Kodali)

This interactive scatter plot visualizes daily climate data, allowing users to explore relationships between date and various wind measurements (such as average, peak, and sustained wind speed/direction) through a dropdown menu that changes the y-axis attribute. The plot uses SVG rendering with React components and D3 scales (including `scaleTime`, `scaleLinear`, and `scaleOrdinal`), displaying colored circles that represent different weather stations. A color legend provides interactive filtering, where hovering over a station name highlights only that station's data points while fading others, using D3's `scaleOrdinal` for categorical color mapping and custom React components for axes and marks. The visualization demonstrates a reusable architecture by separating axis, legend, mark, and dropdown functionality into modular JavaScript files.

DDhanusree Kodali

82% 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

81% 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

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable scatter plot visualizes the ICE.csv dataset with an interactive interface for selecting numeric variables from the data. Built with D3 v7, the chart renders SVG circles and supports dynamic updates when users change X/Y axis selections through dropdown menus. The implementation demonstrates a chainable chart factory pattern with configurable setters, featuring tooltips on hover, a color legend for categorical grouping, and animated transitions between different data encodings. Grid lines, axis labels, and a responsive layout complete the visualization.

Mmaddulanagasanjana@gmail.com

79% match

Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu

This interactive scatter plot displays daily wind measurements from multiple weather stations over time, with each station represented by a distinct color in an ordinal color scale. A dropdown menu lets viewers switch the y-axis among five different wind attributes, including sustained wind speed and peak wind direction. Hovering over a color legend item triggers React’s state management to fade non-selected stations by 80%, isolating their data points for comparison. Built with React and SVG, the visualization uses D3 v6 utilities like `scaleLinear`, `scaleTime`, and `scaleOrdinal` for axes and coloring, while the `react-dropdown` library powers the menu, all rendered from CSV data fetched via D3’s `csv` function.

Bbharathsivakumar07

78% match