George Williams

@gmwill512·4 public vizzes

Fork of Vega-Lite API Template

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and engine power (horsepower) for various car models. Each circle is colored by country of origin and sized by vehicle weight, with tooltips revealing model names. Built with the Vega-Lite API, it uses d3’s CSV parser to load data, then renders an interactive SVG graphic with configurable axis styling and a custom dark theme.

Jan 26, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors, displaying the data’s size, row count, and column count in a large text block. It uses D3 v5’s `d3.csv` method to asynchronously fetch the remote dataset, then `d3.csvFormat` and `data.columns` to compute metrics. The code also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, illustrating different parsing strategies. The rendering is plain HTML text within a `<pre>` element, with no graphical visualization.

Jan 25, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor as it moves across a 960 by 500 SVG canvas. Built with React and D3, the component uses React’s `useState` hook to track pointer coordinates via an `onMouseMove` event handler. The circle is rendered through a reusable `BackgroundCircle` component, while separate `Eyes` and `Mouth` components, using D3’s `arc` generator, show how to structure complex SVG shapes across modular ES6 files. The visual demonstrates real-time state updates in a React-D3 integration.

Jan 25, 2022

Loading thumbnail…

Smiley Face

A smiling face rendered in SVG using React and D3. The face consists of a yellow circle with a black stroke, two eyes, and a mouth created with the `d3.arc()` path generator. The composition is centered using an SVG `<g>` transform, with hard-coded dimensions for the head, eye offsets, and stroke width. React manages the component structure, while D3 v7 generates the mouth path geometry.

Jan 25, 2022