JC Hizarsa

@jchizarsa·3 public vizzes

Sol LeWitt Reproduction

A grid of dark gray squares, each containing a subtly rotated pattern of lighter gray lines, reproduces a Sol LeWitt wall drawing. The composition evolves from a uniform arrangement into a dynamic field where adjacent cells vary in line density and orientation. Built with D3.js, the visualization uses `d3.range` to generate the grid and `d3.select` with SVG `<path>` elements to draw each cell’s lines. The rendering is entirely procedural, with no external data, deriving all visual variation from mathematical randomness seeded within the code.

Jul 1, 2024

Loading thumbnail…

Pseudo Visualizations Exercise

A pseudo XY-heatmap presents a grid of gray rectangles on an SVG canvas. The visualization demonstrates a simple interactive state change where each block transitions to a red fill when the cursor hovers over it, using a CSS `:hover` pseudo-class and a `transition` property for the color change. The rect elements are manually coded with explicit `x` and `y` coordinates, creating a sparse matrix layout. The interaction is immediate rather than data-driven, as hovering changes the fill color with a fast 0.15-second transition, while the default state is a steady gray.

Jun 26, 2024

Loading thumbnail…

SVG Fundamentals Exercise

A caterpillar built from stacked SVG ellipses and rectangles demonstrates primitive shape composition. The code renders a segmented body with varying radii and fill colors, plus legs, eyes, and antennae using `<ellipse>`, `<rect>`, `<circle>`, and `<path>` elements. Each shape is positioned manually via `cx`, `cy`, `x`, and `y` attributes within a fixed 960×500 viewport. The example uses raw SVG markup without any JavaScript libraries, showcasing static vector graphics in a plain HTML document.

Jun 18, 2024