Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

CreateElementNS

Public visualization

Viewing a saved revision (read-only)

12f14b092eee4c3289e66802b5f3ef81

CreateElementNS

0 stars0🌍 Public
AAlim Bolar
Last edited Aug 9, 2022
Created on Aug 9, 2022
Forked from HTML Starter

This example demonstrates how to create SVG elements programmatically using the native `createElementNS` API in plain JavaScript, producing a simple bar chart with red rectangles and corresponding labels. The visualization renders five bars of random widths, each paired with a text label reading "Product No : 1" through "Product No : 5". The code sets up an SVG canvas with a white background, then loops to generate each bar and label, assigning random widths via `Math.random()` and positioning them vertically in a grid-like layout. It relies on standard Document Object Model methods such as `setAttribute` and `append`, without any external libraries.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.