sh_ip

@sh-ip·2 public vizzes

Fork of Blank Slate with Hot Reloading

This blank-slate example demonstrates a minimal Vega-Lite specification with hot-reloading support, showing an empty chart area that dynamically updates as the specification changes. The code uses Vega-Lite’s declarative grammar, with the chart rendered via the Vega-Lite JavaScript library. It loads an empty dataset and defines no marks or encodings, producing a blank canvas. The hot-reloading feature, likely enabled by the development environment, automatically re-renders the visualization whenever the specification file is edited.

Dec 3, 2024

Loading thumbnail…

SVG Fundamentals

This example reproduces a Sol LeWitt-inspired geometric composition using layered SVG elements and D3.js. It draws a grid of horizontal and vertical rectangles across the full viewport, with each line partially masked to create intricate overlapping patterns. The visualization uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate two masks containing circular, triangular, and other symbol shapes. These masks apply inverse fill logic—one inverting the grid’s visibility—producing a dynamic interplay between the background lines and foreground symbolic cutouts. The rendering relies entirely on SVG attributes like `mask` and `fill`.

Dec 3, 2024