JS Visualisation

100%

JS Visualisation

✓ Published1🌍 Public

Last edited Apr 22, 2024

Created on Apr 22, 2024

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.

AI-generated description

SVG Chart inspired by the taxonomy created here.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Pseudo Horizontal Bar chart

This example shows four black horizontal bars of varying lengths on a light gray background, with SVG text labels positioned to the left of each bar. The bars are rendered as SVG `rect` elements with fixed dimensions and positions, while the labels are drawn using SVG `path` elements that trace letterforms. The layout is hard-coded within the HTML, using no JavaScript libraries or data-binding frameworks. Instead, the visualization relies entirely on static SVG markup, making it a simple demonstration of how CSS and pure SVG can create a bar-chart-like composition.

AAshwani Sajwan

80% match

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

80% 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

80% match

Loading thumbnail…

Psudo Barplot 1

This example shows a simple bar chart with four bars of varying heights, rendered directly as SVG rectangles using HTML markup. Each bar is drawn with hard-coded x, y, width, and height attributes, without any JavaScript or data-binding library. The y-coordinate for each rectangle starts from the top of the 960×500 viewport, meaning taller bars extend downward. The visualization relies solely on inline SVG elements within the HTML file, with a minimal CSS reset to remove page margins and hide overflow.

Ppanthabuddhi@gmail.com

80% match

Loading thumbnail…

SVG Bar Chart

This example presents a combined bar and line chart rendered entirely as inline SVG. Five color-coded bars (A–E) represent values on a primary axis, while a connected orange line with circular markers traces a second series scaled against a parallel axis on the right. The chart uses manual SVG primitives like `<rect>`, `<path>`, and `<circle>` with explicit coordinate and height attributes, styled via the Poppins font and hover opacity transitions. Gridlines and dual-axis labels clarify the two independent value ranges.

Vvmistry94@gmail.com

79% match

Loading thumbnail…

HTML Starter Bar Chart

This example shows three horizontal bars of varying lengths rendered as SVG rectangles, each colored differently and labeled with text. The bars are drawn using the SVG `<rect>` element, with a white background and custom styling applied through CSS, including the Share Tech font. The page also displays a large "SVG Fundmentals" message, demonstrating basic HTML, CSS, and JavaScript integration without any external libraries or data sources.

Sstefano@nava.ch

79% match

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses SVG rectangles and paths to render a set of abstract, hand-drawn-style bars on a plain white background. The chart shows five vertical bars of varying heights and widths, arranged across the canvas with dark gray fills against a light gray backdrop. The code directly constructs each bar using static SVG elements, such as `<rect>` and `<path>`, rather than relying on a JavaScript library or data binding. With no scales, axes, or data-driven logic, this example serves as a minimal, visual approximation of a conventional bar chart.

WWannabeProgrammerr

79% match