Wilson

@inocencio80·4 public vizzes

DataViz Starter

A minimal SVG-based starter template for data visualization, this example renders a single empty red rectangle onto a 960x500 canvas. It demonstrates the fundamental pattern of creating SVG elements programmatically through the Document Object Model (DOM) APIs, specifically using `document.createElementNS` and `setAttribute` to construct and configure the shape. The code shows the basic structure for bootstrapping a visualization project, with inline CSS resetting the page margins and hiding overflow. The approach highlights raw JavaScript manipulation of the SVG namespace without any additional libraries or data, serving as a foundation for more complex visualizations.

May 7, 2022

Loading thumbnail…

Fork of React Starter

This example displays a simple SVG smiley face in a React application. The drawing consists of a large yellow circle for the face and two smaller white circles for the eyes, all rendered as SVG elements. The code uses React and ReactDOM to define an `App` component and render it into the page’s root element. The React version is 16.13.1, and the visualization is constructed directly with SVG primitives such as `<circle>`.

Mar 31, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a simple smiley face using React and SVG. It draws a gray background with three circles—a large yellow head and two smaller white eyes—all styled with black outlines. The page includes a bare-bones HTML structure with inline CSS and a JavaScript `console.log` call. It loads React 17 from unpkg via CDN, though the rendering itself uses static SVG elements rather than React components.

Mar 31, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG drawing of a yellow circle with two smaller black circles forms a partial smiley face, missing the mouth. The 960-by-500 pixel SVG canvas centers the face at (480, 250) with a 245-pixel radius, using hardcoded coordinates for the eyes at (350, 180) and (600, 180). The code uses only native SVG elements—`circle` and `svg`—with no JavaScript libraries, directly setting fill, stroke, and stroke-width attributes. This is an incomplete fork of an example from v3, meant as a starting point for building a full face.

Mar 29, 2021