GusnaRWX

@GusnaRWX·10 public vizzes

d3d3d3 4

A sparse, full-window SVG canvas is created using D3, with the intention of reproducing a Sol LeWitt art piece. The example sets up the page dimensions and appends an empty SVG element to the body, but does not yet draw any shapes or lines. The code relies on D3’s `select` and `append` methods to handle the DOM structure, with the rendering approach being pure SVG output. The piece is presented as a starting point for visual iteration, referencing LeWitt’s conceptual style.

Dec 29, 2023

Loading thumbnail…

excercise_company_structure_with_d3

This example shows a hierarchical company structure as a color-coded tree diagram, with a root “HEAD” node branching into two categories: where items are referenced and what items are using. Each category is further grouped by type (Layout, CustomField, ApexClass), revealing individual labeled leaves with IDs. The code builds the data through `d3.hierarchy` and `d3.tree`, then renders nodes as SVG rectangles with embedded HTML via `foreignObject`. Node colors vary by depth using a helper function, while edges are drawn as paths. The visualization uses `d3.select` for DOM manipulation and static constants for dimensions and styling.

Dec 29, 2023

Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

Dec 28, 2023

Loading thumbnail…

d3d3d3 2

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

Dec 28, 2023

Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

Dec 28, 2023

Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

Dec 28, 2023

Loading thumbnail…

thursday, 28-December-2023

This example presents a single, large message reading “Hello HTML!” centered on the page. It demonstrates the fundamental web stack of HTML, CSS, and JavaScript, with the text styled using the `font-size` and `text-align` CSS properties. The rendering is a simple static page defined in `index.html`, and the project includes a reference to a React starter template, indicating the code can be adapted into a React framework.

Dec 28, 2023

Loading thumbnail…

js-visualization

This example renders two sets of overlapping SVG rectangles—horizontal red stripes and alternating green vertical stripes—that are masked by circular cutouts to create a dynamic patterned display. The entire visualization rotates continuously via CSS animation. The code builds the SVG scene imperatively using the DOM API, creating masks, rectangles, and circles with `document.createElementNS`, while styling spins through keyframes defined in CSS.

Dec 18, 2023

Loading thumbnail…

venn diagram

This example presents a Venn diagram using two overlapping circles rendered inside an SVG canvas. The visualization is built with React, and the SVG elements are constructed directly in the HTML markup. A blue circle represents one set, while its overlap with a second circle is highlighted using white strokes with partial opacity, visually distinguishing the intersection region. The code includes commented-out CSS transitions and hover effects, though these are not active in the current version. The diagram is static, with no interactive behavior or data-driven logic implemented in the JavaScript section.

Dec 11, 2023

Loading thumbnail…

SVG Fundamental

This example shows fundamental SVG shapes, including circles, rectangles, lines, and paths, along with CSS styling and hover effects like color transitions and stroke-width changes. It also includes a detailed icon constructed from multiple SVG paths. The code demonstrates raw SVG markup and CSS rules, with styling for text, body margins, and overflow. The implementation uses plain HTML and CSS without any JavaScript libraries or data sources.

Dec 7, 2023