Skip to main content
SimilarExport ZIP
100%

CreateElementNS

✓ Published0🌍 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.

MIT Licensed

Similar vizzes

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
79% match
Loading thumbnail…

SVG starter

This example demonstrates a minimal SVG-based bar chart with three static rectangles rendered in steelblue, green, and red. The SVG canvas is created by appending an `svg` element to the HTML body via D3's selection API, with a height of 500 and width of 960. Each rectangle is positioned using explicit `x` and `height` attributes, with widths fixed at 50 pixels. A loop then appends additional red rectangles at intervals of 100 pixels, though the loop condition prevents it from executing properly.

NNita
77% match
Loading thumbnail…

SVG fundamental

This example demonstrates fundamental SVG rendering in React, showing a bar chart with green rectangles of varying heights and a detailed axis with tick marks. The visualization uses raw SVG elements including `rect` for the bars and repeated `line` elements for the axis ticks, all defined directly in JSX within the HTML structure. The chart displays four data bars arranged horizontally on a white background within a 1280x832 viewBox, with the tallest bar on the right and progressively shorter bars moving left. The rendering relies entirely on static SVG markup without any JavaScript libraries or data processing.

Rrwata97
76% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and text elements as a static bar chart-like visualization. The code uses the raw SVG API with `circle`, `rect`, and `text` tags to render four labeled rectangles of decreasing widths. The JavaScript-free page relies on hardcoded pixel coordinates and fill colors with no data binding or interaction. It serves as a minimal introduction to SVG’s coordinate system and shape primitives within a React-free HTML context.

KKaan
76% match
Loading thumbnail…

JS Visualisation

This example generates a full-screen SVG visualization of 100 vertical bars, each spaced 20 pixels apart with a width of 10 pixels, filling the entire viewport height. The bars are created dynamically using the Document Object Model (DOM) API, specifically `createElementNS` for the SVG namespace, and appended to the document body. The chart uses the Poppins font for any text elements, though no text labels are rendered. The visualization shows a simple bar chart structure without data values, serving as a minimal template for bar chart taxonomy exploration.

Vvmistry94@gmail.com
75% match
Loading thumbnail…

Bar SVG Fundamentals

This example demonstrates a basic bar chart rendered entirely as static SVG elements, with a grey background and four dark bars of varying heights. The chart uses raw SVG markup within an HTML page, with each bar drawn using a `<rect>` element that specifies its x and y position, width, height, and fill color. The visualization relies on manual coordinate and dimension values rather than any data-binding or layout algorithm, showing the fundamental building blocks of SVG-based graphics in a React-free, bare-minimum HTML context. The chart’s values are hard-coded, so it does not respond to data changes or user interaction.

Ssubratanp
75% match
Loading thumbnail…

getting started with svg and data visualizations

This example demonstrates how to manually construct SVG elements to create a simple bar chart from a list of web development topics. It uses raw SVG primitives, including `<text>` for labels and a `<path>` with `M` and `l` commands to draw horizontal bars, with hardcoded coordinates. The page also includes basic CSS resets to control box sizing. No external libraries are used; the visualization relies entirely on static SVG markup within an HTML document.

Ppuya ars
74% match
Loading thumbnail…

Creating SVG Bar Chart

This example demonstrates a simple SVG bar chart built with D3 version 6. It generates a random dataset of ten values using `d3.range` and `Math.random`, then renders each value as a `rect` element, with its height and vertical position proportional to the data. The chart also labels each bar with a `text` element showing its value. The code uses D3’s `select`, `selectAll`, `data`, and `enter` methods to bind data and create the SVG elements, with bars colored using an RGB fill based on each value.

DDasbach.EJ
74% match