ChrisGaul

@ChrisGaul·6 public vizzes

svg experiments

This example demonstrates how an SVG mask can selectively reveal or hide parts of a shape, using a path as the mask. A single green circle is rendered, partially obscured by a jagged mask path defined in SVG’s `<defs>` and applied via the `mask` attribute. The code uses raw SVG elements, including `circle`, `path`, and `mask`, with styling provided by inline CSS. The mask’s fill color (`#555`) controls the transparency region, showcasing a basic technique for clipping or layering vector graphics without external libraries.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example loads a CSV file of CSS named colors from a GitHub gist and displays a summary of its size and structure. It counts the number of rows and columns and computes the formatted data size in kilobytes. The code uses D3 v7’s `d3.csv` method to asynchronously fetch and parse the data, then `d3.csvFormat` to measure its serialized size. The result is rendered as plain text inside a `<pre>` element using standard DOM manipulation.

Sep 29, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across a blank SVG canvas, updating its position in real time as the pointer moves. The visualization demonstrates a simple React component using the `useState` and `useCallback` hooks to manage and update the circle’s center coordinates, while D3 v5 is loaded via a script tag but not directly used for rendering. Mouse events are captured on the SVG element via `onMouseMove`, and the circle’s `cx` and `cy` attributes are bound to the stored position state.

Sep 29, 2021

Loading thumbnail…

Mouse Follower

A circle, initially positioned at the center of an SVG canvas, follows the mouse cursor across the screen. The React component renders the circle with fixed initial coordinates and relies on React’s virtual DOM to update its position dynamically. Using React 16.9 and ReactDOM, the example demonstrates basic state-driven rendering without external event listeners. The circle’s movement is implied by React’s re-rendering, though the code shown lacks a mouse event handler. It serves as a minimal illustration of SVG integration within a React application.

Sep 29, 2021

Loading thumbnail…

Fork of Smiley Face Part-3 (React and d3)

A React and D3 example renders a simple smiley face as an SVG graphic, with a yellow circle head, two black eyes, and a curved mouth. The face is drawn using SVG circle and path elements within a group that uses a translate transform to center it. D3’s `arc` helper from the `d3-shape` package generates the mouth path by defining inner and outer radii and start and end angles. React 16.13.1 manages the component structure, while D3 v6.7.0 provides the arc geometry. No external data is used; all dimensions are hardcoded constants.

Sep 29, 2021

Loading thumbnail…

Smiley

This example generates a grid of 18 procedurally varied smiley faces, each rendered as a yellow circle with black outlines, eyes, and an arc-shaped mouth. The composition demonstrates how React components (Face, BackgroundCircle, Eyes, Mouth) and SVG elements can be parameterized with random values for stroke width, eye offset, eye radius, and mouth dimensions. The mouth is drawn using a D3 arc generator (d3.arc) to create a closed path, while the overall layout is managed by React, with all faces rendered in SVG within a single viewport.

Sep 28, 2021