Peter Williams

@Petercw94·4 public vizzes

Fork of Smiley Face Part II

A React and SVG smiley face renders a yellow circle with two dark eyes against a white background. The code defines fixed constants for dimensions, center coordinates, stroke width, eye offsets, and eye radius, then draws the face using three `<circle>` elements. It uses React 16.9, ReactDOM for mounting, and renders directly to SVG inside the browser. The smiley face appears static, with no animated or interactive behaviors shown.

Jun 18, 2025

Loading thumbnail…

Fork of Vega-Lite API Template I

This visualization displays the Auto MPG dataset from the UCI Machine Learning Repository, using a scatter plot where the origin of each vehicle is shown on the x-axis, horsepower on the y-axis, weight encoded by color, and miles per gallon by size. The plot uses semi-transparent points with tooltips revealing car names, rendered as an SVG via Vega-Lite 4.0.0-beta.1 through the vega-lite-api wrapper, with d3.v5 fetching the CSV data. The view is sized to fit the browser window, and the Vega Tooltip handler adds interactive hover details.

Oct 28, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle displacement, horsepower, weight, and model year in the classic Auto MPG dataset. A scatter plot of displacement against horsepower uses circle size to encode weight and color to distinguish model years, with hovering revealing each car’s name. Built with the Vega-Lite API, it composes marks and encodings programmatically via `vl.markCircle` and `vl.encode`, then renders through Vega and Vega-Lite with a custom tooltip handler. The data loads asynchronously from a gist CSV using d3’s `csv` function, and the chart fills the browser window with a customized dark-on-light theme.

Oct 28, 2021

Loading thumbnail…

Fork of Smiley Face Part-3 (React and d3)

This example shows a simple smiley face built entirely with SVG primitives rendered through React. A yellow circle forms the head, two black circles are the eyes, and an arc-shaped `d` path defines the mouth. The code uses the `arc` helper from the `d3-shape` package to generate the mouth’s path geometry, with the arc’s inner and outer radii and start/end angles set via method chaining. SVG group elements and template literals position the face at the center of a 960×500 viewport.

Oct 22, 2021