Skip to main content
SimilarExport ZIP
100%

Fork of ice07-reusable scatter plot

✓ Published0🌍 Public
LLaasyaJ256
Last edited Mar 29, 2026
Created on Mar 29, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ice07-reusable scatter plot

This interactive scatter plot visualizes retailer sales and profit data, with points colored by product category and a tooltip revealing details about each item on hover. The reusable chart function, implemented in D3 v7, accepts configurable parameters for scales, labels, and data accessors, making it adaptable to different datasets. It creates an SVG with linear axes, a dashed reference line at zero, and a legend, while the tooltip uses D3 event handlers to appear and move with the cursor.

LLaasyaJ256
91% 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
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…

Reusable Scatter plot - ICE 7

This example shows a reusable scatter plot of sales versus profit across 160 monthly data points, with each point colored by a constant category to demonstrate the chart’s legend. The visualization is built using D3 v7, leveraging `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for coloring, and `d3.axisBottom` and `d3.axisLeft` for gridlines. Data is loaded from a CSV file via `d3.csv`, and the chart is implemented as a configurable function with setters for x, y, color, and label accessors.

GGuntupalli Mohan kalyan
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
84% match
Loading thumbnail…

ICE7 - Reusable scatter plot

This interactive scatter plot visualizes Superstore sales data, plotting profit against sales to reveal performance trends. Reusable JavaScript module `scatterPlot` encapsulates chart configuration and rendering, with the D3 v6 API handling data loading via `csv`, linear scaling with `scaleLinear`, and axis generation through `axisLeft` and `axisBottom`. Points are rendered as SVG circles with animation, allowing flexible reconfiguration of dimensions, margins, and visual attributes.

Mmamathareddy1321@gmail.com
83% match
Loading thumbnail…

Fork of assignment 7 ScatterPlot

This D3.js v7 example presents a reusable scatter plot that visualizes the relationship between units sold and profit, with points colored by region. Each circle represents a data record from a 200-row CSV dataset. The visualization implements a configurable chart function with setters for data, dimensions, and axis mappings. It uses SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.csv for data loading, alongside axis generators and grid lines.

Sshyamraghav12@gmail.com
83% match
Loading thumbnail…

Ice7Q1

This interactive scatter plot visualizes Microsoft sales data, plotting revenue against profit for different product categories and scaling each point’s radius by order count. Hovering reveals a tooltip with category, revenue, and profit details. Built with D3.js v3, it uses `d3.svg.axis`, linear scales, and `d3.scale.category10` for coloring. Data loads from an external CSV file, and the chart is rendered as an SVG with mouseover transitions controlling tooltip opacity. The reusable `scatterPlot` function configures dimensions, margins, and accessor functions.

Ssrujana reddy
83% match