Alim Bolar

@alimbolar·7 public vizzes

Bar Graphs With Flex

This example shows how CSS Flexbox can be used to lay out repeated bar-chart categories, with each category containing five colored bars whose widths and hues are generated programmatically in a loop. The code builds DOM elements directly via vanilla JavaScript, using `document.createElement`, `setAttribute`, and `style.width` and `style.background` with HSL colors, while the body and category containers use `display: flex` and `flex-direction: column` for vertical stacking. No external libraries are employed; the data is synthetic, with bar widths increasing by 50 pixels and hues shifting from yellow to red across each group.

Aug 10, 2022

Loading thumbnail…

CreateElementNS

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.

Aug 9, 2022

Loading thumbnail…

Animate

This example shows a single yellow rectangle centered on a gray SVG canvas, dynamically resizing and skewing through a looping animation against a pink page background. The rectangle’s fill, stroke, and dimensions transition smoothly via CSS transitions, while a keyframe animation named `grow` drives its scale and skew transformations. The code uses plain HTML, CSS, and JavaScript, with the SVG rendered directly in the markup and styled through embedded styles.

Aug 6, 2022

Loading thumbnail…

CSS Transitions

This example demonstrates CSS transitions applied to SVG elements, showing how a yellow rectangle scales, changes fill color, and alters stroke properties when hovered. The rectangle’s transition is defined for fill (0.5s), transform (1s), stroke (1s), and stroke-width (2s), with a hover state triggering red fill, 1.2× scale, and thicker green stroke. The code uses a plain HTML page with inline CSS and JavaScript, embedding an SVG element directly in the markup. The SVG has a grey background with a red border, centered on a pink page.

Aug 5, 2022

Loading thumbnail…

Rectangles

This example centers a single green rectangle on a gray SVG canvas, sized to half the viewport’s width and height. A pink page background and red SVG border frame the composition. The code uses vanilla JavaScript to query the SVG element via `document.querySelector`, reads its `clientWidth` and `clientHeight`, then sets the rectangle’s `x`, `y`, `width`, and `height` attributes dynamically. CSS styles the body and a `.center` class, while the rectangle receives its fill, yellow stroke, and stroke width through `setAttribute` calls.

Aug 5, 2022

Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

Aug 5, 2022

Loading thumbnail…

Alim's HTML Starter

This example shows an interactive SVG drawing of a zigzag path on a 600-by-600 canvas, with hover effects on rectangle elements that change their fill color and rotate them. The page uses plain HTML with embedded CSS and JavaScript—no external libraries—and renders shapes via the SVG `path` and `rect` elements. CSS transitions animate the hover state over one second, while the styled path uses black strokes with varying line segments. The code demonstrates minimal SVG manipulation within a static HTML document, serving as a bare-bones starter template for custom visualization experiments.

Aug 5, 2022