Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Reusable D3 Scatter Plot

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

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.

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

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
84% 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
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
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
82% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This pie chart visualizes the distribution of productivity levels from a remote CSV dataset, showing the count of each category as a slice. It fetches the data with `fetch`, parses the CSV text, and aggregates the third column into counts. The chart is rendered on a canvas using Chart.js, with a legend on the right and a title. An error message displays if no valid data exists.

VVignesh Nallamothu
81% match