Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Resusable Scatter Plot

✓ Published0🌍 Public
Kkruthanreddy812@gmail.com
Last edited Mar 28, 2026
Created on Mar 28, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

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
86% match
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
85% 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 Reusable D3 Scatter Plot

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.

Kkruthanreddy812@gmail.com
84% match
Loading thumbnail…

ICE 7

This example shows a reusable D3 scatter plot of product sales versus profit, with each circle representing an item and axes scaled to the data. It fetches CSV data from a GitHub Gist, falling back to embedded data if the request fails. The visualization is built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`, and drawn as SVG circles. The plot is sized to the window and styled with the Share Tech font, using a minimal, full-screen layout.

Ssarasaketh3@gmail.com
84% match
Loading thumbnail…

Fork of ICE7 - Reusable scatter plot 1

This interactive scatter plot visualizes relationships between pairs of numerical columns from a cosmetics dataset loaded via `d3.csv`. Users select which attributes appear on the x- and y-axes using dropdown menus, and the chart redraws on change. Built with D3 v6, it uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while circles with steelblue fill represent data points. The visualization is rendered as SVG within a fixed 700×500 viewport, with margins and axis labels updated dynamically.

Ddeepthiv.4706@gmail.com
84% match
Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com
83% match
Loading thumbnail…

ICE7-ScatterPlot

This example shows a reusable scatter plot of monthly e-scooter sales versus profit from an external CSV file, using an SVG rendering approach. The chart maps sales to the x-axis and profit to the y-axis with labeled axes, and displays steel-blue circles for each data point. The code uses d3.csv for data loading and d3.scaleLinear for scales, while the reusable chart function chainably configures dimensions, margins, and value accessors. The visualization is built with D3 v7 and rendered into a pre-existing SVG element.

LLokesh
83% match