mphoshabalala

@mphoshabalala·4 public vizzes

Untitled

A minimal SVG visualization from the v3 collection. It creates a blank 960 by 500 pixel SVG canvas using a static HTML page with inline styles. The example demonstrates basic DOM manipulation by appending an SVG element via JavaScript and then leaving it empty; the provided code does not load data or render any visual marks. It relies solely on native Web APIs—`document.createElement` and `document.body.append`—without any external libraries like D3.

Aug 14, 2023

Loading thumbnail…

Pseudo scarter plot

This pseudo scatter plot displays a set of five black rectangles of varying heights and positions against a white background, loosely suggesting data points in a coordinate system. The rectangles are laid out with different x-coordinates and y-offsets, creating an abstract, non-traditional distribution. The visualization is rendered as a static SVG using React, with the markup defined directly in an HTML file that loads no external JavaScript libraries. The absence of axes or labels leaves interpretation open, focusing purely on the geometric arrangement of shapes.

Aug 13, 2023

Loading thumbnail…

svg fundamentals

This example demonstrates basic SVG fundamentals by rendering a collection of geometric shapes—circles, a rectangle, and an ellipse—on a white canvas. The SVG markup defines each element with explicit coordinates and styling attributes, such as `cx`, `cy`, `r`, `fill`, and `transform`. It uses the native SVG API in plain HTML, with a white background rectangle and multiple black or unfilled circles positioned at various points, alongside a single transformed ellipse. The code directly illustrates how to construct and position primitive shapes in the SVG coordinate system without any JavaScript or external libraries.

Aug 13, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the text “Hello HTML!” centered on a solid background. It serves as a bare-bones starter template for web development, showing how to combine HTML structure with CSS styling. The code uses a standard HTML document with an embedded `<style>` block that sets the font size to 13em and aligns the text to the center. It relies solely on native HTML and CSS without any external libraries or JavaScript functionality.

Aug 13, 2023