Maurice Huang

@MauriceHuang·13 public vizzes

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece by rendering a series of 100 horizontal stripes, each drawn as an SVG rectangle, across the full width of the viewport. The rectangles are clipped through an SVG mask containing a circular cutout, producing a layered, geometric composition centered on the screen. The code uses the D3.js library’s `select` and `selectAll` functions to build and position the SVG elements, with the mask defined as a separate SVG `mask` element containing a black background and a white circle. The resulting pattern mimics LeWitt’s minimalist, algorithmic wall drawings using simple vector graphics.

May 10, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This reproduction of a Sol LeWitt art piece renders a single small square in the upper-left corner of a 960 by 500 SVG canvas. The drawing uses raw SVG elements created via the Document API, specifically `createElementNS` for the `svg` and `rect` nodes, with no external libraries. The static composition does not implement any interactive behavior or algorithmic generation, showing only the minimal geometric form from the original conceptual artwork.

May 10, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to fetch and parse a CSV file from a remote URL, then display basic metadata about the dataset, including its size in kilobytes, row count, and column count. The visualization uses the `fetch` API to retrieve the text, `d3.csvParse` to parse the comma-separated values, and the CSS-styled `#message-container` element to render the resulting statistics. The data source is a GitHub gist containing CSS named colors, loaded asynchronously and processed without any interactive visualization.

Oct 31, 2021

Loading thumbnail…

Hello World!

This example creates a smiling face using React and SVG, with a yellow circle for the head, two eyes, and a mouth shaped as an arc. The face is assembled from modular components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—each defined as separate React components. It uses D3’s `arc` generator to construct the mouth path and demonstrates SVG rendering within a React framework. The composition is centered and scaled via transform attributes, with D3 version 7 and React 16.9 as the underlying libraries.

Oct 31, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This interactive block renders a classic smiley face as a scalable vector graphic (SVG) built within a React component. Using D3 v5 to construct the mouth arc, the visualization defines circle elements for the head and eyes, with a yellow fill and black stroke. The react-dom library handles rendering to the page, while D3's `arc` function computes the precise path for the smile. The composition is centered on a 960 by 500 canvas, visually demonstrating how React can integrate with D3's geometry generators.

Oct 29, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiling face composed of abstract geometric shapes: a yellow circle for the background, two small circles for eyes, and a curved arc for the mouth. The React application renders the visualization as an SVG, splitting components into separate ES6 modules. It uses the `arc()` API from D3 to generate the mouth’s path, with fixed constants controlling all radii and offsets.

Oct 29, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

Oct 29, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face, rendered as SVG elements, demonstrates fundamental DOM manipulation with D3.js. The face's eyebrows animate by repeatedly shifting their vertical position via chained `transition()` calls, each lasting two seconds. The code uses D3's `select`, `append`, and `attr` methods to build the circle, eyes, and rectangular eyebrows, while an `arc()` path creates the mouth. The animation loops the eyebrows up and down continuously.

Oct 29, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to fetch and parse CSV data from a remote URL using the Fetch API. The code defines an asynchronous function that retrieves text from a GitHub Gist containing CSS named colors, then logs the raw CSV content to the browser console. The visualization highlights the minimal steps required to load external tabular data, relying on native JavaScript promises and template literals rather than any external library. The data source is a static CSV file, and the approach showcases asynchronous data handling without any rendering or graphical output.

Apr 4, 2021

Loading thumbnail…

Fork of Smiley Face - Part 3

This fork of a smiley face is partially assembled, showing only the yellow circular head with its border and two eyes. The piece has not yet added the mouth component. Built with React and SVG, the visualization uses `d3.arc` to construct the mouth's shape as a path, though it is not currently rendered. The `FaceContainer` component translates the origin to the center of the canvas, and the `Face` component composes the `BackgroundCircle`, `Eyes`, and `Mouth` sub-components, which are not yet fully connected.

Apr 2, 2021

Loading thumbnail…

Smiley

A smiley face built with React and SVG, composed of a yellow background circle, two eyes, and an arc-based mouth. The components are modular, with separate files for each facial feature. The mouth uses d3.arc with inner and outer radii and fixed start and end angles to create a downward curve. All elements are centered using a transformed group within an SVG, demonstrating a component-based approach to data visualization.

Apr 2, 2021

Loading thumbnail…

Data Visualisation

This example renders a yellow SVG smiley face centered in a 960×500 viewport using React components and D3’s `arc` generator for the mouth. The background circle, two black eyes, and mouth are drawn with basic SVG shapes, with coordinates transformed to the center. React manages the component structure, while D3 computes the mouth’s path from inner and outer radii and fixed start and end angles. The visualization demonstrates a minimal integration of React and D3 for static geometric graphics.

Mar 27, 2021

Loading thumbnail…

Fork of Smiley face part 1

This example shows a React component that renders a minimal smiley-face arc using D3’s `arc` generator, though the visible output is currently only a static header. The code defines parameters for the mouth, eyes, and stroke width, and computes the mouth’s path with `d3.arc`, setting inner and outer radii and angular start and end points. It uses React 16.7 and D3 v6, with the arc logged to the console but not yet drawn to the screen.

Mar 26, 2021