waur1024

@waur1024·5 public vizzes

TC of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin across automotive models. It renders a scatter plot using Vega-Lite API, where points are scaled by weight and colored by origin, with a tooltip displaying vehicle names. The code loads data from a CSV via D3’s `csv` function, and uses Vega-Lite API’s `vl.markCircle` and encoding methods for x, y, color, and size. Custom configuration adjusts axis labels and fonts for readability against a dark theme.

Mar 11, 2022

Loading thumbnail…

Mouse Follower

This visualization displays metadata about a CSS named colors dataset, including row count, column count, and file size, rendered as large text that follows the mouse cursor across the screen. The React component fetches the CSV data using d3.csv, then formats the statistics with d3.csvFormat in the Message function. The example combines React’s useState and useEffect hooks for data loading with D3 v7 for CSV parsing, while the oversized pre tag creates the interactive mouse-following effect in an SVG-less plain HTML layout.

Mar 10, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v7’s `d3.csv` method, then reports the dataset’s size in rows, columns, and kilobytes. The data comes from a remote GitHub gist containing CSS named colors. The code also includes an alternative approach using the Fetch API and `d3.csvParse` to handle the CSV text directly. Results are displayed in a large `<pre>` element, with the file size rounded to the nearest kilobyte.

Mar 10, 2022

Loading thumbnail…

Smiley face TC

This example displays a grid of eighteen smiling faces, each rendered as a yellow circle with eyes, blushes, a nose, and a mouth. The faces are generated using React components that compose SVG shapes, with randomized parameters for facial feature sizes and positions. D3.js provides the `arc` generator used to create the mouth and nose paths, while React’s `range` utility produces the array of face instances. Each face is drawn with SVG circles and paths inside a translated group.

Mar 9, 2022

Loading thumbnail…

TC_Smiley_Face

A static HTML page renders “Hello HTML!” as a large, centered text message using plain CSS for styling and JavaScript for structure. The example demonstrates a minimal setup with a single `div` element, styled by a `.message` class that sets `font-size` and `text-align`. It uses no external libraries or data sources, relying solely on native HTML and CSS to display the text. The page is a bare-bones starting point for embedding React or other frameworks, as referenced in the accompanying README.

Mar 7, 2022