Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Reusable D3 Scatter Plot

✓ Published2🌍 Public
HHariniPotla@my.unt.edu
Last edited Mar 25, 2026
Created on Mar 25, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
89% match
Loading thumbnail…

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.

Bbhargavinalamothu@gmail.com
88% match
Loading thumbnail…

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.

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

Fork of Scatter Plot

This fork of a scatter plot visualizes monthly sales versus profit from a small CSV dataset, encoding each month as a steelblue circle. Using D3 v7 within a React framework, the code loads the data and renders the chart as an SVG, leveraging `d3.scaleLinear` and `d3.extent` to map values, and `d3.axisBottom` and `d3.axisLeft` to generate axes. The example demonstrates a reusable chart structure with configurable margins and an explicit SVG container.

Ppvvaishnavi93@gmail.com
87% 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
86% match