Skip to main content
SimilarExport ZIP
100%

E3 | Viz with Vanilla JS

✓ Published0🌍 Public
Aaschue
Last edited Apr 7, 2021
Created on Apr 6, 2021
Forked from HTML Starter

The page displays a simple, full-viewport visualization of 100 vertical grey bars created programmatically. It shows how to generate an SVG document dynamically using the Document Object Model API, without any external visualization libraries. The script calculates the browser's inner width and height to size the SVG element and its bars, which are evenly spaced horizontally. This example serves as a minimal introduction to building vector graphics from scratch, with a console message greeting the author, demonstrating basic JavaScript variable declarations and SVG element creation.

AI-generated description

My first page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Barchart Vanila Javascript

This example displays a bar chart of 80 randomly generated values, rendered as green bars with their numerical values appearing on hover. The visualization is built entirely with vanilla JavaScript and the SVG API, creating each rectangle and text element programmatically using `createElementNS`. The bars have a semi-transparent appearance that becomes fully opaque with a thicker stroke on mouseover, while the corresponding value label fades in using a CSS sibling selector. The chart fills the entire browser window by using `window.innerWidth` and `window.innerHeight` to set the SVG dimensions.

Sserebryanaya.n@gmail.com
76% match
Loading thumbnail…

Javascript 101

This example presents a static SVG bar chart titled "Javascript 101," rendered with a single white bar outlined in black. It primarily serves as a canvas for commented JavaScript code snippets that demonstrate core programming concepts, including function definitions, object creation, array manipulation with `map` and `splice`, and a simple data storage system using `updateLevelData` and `getLevelData`. The visualization shows how text and basic shapes can be combined with code annotations, using a fixed 960x500 SVG canvas and styled text at 72px.

KKhanin Sisaengsuwanchai
74% match
Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Nnubhatia
74% match
Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 4

This interactive visualization displays two overlapping rectangular grids of colored bars across the full browser window. One set of vertical bars covers the screen, while the second set of horizontal bars is restricted to a circular mask centered in the view. Each of the 200 vertical bars is randomly colored and animated with infinite looping duration, though no keyframes are specified. The piece is built with vanilla JavaScript creating SVG elements directly, using the DOM API for shape creation and styling.

NNita
73% match
Loading thumbnail…

Create SVG Use JavaScript

This example shows a simple JavaScript approach to generating SVG graphics without any external libraries. The code creates a full-window SVG element and populates it with 100 horizontal rectangle bars, each 10 pixels tall and spaced 20 pixels apart, using the W3C SVG namespace via `document.createElementNS`. The rectangles fill the entire width of the browser window, producing a basic striped pattern that demonstrates programmatic vector graphics creation and DOM manipulation through native browser APIs.

Yyl.wang
73% match
Loading thumbnail…

Pseudo Viz

This example shows three horizontal bars labeled Bar 1, Bar 2, and Bar 3, with varying widths representing different values. The visualization is rendered as static SVG elements directly in the HTML, using `<rect>` for the bars and `<text>` for labels, styled with CSS for font size and color. The code relies on standard HTML, CSS, and JavaScript APIs without any external libraries or data processing, presenting a simple hardcoded bar chart layout.

SSami Kauhanen-Duac
72% match
Loading thumbnail…

SVG fundamental

This example shows four black horizontal bars of decreasing width labeled A through D, creating a simple data-encoding visualization. The bars are drawn as SVG `<rect>` elements with fixed pixel dimensions, while the labels use SVG `<text>` elements. The page relies on plain HTML, CSS for styling (including font size and margin reset), and JavaScript is referenced though not directly used in the visible code. Rendering is handled entirely through inline SVG within the `index.html` file, demonstrating fundamental SVG shape and text placement without external libraries or data sources.

NNafi
72% match
Loading thumbnail…

SVG Fundamentals

This example introduces the foundational building blocks of web-based visualization by displaying a plain HTML page with a large “Hello HTML” message rendered through CSS. It pairs this with a JavaScript console log, demonstrating the basic separation of structure, styling, and scripting. The code uses the native DOM and `console.log` API directly, with no external libraries, serving as a minimal starter for later React and D3 integration.

AAng Yi Zhe
71% match