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 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

Kkruthanreddy812@gmail.com
91% match
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
91% 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
84% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com
83% 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
83% 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
83% 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
83% match
Loading thumbnail…

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.

Ppriyapravallika44@gmail.com
83% match