fdrigui

@fdrigui·6 public vizzes

Fork of HTML Starter

A wave-like pattern of 15 circles oscillates across the screen, moving vertically in a sine wave that shifts over time. The visualization uses D3's `select` and `range` functions to generate the data, and the `join` method to bind it to SVG circle elements. Each frame updates the `cx` and `cy` attributes based on the current time value `t`, which increments by 0.01. The animation runs continuously via `setInterval` at 60 frames per second, rendering in an SVG canvas sized to the browser window.

Oct 20, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page with embedded JavaScript, demonstrating basic array manipulation and a custom `range` function. The code defines `range`, which initializes an empty array and contains a `for` loop that doesn’t increment its counter, leaving the array empty. It logs the result of `range(5)` to the console, and includes commented-out lines showing `push` and array indexing. The page uses no external libraries—only vanilla JavaScript and the browser’s native `console.log` API for output.

Oct 20, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates a minimal JavaScript program that creates an array containing three numeric elements and logs it to the browser console. The code defines the array `[0, 1, 2]` and calls the built-in `console.log` method to output the array. It serves as a bare-bones illustration of array creation and console output using core JavaScript, with no external libraries or data sources. The HTML page provides the structure, while the inline script within the `<body>` tag executes the logic.

Oct 20, 2023

Loading thumbnail…

D3Trial full

This example renders a full-screen SVG grid of 100 horizontal and 100 vertical bars, each drawn as a thin rectangle. The bars are layered and clipped by two SVG masks. One mask inverts its fill to hide the horizontal bars over a central region, while the other mask similarly hides the vertical bars in a complementary area, creating a cross-hatched visual effect. The code uses D3 v6 selections with `.join()`, `d3.range`, and `d3.symbol` (commented out), with masks constructed via `svg.append('mask')` and filled rectangles. The dimensions are set to `window.innerWidth` and `window.innerHeight`.

Oct 13, 2023

Loading thumbnail…

D3Trial

This example uses D3 version 6.6.1 to generate a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick, that span the full width and height of the browser window. Two SVG masks create a circular cutout effect: the first mask, using a white circle on a black background, hides the horizontal bars outside a 200-pixel-radius circle centered on the screen, while the second mask, with inverted colors, shows only the vertical bars inside the same circle. The result is a contrasting composition of crossing lines, where the horizontal and vertical strokes meet within the circle’s boundary. The code uses `d3.select`, `d3.range`, and the `.join()` method to bind data to SVG elements.

Oct 13, 2023

Loading thumbnail…

Javascript FirstTrial

This example shows an HTML page that dynamically creates an SVG element and a mask, sizing them to the full window dimensions using JavaScript. It constructs SVG elements via the `document.createElementNS` method, setting attributes like width and height, though the code is incomplete and references undefined variables. The visualization does not yet render any visible data, but it demonstrates the initial steps of building an SVG-based graphic using vanilla JavaScript without external libraries.

Oct 13, 2023