Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jul 4, 2022

Created on Jun 30, 2022

This fork of a reusable D3 scatter plot animates through four variables from a grocery store dataset, cycling Profit, Quantity, Selling_Price, and Cost_Price on the x-axis while Cost_Price remains on the y-axis. SVG circles are colored by category (Frozen, Grocery, Produce) using a switch statement, with the reusable `scatterPlot()` module handling scales and axes via `scaleLinear`, `axisLeft`, and `axisBottom`. A `setInterval` triggers the x-value changes, rebuilding the plot and updating the axis labels, while custom legends and titles are appended dynamically. Data comes from a CSV loaded with `d3.csv`.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter

This example presents a reusable scatter plot that visualizes retail sales data from a supermarket dataset. The plot animates by cycling between two variables—Quantity and Price—on the x-axis every four seconds, while the y-axis remains Price. Data points are colored by product category (blue for Clothing, purple for Gadgets, orange for Appliances). Built using D3 v6, it leverages scaleLinear, axisLeft, axisBottom, and csv loading, with SVG circles for rendering and a setInterval-driven animation.

Pprashanth yamala

86% match

Loading thumbnail…

Fork of reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes inventory data, plotting Quantity on the x-axis and Price on the y-axis. It alternates between two halves of the dataset every five seconds, switching the displayed points and updating the axes and circles accordingly. The code uses D3 v6 APIs such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeCategory10` for coloring. The data is loaded from a CSV file, and the visualization renders in an SVG container with margins, axis labels, and animated transitions via `setInterval`.

Ssriram.official9@gmail.com

85% match

Loading thumbnail…

Reusable for Assignment 7

This animated scatter plot uses a reusable D3 function to visualize product data, cycling through three quantitative x-axis variables—discount, unit cost, and unit price—against order quantity. The SVG visualization updates every two seconds, smoothly re-scaling the x-axis as new data is plotted. Built with D3 v6, it leverages `scaleLinear`, `extent`, and `axisBottom` for axes, while circles are rendered via data joins. Data is loaded from a CSV file using `csv` and parsed to convert numeric fields. The scatter plot is fully responsive, filling the entire viewport with configurable margins and point radius.

BBlueT

83% match

Loading thumbnail…

resuable scatter plot

This interactive scatter plot visualizes supermarket sales data, plotting Quantity on the x-axis and Price on the y-axis, with points colored by product list category. It demonstrates a reusable chart pattern, using d3.csv to load the dataset and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render axes. An animated loop using setInterval toggles the x-value mapping between Quantity and Price every two seconds, redrawing the chart with smooth SVG transitions. The code follows the “Towards Reusable Charts” methodology, exposing configuration methods like .width, .height, .data, and .radius for flexible customization.

Pprashanth yamala

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes Walmart sales data, plotting temperature against sales year with draggable, animated transitions. Every two seconds, the x-axis automatically cycles through different data columns—year, temperature, weekly sales, and fuel price—updating the circles’ positions accordingly. Built with D3 v6, the visualization uses scaleLinear, axisLeft, axisBottom, and a reusable scatterPlot factory function to manage state. Data loads from a CSV via d3.csv, and the SVG renders with a custom Share Tech font, creating a dynamic exploration of retail metrics.

Mmahee0725

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a D3.js scatter plot animates through three pairings of nutritional data from a CSV file of menu items: carbohydrates versus protein, carbohydrates versus total fat, and protein versus total fat. The code uses D3 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles with an SVG. A `setInterval` callback updates the x and y value mappings every two seconds, changing the chart’s title accordingly. The visualization employs a custom `scatterPlot` function and D3’s `selectAll` and `join` for efficient updates.

Mmanthenasirisha06@gmail.com

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot BT

This interactive scatter plot visualizes fruit data loaded from a CSV file, showing relationships between variables like retail price and yield. Points appear as different shapes—circles, triangles, and squares—based on the yield value. The x-axis automatically cycles through numeric columns every two seconds, animating the chart to compare different data dimensions. Built with reusable D3 code, it uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with SVG paths for point shapes.

TTarun Kumar Bosupally

82% match

Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot animates store sales data, cycling the y-axis between metrics like Store_Sales, Daily_Customer_Count, and Items_Available every two seconds. Built with D3 v7, it loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.axisBottom`/`axisLeft` for axes, and renders SVG circles with a reusable `scatterPlot` function. The y-axis label updates dynamically as the plot re-renders.

RRohithNaiduDevareddy@my.unt.edu

82% match