100%

Pseudo Scatter Plot with D3

✓ Published3🌍 Public

Last edited Sep 20, 2025

Created on Jun 25, 2025

Forked from Pseudo Scatter Plot with Clickable Circles

This example shows a minimal scatter plot of six static data points, each rendered as a circle with a 34-pixel radius on a full-screen SVG canvas. It uses D3 v7’s join pattern: `selectAll('svg').data([null]).join('svg')` creates the canvas, while `selectAll('circle').data(data).join('circle')` binds the coordinates. The visualization adapts responsively to the browser window via a fixed-position container, and the data comes from a static JavaScript array in `data.js`.

AI-generated description

Pseudo Scatter Plot with D3

This project creates a simple scatter plot visualization using D3.js. It renders circles at specific (x, y) coordinates on an SVG canvas that fills the entire browser window.

Features

Full-screen SVG visualization
Responsive design that adapts to window size
Static data points rendered as circles

Project Structure

index.html: Main HTML file that sets up the visualization container and imports the necessary modules
index.js: Entry point that initializes the visualization
viz.js: Core visualization function that orchestrates SVG setup and circle rendering
data.js: Contains static data points for the scatter plot
setupSVG.js: Function to create and configure the SVG element
renderCircles.js: Function to render data points as circles on the SVG

Data Points

The visualization displays the following data points:

(132, 391)
(330, 349)
(410, 192)
(527, 257)
(688, 119)
(878, 55)

Each point is rendered as a circle with a radius of 34 pixels.

How to Run

Open index.html in a modern web browser
The visualization will automatically render in full screen

Note: This project uses ES modules and requires a local server to run properly due to CORS restrictions. You can use a simple server like Python's http.server or VS Code's Live Server extension.

Implementation Details

This implementation uses D3's join pattern for data binding:

select(container).selectAll('svg').data([null]).join('svg') ensures a single SVG element exists
selectAll('circle').data(data).join('circle') binds data points to circle elements

The visualization automatically resizes to fill the browser window using CSS position: fixed and inset: 0 properties.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Scatter Plot with D3

This pseudoscatter plot places six static circles on a fixed full-screen SVG, using hardcoded x/y coordinates from a separate data module. The example demonstrates a minimal D3 v7 setup with an import map, a reusable visualization function, and chained selections. `setupSVG` creates the SVG element via `select` and `join`, while `renderCircles` binds the data array and appends circles with `attr` for positioning and a fixed radius of 34 pixels. The visualization shows how data-driven rendering works without axes, scales, or interactivity.

BBismark Kofi Owusu Sarfo

88% match

Loading thumbnail…

Pseudo Scatter Plot

This example presents a pseudo scatter plot, using a set of six circles arranged to suggest a data distribution rather than plotting actual data points. Each circle is rendered as a static SVG `<circle>` element with fixed coordinates and a radius of 34.5, positioned on a white 960×500 canvas. The visualization relies purely on raw SVG markup inside an `index.html` file, with no JavaScript libraries or dynamic data processing involved. The sparse, hand-coded placement of circles creates a simple, minimalist view of a hypothetical scatter pattern.

YYangxi Liu

85% match

Loading thumbnail…

Pseudo Scatter Plot With HTML

This example displays a sparse set of six circles positioned across a 960 by 500 SVG canvas, approximating a scatter plot without any underlying data or axes. The circles are hard-coded with fixed `cx`, `cy`, and `r` attributes, giving the appearance of data points. The visualization uses a minimal HTML document with an inline SVG element, making it a purely static representation. It demonstrates how raw SVG circle elements can mimic a scatter plot layout without the aid of JavaScript libraries or scales. Each circle’s placement is chosen to suggest a downward trend from left to right.

CCurran Kelleher

84% match

Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts

This example visualizes a scatter plot using a pseudo-chart technique, approximating the data points as black circles positioned at arbitrary coordinates. The SVG uses `<circle>` elements to render the visualization, with each circle given a random x and y coordinate to suggest a distribution. The code relies on the SVG library and the `d3` framework, though it does not explicitly use a specific D3 API for layout or rendering. The data source is not externally loaded; instead, the circle positions are hardcoded in the markup, demonstrating a minimal, stylized approach to scatter plot construction.

Vvivienho22

84% match

Loading thumbnail…

Fork of Pseudo Scatter Plot with D3

This example displays a scatter plot of seven circles positioned along a quadratic curve where each y-coordinate is the square of its x-coordinate (1, 4, 9, 16, 25, 36, 49). The visualization builds a full-viewport SVG via D3’s `select` and joined `join` operations, sizing it to the container’s dimensions, then renders the circles with `d3.r` set to 25 using the `renderCircles` function. The code separates setup and rendering into modular functions, importing data from a local `data.js` file that calculates coordinates with `Math.pow`.

Eethanrampersaud@gmail.com

83% match

Loading thumbnail…

simple scatterplot

This example shows a simple scatterplot of seven data points, each defined by x and y coordinates on a fixed 960-by-500 SVG canvas. The visualization uses D3 v4 to create the SVG container and relies on the `d3.select` and `attr` methods to set its dimensions. The data is hardcoded as an array of JavaScript objects, and while the code preps the SVG, it does not yet plot any circles or axes, leaving the points unrendered. The body is styled with zero margins to make the chart full-width.

SScarlettHui

83% match

Loading thumbnail…

Pseudo Scatterplot

This example presents a pseudo scatterplot, approximating a distribution of data points with six circular marks scattered across a white canvas. Each black circle is positioned at distinct coordinates, visually suggesting a rough correlation between the x and y axes. The visualization is rendered as static SVG, constructed with individual `<circle>` elements inside an `<svg>` container. It uses raw SVG markup for drawing, with the page styling handled by basic CSS, and no data loading or interaction is implemented.

Wwspwll@gmail.com

83% match

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot displays six evenly sized circles arranged diagonally across a white SVG canvas, suggesting a trend from lower-left to upper-right without underlying data points. The visualization is built with plain JavaScript and SVG, using `<circle>` elements with explicit `cx`, `cy`, and fixed `r` attributes for positioning. No D3 or external libraries are employed; instead, hardcoded coordinates create the approximate scatter effect. The rendering relies solely on SVG's native shape primitives within an HTML document, with a `rect` serving as the background.

AAmauri Ribeiro

83% match