Puedo Charts 1

100%

Puedo Charts 1

✓ Published1🌍 Public

Last edited May 29, 2024

Created on May 29, 2024

This example demonstrates the use of raw SVG elements to construct a simple scatterplot-like composition. It displays thirteen black circles of varying positions across a 960-by-720 canvas on a white background, suggesting a rudimentary visualization of data points without axes or labels. The rendering is built entirely with basic SVG primitives, using `circle` and `rect` elements defined directly in the HTML. There are no external libraries or JavaScript APIs; the graphic is static, relying solely on the SVG `xmlns` namespace and inline styling to define the visual output.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Scatterplot

This example demonstrates a basic SVG scatterplot using three circles positioned at different coordinates with distinct fill colors. The visualization shows how SVG elements are structured and styled directly within an HTML document, with each circle representing a data point on a 960x500 canvas. The code uses raw SVG elements—`<svg>`, `<circle>`, and attributes like `cx`, `cy`, `r`, and `fill`—without any JavaScript libraries or data binding. It serves as a minimal introduction to SVG fundamentals, illustrating how to create and align basic shapes in a rendering context.

Cchacon1@uic.edu

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

Loading thumbnail…

Pseudo Scatterplot

An SVG pseudo scatterplot displays seven black circles arranged diagonally across a white canvas, suggesting a rough downward trend from upper left to lower right. Each circle has a uniform radius of 18 pixels, with coordinates explicitly set in the markup. The visualization uses raw SVG elements—`rect` for the background and `circle` for data points—defined directly in an HTML file with inline styles. No JavaScript libraries or data processing are involved; the chart is purely static and hand-coded.

Cchacon1@uic.edu

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

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

82% match

Loading thumbnail…

Pseudo Scatter Plot

This example shows a scatter plot with nine black circles arranged on a white background. It is a static visualization, with the points manually positioned at various coordinates across the SVG canvas. The graphic is created using raw SVG elements, specifically `circle` tags, and is built without the aid of any external JavaScript libraries or data bindings. The data points are hand-coded, making it a simple, non-interactive representation that demonstrates basic SVG rendering within an HTML page.

Hhelloelectro

82% match

Loading thumbnail…

Scatterplot

A scatterplot displays 12 black circles at varying positions across an SVG canvas, suggesting a simple distribution of data points without axes or labels. The visualization uses static SVG circle elements rendered within an HTML page, with coordinates and radii defined directly in the markup. CSS styles center the container and remove page margins. The implementation relies on plain JavaScript-free HTML, utilizing inline SVG properties rather than a framework or data-generation library.

CClaudio Puggioni

82% match

Loading thumbnail…

Pseudo Scatter Plot

This example presents a scatter plot using fixed, hand-coded SVG elements rather than data-driven generation. Seven circles act as data points, positioned at specific x and y coordinates on a white background. The rendering relies on raw SVG `<circle>` and `<rect>` tags, drawing directly within the markup without any JavaScript libraries or external data files. The visualization demonstrates how a simple coordinate system is approximated through static attributes, with each circle uniformly sized and colored. No interaction, axes, or tooltips are included, making it a purely static visual exercise.

Ccssergio

81% match