WannabeProgrammerr

@WannabeProgrammerr·4 public vizzes

Fork of Pseudo Bar Chart 2

This fork of D3’s Pseudo Bar Chart 2 uses raw SVG elements to draw five horizontal black bars on a white background, each with differing widths and labeled with letters. The chart encodes categorical values through bar length, though no underlying data or axes are present. The code constructs the visualization directly with `<rect>` and `<text>` tags inside an SVG container, without using any D3 scales, layouts, or data-binding methods. The rendering is purely static, with bar widths hardcoded in the SVG coordinates.

Dec 23, 2022

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses SVG rectangles and paths to render a set of abstract, hand-drawn-style bars on a plain white background. The chart shows five vertical bars of varying heights and widths, arranged across the canvas with dark gray fills against a light gray backdrop. The code directly constructs each bar using static SVG elements, such as `<rect>` and `<path>`, rather than relying on a JavaScript library or data binding. With no scales, axes, or data-driven logic, this example serves as a minimal, visual approximation of a conventional bar chart.

Dec 23, 2022

Loading thumbnail…

Untitled

This scatterplot visualization displays eight dark, irregularly shaped polygons scattered across a light gray background. Each shape resembles a blob or cluster, with varying sizes and positions distributed throughout the canvas. The rendering uses raw SVG elements defined directly in the HTML file, with each polygon constructed from complex path data that outlines its form. The visualization employs a clip-path and a white background rectangle within an SVG viewport of 960 by 500 pixels, providing a clean, minimal aesthetic for comparing the spatial distribution and relative sizes of the shapes.

Dec 23, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates a grid of solid-color circles arranged to show basic SVG shape construction and layering. It uses inline SVG markup within an HTML document to render ten circles with varying radii and colors, including a stack of nested circles at the right center. The circles are positioned using explicit `cx` and `cy` coordinates, with `fill` attributes defining their color. No external libraries or JavaScript are involved; the rendering relies entirely on the browser’s native SVG support, making it a static, code-only illustration of fundamental vector graphics primitives.

Dec 23, 2022