Cheah Peng Huat

@cheahph·6 public vizzes

Test

This visualization uses D3.js to display percentile trends over time for performance metrics. The view combines multiple SVG areas and a line to represent the 5-95%, 25-75%, and median values across dates from August to September 2014. Animated markers slide upward from the bottom to highlight Client and Server release versions, using D3 transitions with dynamic path lengths. The chart includes axes, a custom clip path for the legend area, and smooth basis interpolation for all drawn shapes.

Jul 10, 2024

Loading thumbnail…

Javascript Arrays

A sine-wave pattern of 15 circles demonstrates the JavaScript array method `range()` and data binding in D3. Each circle is positioned along a horizontal axis with its vertical coordinate calculated from the sine of its index, creating a wave-like arrangement. The example uses D3's `selectAll`, `data`, and `enter` selection methods to append SVG circles to the page. The visualization renders as vector graphics via SVG, with circle radii, x-coordinates, and y-coordinates set through D3's attribute functions.

Jul 9, 2024

Loading thumbnail…

Sol LeWitt Reproduction with D3

This piece creates layered horizontal and vertical bands that pass through stencil-like openings formed by rotating geometric symbols. The composition is generated by drawing 20-pixel-wide rectangular strokes across the full canvas, masked by two inverted patterns built from D3's `symbol` generator. Using D3 v7 APIs such as `select`, `range`, `symbols`, and custom mask rendering, the artwork changes with the browser window’s dimensions, reproducing a generative Sol LeWitt aesthetic through pure SVG output.

Jul 9, 2024

Loading thumbnail…

Sol LeWitt Reproduction with D3

A reproduction of a Sol LeWitt wall drawing renders an abstract geometric composition using D3 and raw SVG. The piece shows a circular region at the canvas center, filled with alternating horizontal and vertical black-and-white stripes that crisp boundary. The code builds SVG elements directly, using a circle mask with two nested masks to divide the stripe layers: horizontal rects clipped by one circle mask, and vertical rects clipped by another inverted mask. It uses no D3-specific APIs, relying on native `document.createElementNS` and `setAttribute` to generate 100 rect stripes per direction.

Jul 9, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using overlapping horizontal and vertical stripes confined to a central circular area. The SVG rendering shows two sets of 100 thin rectilinear bands, with horizontal lines clipped by one circular mask and vertical lines by an inverted mask. Built with vanilla JavaScript and the SVG API, it creates elements dynamically, using mask elements and black-and-white fill values to alternate visibility between the two stripe orientations.

Jul 9, 2024

Loading thumbnail…

SVG Fundametal

This example demonstrates a time series of percentiles (5th to 95th) as layered, colored areas, with a bold median line and animated markers showing client and server version releases. It uses a custom React application with the `d3.svg.area()` and `d3.svg.line()` APIs to render the smooth, interpolated bands, and animates the markers with `transition().attr()` over one second. The data comes from `data.json`, with release events from `markers.json`, and the visualization also includes a legend and axis clipping to keep the chart clear.

Jul 8, 2024