Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
Mmaddulanagasanjana@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from Scatter Plot

This interactive scatter plot displays daily signups against revenue from the ICE.csv dataset, with each circle representing a single day's metrics. The visualization automatically detects numeric columns from the CSV and plots the first two found on linear axes with tick marks and gridlines. Built with D3 v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, and `d3.axisBottom`/`d3.axisLeft` for generating axes. Custom styling includes a lightgrey SVG background, rounded points rendered as teal circles with 75% opacity, and title and axis labels formatted with the Share Tech font.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This example shows a reusable scatter plot of daily business metrics from a CSV file, plotting signups on the x-axis and revenue on the y-axis with a point for each date. The visualization is built with D3 v7 using the `d3.csv` loader and `d3.scaleLinear` for both axes, while `d3.axisBottom` and `d3.axisLeft` render the tick marks. Each circle is appended via `selection.selectAll().data().join()` with opacity and a fixed color, and the chart includes a title and axis labels. The code defines a reusable `scatterPlot` function to allow flexible customization of data columns and styling.

Mmaddulanagasanjana@gmail.com
86% match
Loading thumbnail…

ice7

This example shows a scatter plot of revenue versus profit from a CSV dataset of 200 rows. The plot is built with a reusable D3 module called `scatterPlot`, which uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map and render the axes. Circles are appended with `d3.selectAll` and `join`, using a fixed radius and a steelblue fill. The data is loaded asynchronously with `d3.csv` and parsed to remove currency symbols, while the SVG fills the entire browser window.

Sshyamraghav12@gmail.com
82% 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
81% match
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com
80% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
79% match
Loading thumbnail…

ICE-7 SCATTER PLOT

This interactive scatter plot, built with D3.js, presents the Iris dataset, encoding two selected variables along the x- and y-axes. The plot dynamically cycles through the `Revenue`, `Expenses`, and `EmployeeCount` fields every two seconds, updating the x-axis scale and circle positions. It uses D3's `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, with data fetched from a CSV URL. Rendered as an animated SVG, the circles have a fixed radius, and axes are generated for each new data view.

Ppeddubalaji@gmail.com
79% 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
79% 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
79% match