Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Kkruthanreddy812@gmail.com
Last edited Mar 28, 2026
Created on Mar 28, 2026

This example demonstrates a reusable scatter plot visualization of laptop sales data, showing the relationship between cost and quantity sold. It uses a D3.js module pattern to create a configurable chart component, with the `scatterPlot` function accepting setters for dimensions, margins, and data accessors. The data is loaded from a remote CSV file via `d3.csv()`, then parsed and rendered using `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks. The implementation includes TODO notes about making the chart idempotent, and the page uses custom styling with the Share Tech font.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between laptop cost and quantity sold, using data loaded from a CSV file via `d3.csv`. Points are rendered as SVG circles with axes created through `scaleLinear`, `axisBottom`, and `axisLeft`. The chart uses a reusable function pattern, where the `scatterPlot()` module configures dimensions, margins, and accessors before being called on an SVG selection. The visualization fills the browser window and applies a custom font from Google Fonts for all text elements.

Kkruthanreddy812@gmail.com
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes laptop sales data, plotting cost on the x-axis against quantity sold on the y-axis. Each circle represents a data point colored by area using `d3.scaleOrdinal` with `schemeCategory10`. Built with React hooks, the code uses `useRef` and `useEffect` to manage the SVG lifecycle, clearing previous renders before appending new ones via `d3.select`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleLinear` and `d3.extent`. The data is loaded asynchronously from a CSV file hosted on GitHub.

Kkruthanreddy812@gmail.com
91% match
Loading thumbnail…

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.

HHariniPotla@my.unt.edu
85% 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
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

HHariniPotla@my.unt.edu
85% match
Loading thumbnail…

Fork of ICE-7 Resusable Scatter Plot

This example uses D3.js to create a reusable scatter plot of laptop sales data, displaying the relationship between cost and quantity sold. The chart is built with an SVG-based custom scatter plot API that constructs axes, labels, and title using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Each point is rendered as a steelblue circle with a radius of six pixels and 70 percent opacity. The code loads a CSV file from a GitHub Gist, parses it, and then applies the plot to a full-window SVG.

Kkruthanreddy812@gmail.com
85% match
Loading thumbnail…

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.

HHariniPotla@my.unt.edu
85% match
Loading thumbnail…

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
83% match