pedrogius

@pedrogius·4 public vizzes

Fork of D3 Scatter Plot

This visualization displays the classic Iris dataset, plotting petal length against sepal length as individual circles on a scatter plot. The code loads CSV data from a GitHub Gist using D3’s `csv` method with a row-parsing function, then applies `scaleLinear` scales with `extent` to map data values to screen coordinates. Axes are rendered using `axisLeft` and `axisBottom`, while circles are bound to the SVG via `selectAll` and `join`. The chart fills the browser window and is built entirely with D3 v6, rendering as SVG.

Jul 8, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates dynamic animated circles moving in a sine-wave pattern across the screen, with vertical lines extending from each circle's edge. It updates at 60 frames per second via a `setInterval` callback. The visualization uses D3 v6's `select`, `selectAll`, `range`, and `scaleLinear` (though the latter is only in commented code) to bind data and render SVG elements. The `join` method handles entering, updating, and exiting circles and lines, while `makeData` generates positional values based on time and index.

Jul 7, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how SVG masks can create complex visual effects by combining shapes. A white rectangle covering half the canvas contains a black circle and a smaller white circle, which together punch holes in the mask. The page renders 100 horizontal strips, each with a mask applied, creating an alternating pattern of visible and hidden regions. The code uses raw JavaScript to manipulate SVG elements directly, setting attributes like width, height, and fill on rectangles and circles within a masked group.

Jul 4, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization recreates a Sol LeWitt wall drawing using two overlapping SVG masks to generate a grid of horizontal and vertical lines that intersect in a triangular pattern. A white triangular mask on a black background controls the horizontal lines, while an inverted mask controls the vertical lines, creating a clean boundary between the two orientations. The code builds the SVG dynamically with vanilla JavaScript, creating 100 rectangle elements for each direction and applying the masks via the `mask` attribute. The result is a geometric, generative art piece that mimics LeWitt’s instructional drawing style.

Jul 2, 2022