Yasmina Adimy

@yasminadimy·9 public vizzes

Loading data with React

This example shows how React loads and summarizes a CSV file of CSS named colors. The app uses React hooks, including `useState` and `useEffect`, to fetch data with `d3.csv` and display a text message with row count, column count, and file size in kilobytes. Before the data arrives, the interface shows a "Loading" state. The visualization is rendered as SVG-free HTML text via ReactDOM, with libraries React 16.9 and d3.v7 loaded from CDN.

Oct 21, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a CSV file using D3 v7, displaying the dataset’s row count, column count, and file size in a large preformatted text block. The code fetches a CSV of CSS named colors from a GitHub gist and uses `d3.csv` to asynchronously parse the data, then computes metrics with `data.length`, `data.columns`, and `d3.csvFormat`. A commented alternative shows the same process using `fetch` and `d3.csvParse`.

Oct 21, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates React state management and event handling: the `App` component tracks mouse coordinates via the `onMouseMove` event and renders a circle centered on those coordinates. It uses `useState` to store the cursor position and `useCallback` for the event handler, with React and ReactDOM rendering the interactive SVG element.

Oct 21, 2022

Loading thumbnail…

Smiley Part VI

This example displays a grid of 18 smiley faces, each with randomly sized eyes, created using React components. The visualization demonstrates data-driven SVG rendering through a modular architecture, where separate components handle the background circle, eyes, mouth, and face container. It uses React 18 and D3 v7, specifically leveraging D3's `arc` generator to create the mouth path and `range` for generating the array of faces. Each face is positioned using SVG transforms within a fixed 166×166 viewport, with varying eye radii produced by `Math.random()`.

Oct 21, 2022

Loading thumbnail…

Smiley Part V

This visualization displays a stylized smiley face constructed from overlapping SVG shapes on a 960 by 500 canvas. A yellow background circle with a black stroke forms the head, two filled circles serve as eyes, and an arc-shaped path creates the mouth. The React-based code uses `d3.arc` to define the mouth’s geometry, while all shapes are positioned relative to the center via a transformed group. The example demonstrates modular component composition, breaking the face into `BackgroundCircle`, `Eyes`, and `Mouth` sub-components rendered with ReactDOM.

Oct 7, 2022

Loading thumbnail…

Smiley Part IV

A yellow smiley face rendered with React and D3. The face is built from SVG shapes, including a yellow circle for the head, two black circles for eyes, and a mouth drawn as an arc using D3's `arc()` generator. The React components manage the layout, while D3 handles the arc path calculation. The visualization demonstrates a declarative approach to combining React's component model with D3's geometric utilities.

Oct 7, 2022

Loading thumbnail…

Smiley Part III

This example renders a classic smiley face as a static SVG graphic using React for structure and D3’s `arc` generator to create the mouth. The code defines the face’s dimensions in constants—such as the center position, eye offset, and radius—and then draws a yellow circle with a black stroke, two solid eye circles, and a curved mouth path, all inside a single `<g>` transform. The visualization demonstrates how to combine React’s declarative JSX with D3’s geometric helpers for simple, reusable shape drawing.

Oct 7, 2022

Loading thumbnail…

Smiley Part II

A yellow smiley face rendered as SVG circles, with two eyes positioned symmetrically around a central face. The drawing uses React components and JSX to compute circle positions and radii from constants for center coordinates, stroke width, and eye offsets. React 18 renders the SVG into the DOM, with styling that removes page margins and hides overflow.

Oct 7, 2022

Loading thumbnail…

Smiley Part I

A yellow smiley face rendered as a static SVG graphic. Three circles form the face and eyes, with the outer circle filled yellow and stroked black, while two smaller circles serve as eyes. The example demonstrates basic SVG shape creation using inline SVG elements within an HTML page, styled with minimal CSS to remove page margins and hide overflow. It uses React as the framework, though the visible code is plain HTML and SVG without React components or JavaScript interactions.

Oct 7, 2022