merrickhaigler

@merrickhaigler·5 public vizzes

Mouse Tracking

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The visualization uses React’s `useState` and `useCallback` hooks to track `clientX` and `clientY` coordinates from the `onMouseMove` event, rendering a single `<circle>` element via ReactDOM. D3 is loaded but not directly invoked; the rendering relies solely on SVG and React state management.

Aug 2, 2021

Loading thumbnail…

CSV mdh

This example demonstrates a minimal React starter page that loads and displays CSV data in a table. The code uses the D3 library’s CSV parsing functions to fetch and process tabular data from an external source. It renders the parsed rows and columns into a basic HTML table within a React component, showcasing a straightforward approach to importing structured data into a web visualization. The page relies on D3’s `dsv` and `csv` methods for data loading and formatting, while React handles the component lifecycle and DOM updates. The styling is minimal, focusing purely on the data presentation without additional charting or interactivity.

Aug 2, 2021

Loading thumbnail…

Fork of Smiley Face Part III mdh

A React and D3 smiley face renders as a yellow circle with black outline, two eyes, and an arc-shaped mouth centered on a 960-by-500 SVG. The app composes modular React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which pass numeric props for radii, offsets, and stroke width. The mouth uses d3.arc to generate a path with inner and outer radii, while the face is centered via an SVG group transform. Static geometry and hard-coded dimensions define the visualization.

Aug 2, 2021

Loading thumbnail…

Fork of Smiley Face Part II mdh

A yellow smiley face is rendered to fill the browser window, scaled to the viewport dimensions using React and SVG. The face is drawn with a yellow circle for the head, two black circles for eyes, and no mouth, all positioned via computed offsets from the center. The code uses React 16.9 and ReactDOM to render the SVG elements, with window dimensions, stroke width, and eye offsets defined as constants. A commented-out static SVG version shows an earlier iteration with a fixed 960×500 canvas and different eye placement.

Jul 30, 2021

Loading thumbnail…

Fork of Hello HTML mdh

A minimalist React application renders a single yellow circle with a black outline on an SVG canvas. The circle is positioned at the exact center of the 960-by-500-pixel viewport, with its radius calculated from the canvas height and stroke width to fit precisely within the drawing area. The code uses React and ReactDOM to render the SVG element, importing the libraries from unpkg CDN links. The visualization demonstrates basic geometric placement and SVG rendering through a declarative React component.

Jul 30, 2021