matg

@mat-goo·6 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a sample of automobiles, with each point representing a car model and tooltips revealing its name. The visualization is built programmatically using the Vega-Lite API, which composes the chart specification through chained methods like `vl.markPoint`, `vl.x().fieldQ`, and `vl.y().fieldQ`. It loads CSV data via d3’s `csv` function, applies custom axis and label styling from a configuration object, and renders as an SVG using the Vega and Vega-Lite libraries with Vega-Tooltip for interactive hover details.

Jan 22, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 7 within a React framework, displaying summary statistics about the CSS Named Colors dataset. It uses `d3.csv` to fetch and parse the remote CSV file, then reports the file size in kilobytes, row count, and column count in a large text format. The visualization highlights the simplicity of D3’s built-in promise-based data loading, contrasting it with commented-out alternatives using `fetch` and `d3.csvParse`. The output is rendered as plain text in an HTML `<pre>` element.

Jan 21, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization uses React state to track the cursor's clientX and clientY coordinates, updating them via an onMouseMove handler on the SVG element. The circle’s position is bound to this state, and React re-renders the SVG circle at the new coordinates on each mouse movement. The example demonstrates a simple interactive pattern with React and SVG, using the useState and useCallback hooks to manage and optimize the mouse-tracking behavior.

Jan 20, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data using the browser’s built-in `fetch` API and asynchronous JavaScript. It loads a dataset of CSS named colors from a GitHub gist, converting the raw text response into a usable format. The code primarily uses `fetch` with `async`/`await` and `Promise` chaining, logging the fetched text to the console. While no visualization is rendered, the example serves as a foundational template for integrating remote tabular data into a React application.

Jan 17, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This fork of Matt Goo’s React smiley face renders a yellow head with two hollow eyes, sized to fill the browser viewport. The SVG circles are drawn relative to the window’s center, with the face’s radius set to half the viewport height. The code uses React’s `ReactDOM.render` to display the graphic, and computes all positions from `window.innerWidth` and `window.innerHeight`, producing a full-screen composition.

Jan 15, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example creates a full-screen smiley face using React and SVG. The face is centered and scaled relative to the viewport’s dimensions, with yellow circular head, two black eyes, and a defined stroke width, though the mouth is not rendered here. It uses React 16.9 and ReactDOM to mount components that generate SVG circles, with geometry derived from window.innerWidth and height.

Jan 15, 2022