Skip to main content
SimilarExport ZIP
100%

ICE7 Reusable Scatter

✓ Published0🌍 Public
MMahendraGullinkala
Last edited Mar 30, 2023
Created on Mar 29, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

ICE7 - Reusable scatter plot

This interactive scatter plot visualizes Superstore sales data, plotting profit against sales to reveal performance trends. Reusable JavaScript module `scatterPlot` encapsulates chart configuration and rendering, with the D3 v6 API handling data loading via `csv`, linear scaling with `scaleLinear`, and axis generation through `axisLeft` and `axisBottom`. Points are rendered as SVG circles with animation, allowing flexible reconfiguration of dimensions, margins, and visual attributes.

Mmamathareddy1321@gmail.com
84% 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
84% 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
84% 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
84% 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
84% match
Loading thumbnail…

ICE7-Reusable storesales

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.

AAnanyaSamala
84% match
Loading thumbnail…

ICE-6 Scatter Plot

This interactive scatter plot compares two variables, with dropdown menus above the chart allowing the user to switch which data columns are plotted on the x- and y-axes. The visualization is built with React and renders as an SVG using D3.js v5, leveraging D3’s selection and axis-generation methods to draw the points and tick marks. The source data is loaded from a local `v3` dataset, and the menus are populated dynamically from its column names.

RRevanthGrreddy
84% match