jesusgaitan2014@hotmail.com

@JesusG16·3 public vizzes

D3 selectors test

This example demonstrates how to begin working with D3 version 6 by appending an SVG canvas and repeatedly adding animated circles. Using the `select` API to target the body element, the code creates an SVG that fills the viewport, then runs a `setInterval` loop that generates a new circle every 100 milliseconds. The circle positions are computed with `d3.range` and the sine function, creating a wave-like pattern across the screen. The example relies on D3’s data join methods (`selectAll`, `data`, `enter`) and attribute setters like `.attr` to render and style each circle.

Apr 23, 2024

Loading thumbnail…

Fork of D3 Starter

Two overlapping sets of purple stripes, one horizontal and one vertical, form a decorative lattice pattern on an SVG canvas. The visualization applies two distinct masks to reveal alternating sections, with each mask containing a sequence of symbols from D3’s `symbols` array, such as circles and crosses, placed at regular intervals. Built with D3 v7, the code uses `select`, `range`, `symbol`, and `symbols` to generate paths and rectangles, while `join` handles enter and update selections. The result demonstrates reusable mask generation for creating complex visual effects from simple geometric shapes.

Apr 23, 2024

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page demonstrating the integration of CSS and JavaScript. The page includes a commented-out script block that, if active, would generate an SVG bar chart using the Document API, creating green rectangles on an 860 by 400 canvas. The active script is empty, showing a blank body ready for user code. It serves as a foundational template for building visualizations with vanilla JavaScript in the browser.

Apr 22, 2024