Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This fork of a reusable D3 scatter plot visualizes monthly sales data across product categories. The chart uses D3’s `scaleOrdinal` and `scaleLinear` to map months and sales values to SVG circle positions, with a color scale distinguishing six categories. An axis and legend are rendered via `axisBottom`, `axisLeft`, and appended SVG elements. The code samples data from a static array, demonstrating a reusable `scatterPlot` function with configurable accessors and margins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays monthly sales figures across six retail categories, with each circle’s horizontal position encoding the month, vertical position encoding sales amount, and color distinguishing product types. The visualization uses a reusable custom D3 module that employs `scaleOrdinal` for the categorical x-axis and legend colors, `scaleLinear` for the sales axis, and `axisLeft`/`axisBottom` for tick labels. The SVG output is generated from hardcoded data via the provided `index.js` and `scatterPlot.js` files.

UUday Kiran

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes tech product data, mapping price, rating, sales volume, and customer reviews. The plot automatically cycles through these attributes every two seconds, updating the x-axis and data points. It uses D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs for axes and color. Implemented as a configurable chart function, it demonstrates a reusable pattern with `.join()` for creating and updating SVG circles and legend items, with data loaded from a CSV file.

AAmrit Adhikari

86% match

Loading thumbnail…

Fork of Scatter plot for Electronics sale

A reusable scatter plot displays monthly electronics sales data across six months, with each month's sales shown as a teal circle positioned by month on the x-axis and sales value on the y-axis. The chart uses D3 v6’s `scaleBand` and `scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` for tick labels, and `join` to bind circles to the data. The x- and y-axis labels are added via appended text elements, while the chart’s dimensions, margins, and data mapping are configurable through a builder-style API. The implementation renders to SVG and is a fork of an existing scatter plot template, with the data hardcoded in the script.

Ppriyapravallika44@gmail.com

85% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable D3 scatter plot cycles through four numeric car-sales variables—mileage, engine size, year of manufacture, and price—on the x-axis while price stays on the y-axis, updating every 2.5 seconds with an animated transition. Built using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, it renders SVG circles from a Kaggle CSV and re-invokes the chart function to swap axes. The code demonstrates a modular `scatterPlot` factory pattern with setter methods for width, height, data, and accessors.

Mmaddineni2112@gmail.com

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

81% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot that maps categorical car models on the x-axis to their numeric prices on the y-axis using blue circular marks. Built with D3 v6, it employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick rendering. The chart is rendered as SVG, with a title and rotated x-axis labels. Sample data is embedded in the code for demonstration.

Nnagalakshmibadineedi2@gmail.com

81% match

Loading thumbnail…

Fork of pie chart for monthly sales

A fork of a pie chart displays six monthly sales snapshots, each broken into category shares (electronics, clothing, groceries, furniture, toys, books) with slice labels and a legend. The D3.js v6 code flattens monthly objects, applies a d3.pie layout and d3.arc generators to draw SVG paths, and uses d3.scaleOrdinal with schemeCategory10 for colors. Each month’s chart is offset vertically, with text labels positioned via labelArc.centroid, and data is hardcoded in the script.

Ppriyapravallika44@gmail.com

81% match

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

81% match