Pascal Mausch

@Tomadonii·8 public vizzes

Mouse Follower

A smiley face image follows the mouse cursor across an SVG canvas. The React component tracks pointer movement through an `onMouseMove` handler and stores the coordinates in state, updating the image position via inline styles. Using React hooks like `useState` and `useCallback`, it re-renders efficiently on each move. Both React and D3 v5 are loaded, though D3 is not actively used in the interaction logic, which relies solely on React's event system.

Oct 6, 2022

Loading thumbnail…

Fork of Loading CSS Hex Values from object

This example visualizes the RGB hex values of CSS named colors as a full-circle pie chart, with each slice filled by the color it represents. The data is loaded from a remote CSV file using d3.csv, and the chart is rendered with React and SVG. The code uses d3.pie and d3.arc to compute the slice geometry, mapping each color’s hex value to the fill attribute of its corresponding path element.

Jul 11, 2022

Loading thumbnail…

Smiley Face!

An orange smiley face with black-outlined eyes and a black arc for a mouth renders as the central subject. The example builds the face through a modular React component hierarchy, with each facial feature, including the background circle, eyes, and mouth, defined as a separate component. The mouth uses the D3.js `arc` function to generate a path. The visualization appears twice, presenting a static composition through SVG.

May 31, 2022

Loading thumbnail…

Loading CSS Hex Values from object

This example renders a colored strip for each CSS named color by loading hex values from a CSV file. The React component uses the `useState` and `useEffect` hooks along with D3’s `d3.csv` to fetch data from a GitHub-hosted dataset. Each row is mapped to a `<div>` whose `backgroundColor` is set to the RGB hex value from the CSV, displaying the full color palette as a compact horizontal band. The code includes a separate message utility that summarizes the fetched data size in kilobytes, row count, and column count.

May 31, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

A fork of the Vega-Lite API template displays renewable electricity percentages by country as a bar chart. The visualization, built with the d3.js and Vega-Lite API libraries, queries a CSV dataset from GitHub and transforms the data by stripping percentage symbols. The chart renders bars with hover tooltips, using a custom dark theme for improved readability, and automatically fits to the browser window size via the autosize configuration.

May 25, 2022

Loading thumbnail…

Loading and Parsin CSV Data

This example demonstrates the process of loading and parsing CSV data, displaying the dataset’s size in kilobytes, row count, and column count in a large, readable format. It uses D3 v7’s `d3.csv` and `d3.csvFormat` to fetch and measure a CSV file of CSS named colors from a GitHub repository. The code also includes commented alternatives using the Fetch API, `async`/`await`, and `d3.csvParse`, as well as a nested promise “pyramid of doom” pattern, contrasting different async data-loading techniques.

May 23, 2022

Loading thumbnail…

Fork of Mouse Follower

Two identical cartoon faces are drawn as layered SVG circles: an orange background head, two eyes, and an arc-based mouth. A React app renders two `<Face>` components centered in a 960×500 viewport, each composed from reusable subcomponents like `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React for component composition and the D3 `arc()` generator to define the mouth’s curved path, with all geometry parameterized via props.

May 23, 2022

Loading thumbnail…

Smiley Face Tweaks

A smiling face rendered as a React SVG component uses D3’s `arc` generator to draw a mouth, while basic SVG shapes form the orange circular head, black eyes, and a rectangular mouth element. The code initializes D3’s `arc` with an inner and outer radius, plus start and end angles, to create a path. State is fixed via hardcoded dimensions and offsets, with React rendering the SVG tree into the DOM.

May 19, 2022