valsorayksterob

@valsorayksterob·9 public vizzes

Untitled

This interactive map displays three highlighted countries—Poland, Ukraine, and Romania—as colored rectangular paths within an SVG container. Clicking a country updates a separate div to show its name, while hovering temporarily reduces the path’s opacity. The implementation uses plain JavaScript event listeners for click and mouseover/mouseout interactions, with a switch statement mapping country IDs to labels. The example demonstrates D3 version 6 setup but relies on native DOM APIs rather than d3 methods for interaction.

Apr 24, 2023

Loading thumbnail…

D3 Selection

This example demonstrates a dynamic set of 50 circles that move vertically in a wave-like pattern using a cosine function. The animation updates every 50 milliseconds, with each circle’s y-coordinate shifting based on its x-position and a time increment. The visualization shows D3’s selection and update capabilities, where circles are appended to the SVG canvas and their attributes (cx, cy, fill) are updated in place. The code uses `d3.select`, `d3.range`, and D3’s enter/update selection API to efficiently manage the animated data.

Apr 12, 2023

Loading thumbnail…

JS Arrays

This example demonstrates how JavaScript array methods can be used for data manipulation and transformation. The code defines a `range()` function to generate a numeric array, then iterates through it with `forEach()`. It also showcases `sort()` for ordering objects by key and `reduce()` to convert an array of key-value entries into a single object. The visualization consists of console output showing these array operations, with an HTML page styled using CSS for the displayed message.

Apr 11, 2023

Loading thumbnail…

Fork of Landcape

This piece generates an abstract geometric landscape from SVG rectangles, using alternating horizontal and vertical bands that intersect to form a grid-like pattern. The artwork references Sol LeWitt’s conceptual style, though the specific visual layout is defined by the code's loop over 100 iterations. Built with the D3.js library (v7.8.4), it leverages D3's `select`, `range`, `symbols`, and `symbol` APIs to construct the SVG elements dynamically. Two masks are applied—one inverting colors—using paths generated from D3's symbolic shapes, which modify the visibility of the overlaid rectangles and create layered, translucent regions across the full canvas.

Apr 11, 2023

Loading thumbnail…

Fork of Landcape

A fork of Sol LeWitt's generative line drawings, this visualization renders 100 rotated lines from a single origin point. Each line uses the SVG `rect` element with a random hexadecimal color and an incremental rotation transform, creating a radiating, multicolored landscape. The code sets the SVG canvas dimensions to match the browser window, with `overflow` hidden, and runs in a loop to generate the composition. The piece demonstrates a simple, algorithmic approach to abstract art, relying on the Document Object Model and SVG APIs to construct the visual output.

Apr 6, 2023

Loading thumbnail…

Fork of Landcape

This piece recreates a Sol LeWitt-inspired composition using a generative drawing algorithm. Vertical and horizontal stripes are overlaid, with two circular masks creating a layered, interlocking visual effect. The artwork is built entirely with raw SVG elements and masks, generated through JavaScript loops. The code manipulates SVG `mask` elements to alternate visibility between the two sets of lines, resulting in a dynamic interplay of stripes within and outside the central circular region. The page uses no external libraries, relying on core DOM manipulation and SVG APIs.

Apr 6, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a hand-drawn SVG illustration of a face alongside decorative text, rendered in a web page styled with CSS. The JavaScript-free visualization relies on CSS hover effects to change color, while the SVG paths remain static. Fonts are loaded from Google Fonts, and the document structure is defined in a single HTML file with a linked stylesheet. The design demonstrates basic SVG shape composition and interactive styling without additional libraries.

Apr 6, 2023

Loading thumbnail…

Pseudo

This example shows four gray bars labeled A, B, C, and D, each with different heights representing categorical values. The bars are rendered as SVG rectangles on a white background, with text elements using black fill for labels. The visualization uses a static HTML page with CSS for styling and inline SVG markup, demonstrating a minimal bar chart without any JavaScript libraries or data processing. The bars are positioned at fixed coordinates within a 361×372 viewBox, with heights varying from 120 to 328 pixels to convey relative magnitudes.

Apr 5, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape elements, including circles, rectangles, lines, and paths, rendered directly on an HTML page. It shows how these primitives are defined with coordinates, dimensions, and styling attributes such as fill colors and stroke properties. The code uses native SVG markup inside an inline `<svg>` element with a width of 960 and height of 500. It illustrates fundamental vector graphics concepts without relying on external libraries, focusing on the core structure and attributes of SVG.

Apr 5, 2023