peterforberg

@peterforberg·6 public vizzes

Fetch Data

This example demonstrates how to fetch and parse a CSV file of CSS named colors from a remote URL. The code uses the Fetch API to asynchronously retrieve the text and then d3.csvParse to convert the response into an array of JavaScript objects. Each object contains color names and RGB values, which are logged to the console. The visualization gallery entry shows a minimal React-free setup where D3’s parsing utilities handle the data transformation without any chart rendering.

Dec 30, 2021

Loading thumbnail…

Mouse Tracking

A single black circle tracks the user's mouse cursor across a blank SVG canvas. The visualization demonstrates how React state updates on every mouse movement event, with the circle's center position re-rendered accordingly. It uses React's `useState` and `useCallback` hooks along with the `onMouseMove` event handler, while D3 v5 is loaded but not directly used in the interaction logic.

Dec 30, 2021

Loading thumbnail…

Smiley with React/ES6/Nesting

This example shows a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black stroke, two eyes, and a D3 arc-based mouth. The faces vary in eye radius due to `Math.random()`. Built with React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) and ES6 destructuring, it uses `d3.arc()` for the mouth path and `d3.range()` to generate the array of faces. All elements are SVG, nested inside a translated `<g>` group.

Dec 29, 2021

Loading thumbnail…

Smiley with React/ES6

This example shows a classic smiley face rendered as an SVG using React components for each facial feature. The `BackgroundCircle`, `Eyes`, and `Mouth` components are assembled within a transformed `<g>` element centered on the canvas. The mouth is generated using the D3 `arc` API to create a path with specified inner and outer radii and angular extent. React 16.9 handles the declarative component structure, while D3 5.11 provides the geometric arc construction. The code demonstrates a clean separation of visual elements into reusable, parameterized React components.

Dec 29, 2021

Loading thumbnail…

Smiley with React

This example renders a yellow smiley face as an SVG graphic, constructed using React components for declarative element creation and D3’s `arc` generator to define the mouth shape. The face features a circular head, two eyes positioned with offsets, and a curved mouth built using arc radii and start/end angles. The code imports React and ReactDOM for rendering into a `#root` div, while leveraging D3 v5’s `arc` to compute the path for the mouth. The graphic is drawn with fixed dimensions and stroke styling, illustrating a simple integration of React with SVG and D3 utilities.

Dec 29, 2021

Loading thumbnail…

Smiley

A smiling face rendered as a static SVG visualization, composed of a yellow circle with a black outline and two smaller black circles for eyes. The example demonstrates a minimal React setup, loading React via a CDN script tag and embedding SVG elements directly in the HTML. It uses React 16.9.0 and relies on plain SVG circle elements rather than any data-binding or animation libraries, serving as a basic template for rendering shapes with React.

Dec 29, 2021