vaz360

@vaz360·4 public vizzes

Fork of Smiley Face Part II

This example shows a smiley face rendered as an SVG circle that follows the mouse cursor inside a fixed 960×500 viewport. The code uses React’s `useState` and `useCallback` hooks to track the pointer’s `clientX` and `clientY` coordinates, updating the circle’s center position on every mouse move. The face itself is drawn with basic SVG `<circle>` elements—a yellow head and two black eyes—embedded directly in the React component’s JSX. Mouse tracking is handled via an `onMouseMove` event on the root SVG element, with ReactDOM rendering the entire interface.

Oct 12, 2021

Loading thumbnail…

Some React Stuff

A React application renders a yellow circle with a black border that tracks the user's mouse movement. The visualization uses ReactDOM to mount a `Face` component, which is composed of a `BackgroundCircle` SVG element, alongside eye and mouth shapes with configurable offsets and radii. The code imports React 17 and D3 7 from CDN, with the circle's position and dimensions controlled by props such as `centerX`, `centerY`, and `strokeWidth`. The interactive behavior responds to cursor position within a 960 by 500 pixel viewport.

Oct 12, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of working with tabular data in a web environment: fetching a CSV file and logging its raw text to the browser console. It uses the native Fetch API via an asynchronous `fetchText` function to retrieve the file from a GitHub gist containing CSS named colors. The code then invokes `response.text()` to parse the response body as a plain string. This minimal React-free setup highlights the core pattern of loading remote data before any visualization-specific libraries, such as D3, would be applied.

Oct 12, 2021

Loading thumbnail…

This is the title of the thingy

This example renders a smiling face in SVG using React components and D3.js. The face features a yellow background circle, eyes with blurred red pupils, and a D3 arc-generated mouth. It demonstrates fundamental DOM manipulation and reusable component composition, with the face centered in a 960 by 500 viewport. The code uses ReactDOM to mount the app and d3.arc to define the mouth path.

Oct 11, 2021