Skip to main content
SimilarExport ZIP
100%

Ep 2: Pseudo visualisation

✓ Published1🌍 Public
Kkwambokar
Last edited Aug 6, 2022
Created on Aug 5, 2022
Forked from HTML Starter

This example shows a sparse scatterplot of six dark circular marks scattered across a white 960-by-500 SVG canvas, with no axes, labels, or underlying data. The rendering is hand-coded in SVG, using static `<path>` elements with explicit coordinate arcs for each circle, wrapped in a `<g>` with a `clip-path` to constrain drawing to the canvas bounds. The code also includes a minimal HTML page with CSS resetting body margins, but no JavaScript libraries or data-processing logic are present, making it a purely visual placeholder.

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 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
84% match
Loading thumbnail…

Psudo visualisation

A minimal static SVG scene presents six black circles scattered across a white canvas on a 960-by-500 viewBox. The markup, authored in plain HTML with embedded CSS and JavaScript, draws each ellipse with explicit coordinate and radius attributes. No interactive behavior or animation is implemented; the visualization simply shows the arrangement of these abstract shapes using React and SVG rendering. The source data is hard-coded in the index file rather than loaded from an external dataset.

Iigndukwe
83% match
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
83% match
Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot uses a minimalist SVG canvas to approximate the visual language of a scatter plot without axes, labels, or data encoding. Instead of mapping data values, it places eight identical gray circles at varying coordinates across a white 960×500 background, with all points sharing the same radius and fill. The rendering relies solely on static SVG `<circle>` elements, with no JavaScript libraries or interactive transitions. The title highlights its conceptual mimicry of a scatter plot’s visual form, while the code demonstrates a hand-coded, fixed arrangement that forgoes any data-driven scaling or layout logic.

Ppaddyokore39@gmail.com
83% match
Loading thumbnail…

Fork of Pseudo Scatter Plot

This example demonstrates the fundamental building blocks of SVG graphics, presenting seven black circles arranged at scattered coordinates across a white rectangular canvas. The visualization showcases basic vector shape creation using the SVG `<svg>`, `<rect>`, and `<circle>` elements directly inline in an HTML page. Each circle is positioned using explicit `cx` and `cy` attributes with a uniform `r` value of 50 pixels. The code relies purely on static SVG markup without any JavaScript libraries, frameworks, or external styling, providing a minimal illustration of how geometric primitives compose a simple graphical composition.

Jjinjuta.s.au@gmail.com
83% match
Loading thumbnail…

002 : "Pseudo Visualizations"

Six circles form an approximate scatter plot against a white background, with positions suggesting a downward trend from left to right. The SVG rendering uses no JavaScript or data-binding libraries, relying instead on hardcoded circle elements with fixed coordinates and radii. Each circle is identical in size, and the minimalist composition focuses on the visual pattern created by their varying placements rather than encoding additional data dimensions. The example demonstrates a static, hand-authored visualization without animation or interactivity.

MMark Beveridge
83% 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
82% 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
82% match