dan.tinoco@gmail.com

@dan-tinoco·10 public vizzes

JS in HTML

This example demonstrates a basic HTML page with a single centered message styled using CSS. It renders the text "Hello HTML!" at a large font size using the `.message` class, with inline CSS controlling font size and alignment. The page contains no JavaScript or external libraries, relying solely on native HTML and CSS to display the static content. The simple structure serves as a minimal starter template for embedding content in a browser.

Sep 1, 2024

Loading thumbnail…

Moving Circles - using JOIN v1

Fifteen circles animate in a wave-like pattern across the screen, their vertical positions and radii oscillating sinusoidally over time. The visualization uses D3 v6’s `selectAll`, `data`, and `join` methods to bind and update circle elements on an SVG canvas, with a `setInterval` driving the animation at 60fps. Data is generated procedurally via `range` and trigonometric functions, demonstrating the core update pattern of D3’s data-join without explicit enter or exit handling.

Aug 30, 2024

Loading thumbnail…

Arrays Practice

A grid of 15 circles moves in a sine wave pattern across the screen, updating 60 times per second. The animation demonstrates array manipulation with D3.js, where each circle's position is calculated from its index in the data array using trigonometric functions. The SVG rendering uses D3's `select` and `range` APIs to create and update circles dynamically, with spacing based on index and vertical offset from `Math.sin`.

Aug 30, 2024

Loading thumbnail…

JavaScript Arrays - v1

This example demonstrates an empty SVG scene titled “JavaScript Arrays,” with a single commented-out `select('body').append('svg')` call in the source. The code imports `select` from D3 v6.6.1, but no data, shapes, or interactions are rendered. Instead, it serves as a minimal scaffold, showing the initial setup for a D3-based visualization without any observable output.

Aug 30, 2024

Loading thumbnail…

Full SoL LeWitt reproduction with D3 (from video)

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, masked to reveal geometric symbols. The visualization is rendered as an SVG via React and D3 v6, with the `d3.select`, `range`, `symbols`, and `symbol` APIs generating paths for the mask patterns. Two masks, one inverted, define which stripes appear in the final composition, creating a layered optical effect across the full viewport width. The code uses a fixed height of 200 pixels and no explicit data source beyond procedural generation.

Aug 30, 2024

Loading thumbnail…

JavaScript Arrays

This example demonstrates the "Hello World" of the VizHub V3 runtime environment, rendering a text element directly into a container using a `main` function. The code uses a plain HTML `div` with inline styling to display the text, with the font size controlled by the `fontSize` variable. The example highlights the simplified entry point and continuous hot reloading, where holding `Alt` and dragging a number in the editor updates the visualization in real time. It shows how the environment supports interactive widgets without the need for an `index.html` file.

Aug 30, 2024

Loading thumbnail…

Fork of SoL LeWitt with D3 (from video)

This example renders a generative art piece inspired by Sol LeWitt, using D3 v6 to create a grid of horizontal and vertical rectangles. Two SVG masks form a circular aperture, with one mask revealing the horizontal lines through a white circle and the other showing vertical lines outside a black circle. The drawing updates to the full window size and uses D3’s `select`, `range`, and `join` to bind data to the 100 rectangles per axis. The result is a clean, mask-based composition that changes with the viewport.

Aug 29, 2024

Loading thumbnail…

SoL LeWitt practice (from video)

This example generates a grid-based composition inspired by Sol LeWitt’s wall drawings. Using SVG elements created via the DOM API, it overlays two sets of thin rectangles—alternating vertical and horizontal stripes—onto a canvas. Two SVG masks, each containing a circle and a contrasting rectangular fill, control visibility: one mask reveals the vertical stripes within a central circle, while the other hides the horizontal stripes inside the same circular area. The result is a dynamic interplay of intersecting lines, with the circle acting as a focal lens that inverts the pattern. Rendered in a browser, it runs on JavaScript with no external libraries.

Aug 24, 2024

Loading thumbnail…

SVG Fundamentals (from video)

This example demonstrates SVG fundamentals using a simple star-shaped graphic composed of a red circle and a yellow path. The visualization showcases core SVG elements and attributes, including coordinates, stroke properties, and path commands. The circle uses explicit `cx`, `cy`, and `r` attributes, while the star is drawn with a `d` attribute containing absolute and relative line commands (M, l, L). The code is minimal and static, rendered directly in the browser without any external libraries or JavaScript logic, relying purely on HTML and SVG markup.

Aug 22, 2024

Loading thumbnail…

svg fundamentals (from video)

This example demonstrates the foundational structure of a VizHub V3 visualization, showing a “Hello World” message rendered directly into a container using JavaScript and inline HTML. The code exports a `main` function that sets the container’s inner HTML with a large, adjustable font size, highlighting how interactive widgets enable real-time property changes. It uses no external libraries, relying on the VizHub runtime’s `container` argument and direct DOM manipulation to display static text.

Aug 21, 2024