GiuliaPassoni

@GiuliaPassoni·4 public vizzes

Scatter Plot with Image Mask

This example shows a scatter plot transformed by an SVG image mask, where a circular region filled with a photographic image is revealed through a pattern of 1,000 randomly generated points. The points are generated using a custom `generateRandomPoints` function and drawn as white circles inside a mask, while a pattern element loads an external BBC news image. D3 v6 selections, the `mask` and `pattern` SVG elements, and radius-based circle rendering combine to create the effect, with the mask applied only to the central circle rather than the entire SVG canvas.

May 4, 2023

Loading thumbnail…

Scatter Plot with gradient mask

A full-screen scatter plot displays 2,000 random points individually as white circles, revealing a large red-to-blue linear gradient only through the circular gaps. The random point coordinates are generated with a custom `generateRandomPoints` function. The code applies the gradient to a single circle, then defines an SVG `<mask>` containing the white point circles to cut the gradient shape, demonstrating mask-based data visualization with d3 v6.

May 3, 2023

Loading thumbnail…

D3 Scatter Plot with mask

This example displays a scatter plot of 200 randomly generated points, each rendered as a small black circle. A circular mask, centered on the canvas, is applied to the SVG group, revealing only the points that fall within its bounds. The visualization uses the D3.js library (v6) for random point generation and SVG rendering. A mask element with a white circle over a black rectangle defines the visible region, creating a spotlight effect on the data.

Apr 3, 2023

Loading thumbnail…

Viewport and viewBox

This example demonstrates how the SVG `viewBox` attribute changes the visible portion of a fixed-size canvas while using D3.js v7 to construct the scene. It draws a single blue circle inside a red-bordered `<svg>` element, then applies a `viewBox` with negative offsets and scaling to translate and zoom the coordinate system. The code uses `d3.select` to append the SVG and its child `<g>` element, and it utilizes the SVG API to inspect the geometry. The fixed width and height remain constant while the viewport shifts, showing how coordinates map differently in the rendered output.

Jan 11, 2023