zhansihua

@zhansihua·5 public vizzes

HTML Starter

This example demonstrates a minimal HTML page that uses CSS and JavaScript to explore array sorting. It renders a single styled message, while the script defines an array of numeric values and sorts it using a custom comparator function that specifies ordering logic based on direct comparisons. The code does not display the sorted result on the page, instead logging the output to the browser console. It relies on plain JavaScript and inline CSS, with no external libraries or frameworks.

May 8, 2022

Loading thumbnail…

Full MaskTest 2

Two sets of horizontal and vertical striped rectangles fill the screen, each masked by a different pattern of D3 symbols. The first mask uses white symbols on a black background, while the second inverts this, creating a crosshatched visual effect where the symbol shapes appear cut out of the stripes. Built with D3 v6, the code uses `range`, `symbols`, and `symbol` to generate the mask patterns, and `selectAll` with `join` to render the rectangles. The SVG output is sized to the full browser window.

May 8, 2022

Loading thumbnail…

Full MaskTest 1

This example demonstrates a mask-based visual effect that combines two sets of overlapping SVG rectangles, creating a crosshatch pattern of thin horizontal and vertical lines. The full viewport is covered by 100 horizontal and 100 vertical strips, each partially revealed through circular mask regions defined using D3’s `symbol` API. Two masks are layered: the first shows a white circle against a black background, while the second inverts the circle’s role, allowing the rectangles to appear only outside the central circular area. The rendering uses D3 version 6.6.1 with SVG output.

May 8, 2022

Loading thumbnail…

Fork of MaskTest 1

This example creates a geometric grid pattern using D3 v6, rendering horizontal and vertical stripes across the full browser viewport. Two SVG masks reveal the stripes through circular windows in the center of the screen. The first mask shows vertical lines inside a white circle on a black background, while the second mask inverts this effect. The code uses D3’s `select`, `range`, and `join` methods to generate the rectangles, with SVG `mask` elements and `circle` shapes determining the visible regions.

May 7, 2022

Loading thumbnail…

MaskTest

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

May 7, 2022