Abdure-bit

@Abdure-bit·4 public vizzes

React smile

A static smiley face rendered as yellow SVG circles appears on a blank canvas. The React application draws one large circle for the face, and the commented-out code in the HTML file indicates that the eyes and mouth are also circles, though only the face is active in the running component. The example uses React 18.2 and ReactDOM to render the SVG directly into a `#root` div, with the `index.js` file defining the component and calling `ReactDOM.render`. The code loads the libraries from unpkg, and the active SVG is 960 by 500 pixels.

Sep 27, 2022

Loading thumbnail…

Class 1

This example introduces basic SVG primitives for data visualization. It draws shapes including circles, a line, a path, and a rectangle, with some elements filled in red or green and strokes in navy or brown. The code uses raw SVG elements such as `<circle>`, `<line>`, `<path>`, and `<rect>` within an HTML page. The visualization is rendered as static SVG, with no interactivity, and appears to demonstrate shape fundamentals rather than represent a specific dataset.

Sep 20, 2022

Loading thumbnail…

Fork of Sol LeWitt reproduction circle

This example recreates Sol LeWitt’s geometric wall drawing using overlapping horizontal and vertical striped bands. A central circle is isolated through two SVG masks: one shows the horizontal stripes inside the circle, while the other reveals vertical stripes outside it. The code builds the SVG entirely via native DOM methods like `document.createElementNS` and `setAttribute`, with no external libraries. Each stripe is a thin rectangle, and the masks are defined with black-and-white fill patterns to clip the 100 stripes per direction.

Sep 18, 2022

Loading thumbnail…

SVG intro

This example introduces SVG for data visualization by displaying basic geometric shapes. It shows a black circle, a red circle, a navy line, and a green path with a navy stroke, all enclosed within a brown rectangular border on a 1000-by-101 canvas. The code uses inline SVG elements such as `circle`, `line`, `path`, and `rect` directly in an HTML document. The shapes are not derived from external data; they are hardcoded primitives demonstrating static vector rendering. The path defines a simple two-segment line, and the border uses a `stroke-width` of 2, with the page also containing plain HTML text.

Sep 14, 2022