pseudo scatter plot

100%

pseudo scatter plot

✓ Published0🌍 Public

Last edited Oct 3, 2024

Created on Oct 3, 2024

This example shows six overlapping ellipses scattered across an SVG canvas, creating the illusion of a pseudo scatter plot where points are rendered as simple geometric shapes. The code uses raw SVG elements—specifically `<ellipse>` tags with explicit `cx`, `cy`, `rx`, and `ry` attributes—to place circles of varying colors (black and green) at fixed coordinates. No JavaScript libraries or data-binding frameworks are involved; the visualization relies entirely on static SVG markup with hardcoded positions and dimensions, making it a minimal, non-interactive demonstration of shape-based plotting in a browser.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot presents six black circular points scattered across a white 960 by 500 SVG canvas. Rather than using a traditional plotting library, the visualization manually positions each ellipse element at fixed coordinates to create the appearance of a scatter plot. The static example uses raw SVG with hardcoded `ellipse` tags, each with uniform 25.5-pixel radii and identical fill colors. No axes, labels, or data encodings are shown, making the piece a minimalist exercise in chart aesthetics rather than a functional statistical visualization.

Iigndukwe

89% match

Loading thumbnail…

Pseudo Scatter plot

This example shows a simple scatter plot made from eight black ellipses distributed across an SVG canvas. The ellipses are hardcoded with specific x, y, radius, and fill attributes, creating a pseudo-random arrangement reminiscent of a dataset. The visualization uses plain SVG elements within an HTML page, with no JavaScript libraries or interactive behaviors. It demonstrates a minimal, static approach to plotting points, relying solely on SVG’s built-in shape rendering.

EEarnAnurat

89% match

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot presents six black ellipses arranged across a white 960x500 SVG canvas, simulating the appearance of a scatter plot without underlying data points. Each ellipse is manually positioned at varying coordinates with consistent rx and ry values of 40.5 and 39, creating uniform circular shapes. The visualization uses raw SVG elements—specifically `<rect>` for the background and `<ellipse>` for the marks—embedded directly in HTML with minimal CSS to remove margins and scrolling. No JavaScript libraries or data processing are involved; the rendering relies entirely on static SVG markup.

TTheo-0201

89% match

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot uses a clean SVG canvas to display seven black ellipses against a white background with a light gray border. Each ellipse is positioned differently across the plot, using fixed `cx` and `cy` coordinates to approximate the placement of data points. The chart is built with raw SVG elements, including `rect` and `ellipse` tags, set within an HTML document. The minimalist design, with uniform ellipse sizes and no axes or labels, suggests a simple conceptual exercise rather than a representation of real-world data.

SSeanmgard

88% match

Loading thumbnail…

Pseudo Scatter Plot

This example uses raw SVG to place a set of black ellipses on a white canvas, which together approximate a scatter plot. Nine data points are positioned by their absolute coordinates in a 960-by-500 viewBox, each with a fixed radius of 41 on both axes. The HTML file contains no JavaScript or charting libraries; it simply defines an SVG scene with a background rectangle and nine ellipse elements. This demonstrates the fundamental SVG shapes and coordinate system that a library like D3 would otherwise generate dynamically to encode data.

Eellie.ackerson26@gmail.com

88% match

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot arranges thirteen evenly sized ellipses in a diagonal, upward-sloping pattern across a light gray SVG canvas. The circles progress from the lower left to the upper right, creating a visual representation of a distribution without any underlying data points. It is rendered entirely with static SVG `<ellipse>` elements and `<rect>` backgrounds, with no JavaScript or interaction. The minimalist design demonstrates how basic geometric shapes can simulate a scatter plot using only inline SVG markup and hardcoded coordinates.

KKhanAzmat

88% 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

87% match

Loading thumbnail…

Pseudo Scatter plot

This visualization uses static SVG circles to create a pseudo scatter plot, with each dark gray dot placed at fixed coordinates on a white background. The code directly embeds circle elements in the HTML, specifying cx, cy, and r attributes without any data binding or dynamic computation. While CSS transitions on hover change the ellipse’s fill color, the circles themselves remain static, and no interaction updates their positions. The example demonstrates basic SVG shape rendering and styling through pure HTML and CSS, with no JavaScript libraries involved.

Aandu006@gmail.com

85% match