Kerotyzzzmo

@Kerotyzzzmo·8 public vizzes

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt wall drawing using an abstract geometric composition of repeated vertical bars. The SVG canvas fills the entire browser window, with one hundred thin rectangles evenly spaced across the width, each extending the full height of the viewport. The code generates each rectangle dynamically via the SVG DOM API, setting the x position and width attributes in a loop. The work highlights the minimalist aesthetic of LeWitt’s instructional art through a purely algorithmic, code-driven rendering approach.

Dec 30, 2022

Loading thumbnail…

JavaScript Basics

This example demonstrates basic JavaScript syntax and concepts through a series of commented-out examples, including variables, arithmetic, functions, arrow functions, and object literals. The active code defines an arrow function `person` that returns an object with `first` and `last` properties, then logs the result to the console. It uses an SVG element for structure but relies entirely on the browser's developer console for output. The visualization is rendered without any external libraries, focusing purely on core programming fundamentals rather than data-driven graphics.

Dec 30, 2022

Loading thumbnail…

Investigation of CSS Precedence

This example presents a static HTML page that visualizes the precedence of CSS style rules. It shows how different selectors and inline styles determine the final color of heading elements; an `<h1>` turns red from a stylesheet rule, while two `<h2>` elements become blue and green from their respective inline `style` attributes. The page relies on raw HTML, embedded CSS, and the browser’s default styling engine, with no JavaScript libraries. The rendering approach is direct DOM display, illustrating cascade behavior without interactivity.

Dec 29, 2022

Loading thumbnail…

Pseudo Line Chart

A pseudo line chart approximates a line plot with a single thick black stroke that connects six data points across a white SVG canvas. The path uses manually defined coordinates rather than a data-driven scale, creating a stylized, hand-drawn appearance. The example employs SVG path elements with a 15-pixel stroke width, set within an HTML document styled with the Share Tech font from Google Fonts. The rendering is purely static, with no axes, labels, or interactive behavior, emphasizing the abstract visual form over quantitative accuracy.

Dec 29, 2022

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a stylized horizontal bar chart using four labeled bars (A–D) of varying widths. The visualization uses SVG rectangles to encode values, with each bar positioned to align with its corresponding text label. It relies on the SVG API directly for drawing, and uses the Share Tech font from Google Fonts for typography. The chart approximates a classic bar layout while omitting axes and scales, focusing purely on the geometric relationship between categories and their proportional lengths.

Dec 28, 2022

Loading thumbnail…

Pseudo Bar Chart

The visualization is a pseudo bar chart that approximates conventional bar graphs using four unlabeled, solid black rectangles of varying heights on a white background. It shows a simple categorical comparison, where the tallest bar is on the left, the shortest is in the third position, and the others fall in between. The chart is rendered as static SVG shapes using raw `rect` elements within an HTML page. The code uses no JavaScript libraries or data processing, relying solely on hard-coded pixel coordinates and dimensions in the SVG markup.

Dec 28, 2022

Loading thumbnail…

Pseudo Scatter

A single SVG contains six large gray circles positioned across a white canvas, creating a sparse pseudo-scatter plot. Each circle has a fixed radius of 34.5 pixels and no visible data labels or axes. The rendering relies entirely on hard-coded `<circle>` coordinates in static markup, with no JavaScript libraries, simulation, or dynamic layout. The arrangement resembles clustered points but lacks any encoding of values or relationships, serving as a minimal, stylized approximation of a scatter plot rather than a functional data visualization.

Dec 28, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape creation and styling within a static HTML document. It renders a pink background rectangle, a white inner rectangle, and two purple circles positioned side by side. The code uses the native SVG API with elements like `<rect>` and `<circle>`, setting attributes such as `fill`, `width`, `height`, and `cx`/`cy` directly in the markup. No JavaScript libraries are employed; the visualization relies solely on declarative SVG syntax embedded in the `index.html` file.

Dec 28, 2022