Phan Nguyen

@pab-nguyen·8 public vizzes

Javascript Arrays

This example demonstrates JavaScript array manipulation through console output, using a custom `range` function to generate numeric arrays and applying methods like `forEach`, `filter`, `map`, `reduce`, and `sort`. It also processes an array of key-value objects, converting them into a single object via `reduce` and sorting them with `d3.ascending` from D3 v7. The page itself is a minimal HTML/CSS structure displaying a static "Hello HTML!" message, with all array operations visible only in the browser’s developer console.

May 3, 2023

Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of alternating horizontal and vertical stripes across the full screen. Two masks—one inverted—cut circular symbol shapes from the stripe patterns, creating overlapping geometric forms. The code uses d3.select, d3.range, d3.symbol, and d3.symbols to render SVG paths, with each mask applied via SVG mask elements. The result is a dynamic, screen-filling composition that highlights D3's ability to create intricate generative art from simple primitives.

Mar 15, 2023

Loading thumbnail…

Sol Lewitt Reproduction with D3

This visualization reproduces a Sol Lewitt wall drawing using D3.js in a React application, rendered as SVG. It displays a grid of horizontal and vertical thin rectangles that are masked to reveal a circular window at the center, creating an overlapping pattern reminiscent of Lewitt’s geometric art. The code uses `d3.select` and `d3.range` to generate 100 rects in each direction, while SVG `mask` elements with circle shapes control visibility. The example demonstrates data-driven SVG generation and masking techniques without external data sources.

Mar 8, 2023

Loading thumbnail…

Reproduction of Sol LeWitt 2

This example reproduces a geometric composition inspired by Sol LeWitt, displaying a triangle outlined by alternating horizontal and vertical stripes. The visualization renders two perpendicular sets of thin rectangular bars—one laid horizontally, the other vertically—whose visibility is selectively controlled by SVG masks. A white triangle on a black mask exposes the horizontal bars, while an inverted mask exposes the vertical bars, creating the illusion of a single striped triangle over a plain background. The code uses raw SVG elements and mask operations via the Document Object Model, with no external libraries.

Mar 3, 2023

Loading thumbnail…

Reproduction of Sol LeWitt

This example recreates a Sol LeWitt-inspired drawing using only raw SVG and JavaScript, without any external libraries. It shows a circular mask revealing a grid of horizontal and vertical black bars over a white background. The code constructs the visualization by creating SVG elements dynamically, using two masks—one that exposes horizontal stripes inside a circle and another that reveals vertical stripes in the surrounding area. The result is a geometric pattern that mimics LeWitt’s wall drawings through simple DOM manipulation.

Mar 1, 2023

Loading thumbnail…

HW 1 - Iron Man

This gallery example renders a static, stylized depiction of the Iron Man helmet using two primary SVG paths. The graphic is composed of overlapping geometric shapes, with red and gold paths forming the helmet’s main structure and faceplate, while smaller cyan paths create the eye elements. The visualization is built directly in an HTML file using SVG’s `path` element with explicit coordinate data (`d` attributes) and `stroke`/`fill` styling. Rendered at 900 by 600 pixels, it serves as a demonstration of manual vector drawing and path construction within a minimal React framework context.

Jan 25, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static HTML document. The code draws a circle, rectangle, line, and path directly onto an SVG canvas using standard SVG elements. The shapes are styled with attributes such as fill, stroke, and stroke-width, showing fundamental geometric primitives. This approach relies solely on native SVG APIs, with no external JavaScript libraries or data sources, providing a minimal illustration of vector graphics construction.

Jan 13, 2023

Loading thumbnail…

Smiley Face Part 1

This example shows a simple smiley face constructed from three SVG circles on a yellow background. The face is drawn using raw SVG elements, with a large yellow circle for the head and two smaller black circles for the eyes, all placed within a 960 by 500 viewport. The code uses React 18.2.0, loaded via a UMD script tag, and renders the shapes directly in the SVG markup. A separate JavaScript file imports React and logs it to the console, though it doesn't add any interactive behavior.

Jan 5, 2023