Skip to main content
SimilarExport ZIP
100%

Fork of SVG Fundamentals

✓ Published1🌍 Public
Iibaird6@gatech.edu
Last edited Sep 10, 2025
Created on Sep 10, 2025

This fork of SVG Fundamentals presents a pseudo scatterplot using hand-coded SVG primitives. It renders a series of overlapping black circles of uniform radius across a white background on a fixed 950x500 viewBox. The circles are placed at various coordinates to simulate a minimalist data distribution, though no actual data is loaded. The visualization relies solely on inline SVG elements, with no JavaScript libraries involved, as index.js only logs a greeting. The rendering approach is purely static, using SVG’s `circle` and `rect` elements for the chart and background.

AI-generated description

an approximation of a scatterplot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Scatter Plot

A fork of an approximate scatter plot renders six white circles of equal size on a white background, positioned diagonally from the lower left to the upper right. Each circle is drawn directly as an SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes, and a single `<rect>` serves as the canvas background. The chart uses no JavaScript libraries or data-loading mechanisms, relying entirely on static SVG markup within an `index.html` file. The rendering approach is fixed and non-interactive, displaying a minimal, pseudo-random distribution of points.

Yyholly
84% match
Loading thumbnail…

Fork of Pseudo Scatter Plot With HTML

This fork of the original "Pseudo Scatter Plot" example uses a fixed set of six SVG `<circle>` elements, each with explicit `cx`, `cy`, and `r` attributes, to create a simple calibrated dot plot. The HTML file contains a single inline SVG graphic of 960 by 500 pixels, with no JavaScript or external libraries involved. The circles are positioned to simulate a scatter plot trend, though the data values are hardcoded in the markup rather than generated from a dataset. This rendering approach highlights static SVG positioning as the core visualization mechanism.

BBismark Kofi Owusu Sarfo
83% match
Loading thumbnail…

Fork of SVG Fundamentals

This fork of the SVG Fundamentals example demonstrates basic vector graphics rendering using raw SVG elements embedded in an HTML page. The visualization displays simple geometric shapes, including circles with varying fill colors and a rectangle with a blue fill and brown stroke, all positioned within a 600x1000 canvas. A second variation adjusts the layout with a 960x500 viewport and adds a single tall rectangle. The code uses no external JavaScript libraries, relying instead on native SVG markup and minimal CSS to control body margins and overflow for a clean presentation.

Nnatsgeorge.ng@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…

Fork of SVG Fundamentals

This fork demonstrates fundamental SVG shapes and attributes in a raw, unstyled 960x500 canvas. The code draws overlapping circles with explicit `cx`, `cy`, `r`, and `fill` properties, a thick navy `line`, a complex closed `path` with cubic Bézier commands, and another open `path` with a black stroke. The markup also includes an inert `<rec>` element—an intentional typo—and an empty commented-out `<rect>`. The example relies entirely on native SVG elements, using no external libraries, and renders directly in the browser via inline SVG.

Ddora.frauscher@gmx.at
82% match
Loading thumbnail…

Fork of Pseudo Scatter Plot

A scatter plot approximation displays six circles of equal size arranged diagonally across an SVG canvas, from the lower-left to upper-right. The circles sit at increasing x-coordinates while their y-coordinates decrease, suggesting a trend. The visualization uses static SVG `<circle>` elements with explicitly defined `cx`, `cy`, and `r` attributes, rather than a data-driven framework. This minimal, hand-coded example demonstrates basic SVG positioning without any JavaScript libraries or dynamic rendering.

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

Fork of Fork of SVG fundamentals

A minimal SVG fundamentals example renders a single circle in the center of an empty HTML page. The visualization loads a standalone SVG document containing one `<circle>` element with fixed `cx`, `cy`, and `r` attributes. The page uses a plain SVG tag directly in the HTML, without JavaScript or external libraries. A linked stylesheet defines a CSS class that is unused by the rendered graphic. The accompanying `index.js` file only logs a string to the console, contributing no visual behavior.

Iilhemdebbagh86@gmail.com
82% match