Reusable

100%

✓ Published0🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

This example displays a reusable scatter plot of Apple stock close prices over time, using a subset of the first 100 data points from the plotly finance-charts-apple CSV. The visualization shows a blue dot for each sample, mapped with index on the x-axis and price on the y-axis, along with labeled axes. The code defines a `scatterPlot` function that accepts SVG and layout properties, using `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and appends circles to the SVG with D3 v7.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Dd3noob

82% match

Loading thumbnail…

reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes inventory data by plotting quantity against price. The visualization alternates between two halves of the dataset every five seconds, automatically switching between the first and second half of the data points. Built with D3.js v6, the code uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for color encoding, while axis and label rendering rely on `axisLeft` and `axisBottom`. The custom `scatterPlot()` function encapsulates chart configuration through chainable methods, and data is loaded from a CSV file using `d3.csv`.

Vvishnupriya eupuri

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

80% match

Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri

80% match

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the relationship between trading dataset attributes, cycling through variable pairs every three seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. The chart animates by dynamically updating its `xValue` and `yValue` accessors, demonstrating the flexibility of a chainable scatter plot function. Data loads from a CSV via `d3.csv` with numeric parsing.

UUday Kiran

80% match

Loading thumbnail…

Reusable Scatter Plot

UUday Kiran

80% match

Loading thumbnail…

reusable scatter plot

This example demonstrates an automated, reusable scatter plot built with D3.js (v6.7.0) that loads a CSV from a GitHub gist and dynamically selects the first two numeric columns for the x- and y-axes. It uses `csv()`, `scaleLinear()`, `axisBottom()`, and `axisLeft()` to render axes, and `scaleOrdinal()` with `schemeCategory10` to color points by the first categorical column. The visualization includes symbols from D3’s `symbol()` API, a simple hover tooltip, and automatically rotates through additional numeric x-columns every three seconds using `setInterval()`, re-rendering the SVG and scaling.

Llohitsai62@gmail.com

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

79% match