Skip to main content
SimilarExport ZIP
100%

Pseudo Scatter Plot

✓ Published0🌍 Public
YYangxi Liu
Last edited Mar 16, 2023
Created on Mar 16, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo scatter

This example presents a hand-coded static scatter plot titled “Pseudo Visualization,” rendered as six equally sized circles positioned across a 960-by-500 SVG canvas on a white background. The visualization is built with plain HTML and CSS, using no JavaScript libraries; each circle’s center and radius are specified directly in the markup. The layout mimics a pseudo-random distribution, though the coordinates are fixed and manually defined rather than generated by an algorithm.

Mmaciekawsq@gmail.com
93% match
Loading thumbnail…

Pseudo scatter plot

A pseudo scatter plot displays five fixed circles at arbitrary positions on a blank SVG canvas, with no data mapping or interaction. Each circle has a radius of 30 pixels, and their coordinates vary along the x- and y-axes, creating a sparse arrangement. The code uses plain SVG elements (circle, svg) within an HTML page, with no JavaScript libraries or frameworks. It demonstrates a minimal, static visualization of manually placed points, representing a conceptual precursor to a data-driven scatter plot without any computed scales or axes.

Yyankesswang
93% match
Loading thumbnail…

Pseudo Scatter Plot

This example shows six circles arranged diagonally across a white SVG canvas, creating a minimal pseudo-scatter plot. The circles are placed at fixed coordinates, with no axes or data mapping. The visualization uses raw SVG elements—a `<rect>` background and `<circle>` shapes—without any JavaScript libraries. The code is generated from Figma exports, as noted in the README, and rendered directly in the browser via static SVG markup. Each circle has a radius of 33.5 pixels, and their positions suggest a loose downward trend from left to right.

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

Pseudo Scatter

A pseudo-scatter plot arranges seven circles in a loose diagonal sweep across a white SVG canvas, suggesting clusters or points of interest without underlying data. Rendered as static SVG circles via plain HTML markup, each circle has a fixed radius of 38 pixels and explicit x/y coordinates, with no axis or grid. The composition evokes a scatterplot’s visual rhythm while omitting any statistical encoding, relying solely on positioned shapes to imply distribution. No JavaScript libraries or dynamic rendering are used; the visualization is purely declarative SVG.

Aalexscott-untitled
91% match
Loading thumbnail…

Psudo Scatter Plot

This example shows a sparse scatter plot with six circular points arranged diagonally across an SVG canvas. Each circle has a fixed radius and distinct x/y coordinates, creating a pseudo-random distribution that resembles a simple data visualization. The visualization is rendered using plain SVG elements—specifically `<circle>` and `<rect>` tags—within an HTML page. It uses React as the underlying framework, though the code is written as static markup without interactive features or data-binding logic. The white background and cleaned-up body styling highlight the simple, minimal approach to displaying categorical or numeric point data.

Ppanthabuddhi@gmail.com
91% 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
91% match