Fork of Reusable D3 Scatter Plot

Last edited Mar 25, 2026

Created on Mar 25, 2026

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

AI-generated description

MIT Licensed

Similar vizzes

Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of daily sales data, with light blue area fill beneath the points and red circles marking each data value. It loads CSV data from a GitHub gist via `d3.csv`, converts the fields to numbers, and uses `d3.scaleLinear` for both axes with `d3.axisBottom` and `d3.axisLeft` for tick marks. The reusable `scatterPlot` module defines configurable accessors for width, height, margins, and radius, though the main script directly builds a static SVG area chart.

92% match

Fork of Fork of Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays sales data over time, with a line connecting red circular markers on a steelblue stroke. The code uses the D3.js v6 API, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, to load CSV data and render an SVG. It includes axis labels and a custom Share Tech font. A separate `scatterPlot.js` module defines a reusable chart function with setters for configuration.

89% match

Fork of Fork of Reusable D3 Scatter Plot

A donut chart displays sales values by day, with each slice labeled by its corresponding day number and a legend mapping colors to days. Built with D3 v6, the visualization uses `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and SVG `path` elements for rendering. Data is loaded from a CSV via `d3.csv`, with values parsed as numbers. A separate, reusable `scatterPlot` module using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` is also included, though not instantiated in the main script.

87% match

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

Bbhargavinalamothu@gmail.com

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

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

Ppriyapravallika44@gmail.com

Fork of Reusable D3 Scatter Plot

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.

Fork of React & D3 Starter

This example builds a reusable scatter plot comparing monthly Sales and Profit metrics from a CSV dataset. The chart displays eight data points as steelblue circles, with an x-axis for Sales and a y-axis for Profit, using a linear scale for both dimensions. The code leverages D3 v7’s `d3.csv` for data loading, `d3.scaleLinear` for scaling, and `d3.axisBottom`/`d3.axisLeft` for axes. A custom `scatterPlot` function encapsulates the chart logic, allowing flexible reuse with different data mappings and labels, rendered as an SVG.

Ppvvaishnavi93@gmail.com