Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
UUday Kiran
Last edited Apr 1, 2025
Created on Apr 1, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% 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
86% 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
86% 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
86% match
Loading thumbnail…

Fork of ice07-reusable scatter plot

This reusable scatter plot visualizes retailer data, mapping Sales on the x-axis against Profit on the y-axis, with points colored by product Category using d3.scaleOrdinal and a Tableau color scheme. The code uses D3 v7 to create an SVG chart with axes, tick labels, a dashed zero-profit reference line, and an interactive tooltip triggered by mouse events. It also includes a legend and fixed plot dimensions, with data loaded from a CSV file via d3.csv and parsed with d3.autoType.

LLaasyaJ256
85% match
Loading thumbnail…

Fork of Scatter plot for Electronics sale

A reusable scatter plot displays monthly electronics sales data across six months, with each month's sales shown as a teal circle positioned by month on the x-axis and sales value on the y-axis. The chart uses D3 v6’s `scaleBand` and `scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` for tick labels, and `join` to bind circles to the data. The x- and y-axis labels are added via appended text elements, while the chart’s dimensions, margins, and data mapping are configurable through a builder-style API. The implementation renders to SVG and is a fork of an existing scatter plot template, with the data hardcoded in the script.

Ppriyapravallika44@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 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
84% match