Hails

@haileyhoyat·2 public vizzes

Fork of React Starter

A todo list application demonstrates CRUD operations with a clean, minimal interface. Built with React 16.13.1, the app uses the `useState` hook to manage task state and the `nanoid` library to generate unique IDs for each item. Users can add, edit, delete, and toggle task completion through a form, per-item buttons, and checkboxes. The interface displays the remaining task count dynamically, updating as tasks are added or removed. The code renders to the DOM via `ReactDOM.createRoot` and uses component-based architecture to separate form, task, and filter logic.

Oct 22, 2022

Loading thumbnail…

Comparing '70s Cars' Weight vs MPG. [An Interaction Design by Hails].

This visualization compares the weight and miles-per-gallon of 1970s automobiles, with each car represented as a circle colored by its model year. It is built using the vega-lite-api, which wraps vega-lite in JavaScript, and the resulting chart renders as SVG via vega’s renderer. The code loads data asynchronously with d3.csv, then encodes the x-position from the quantitative Weight field, the y-position from MPG, and uses a nominal color scale for Year. Tooltips display each car’s name via the vega-tooltip Handler, with custom font sizing in the config for readability.

Mar 27, 2022