Jsimluken

@Jsimluken·4 public vizzes

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices. The code loads color data from a CSV file using D3’s `csv` utility, then applies the `pie` layout and `arc` generator from D3 v5 to compute slice angles and paths. React renders each slice as an SVG `<path>` fill with the hex value from the dataset, while React hooks `useState` and `useEffect` manage the asynchronous data loading and display.

Aug 5, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This fork of the Smiley Face Part II example renders a small yellow circle that follows the mouse cursor across a full-screen SVG. The circle fills the window and is drawn using React SVG elements, with its position updated through React state and the `onMouseMove` event handler. The app uses React 16.9 and ReactDOM to mount the component, replacing the original static smiley face with an interactive element.

Jul 15, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a full-screen smiley face composed of SVG shapes, with a yellow circular head, two black eyes, and a curved mouth. The visualization is built using React to manage the component structure, while D3’s `arc` generator computes the mouth’s path from inner and outer radii and angular start and end values. All coordinates are derived from the browser window dimensions, and the drawing scales to fill the viewport. The rendering relies on SVG elements such as `circle` and `path` within a transformed group.

Jul 15, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a single yellow circle with a black outline, positioned in the center of the browser window, with two smaller black circles for eyes. The face is incomplete, showing only the head and eyes, with no mouth or other features rendered. The visualization is built using React and ReactDOM, rendering SVG elements directly to the page, with dimensions derived from the window’s inner width and height. The code defines constants for eye offset, radius, and stroke width to position the shapes.

Jul 15, 2021