Vishakha Routra

@75vish·3 public vizzes

Fork of React & D3 Starter

This example demonstrates a minimal integration of React and D3 to display a text message. The `App` component uses a `useRef` hook and a `useEffect` to apply D3's `select` method to a DOM element, setting its text content to "Hello D3 & React." Rendered using `createRoot` from `react-dom/client`, the example shows how D3's selection API can be used for imperative DOM manipulation within React's declarative framework. The message is styled with large, centered text using CSS.

Feb 4, 2026

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example shows a stylized yellow face built entirely with D3.js v5 SVG shapes. A circle forms the head, two circles serve as eyes, rectangles act as eyebrows, and a path created with the `d3.arc` function renders the mouth. The eyebrows animate up and down using chained `transition` calls, each lasting two seconds. The face is centered on a 960×500 SVG canvas using a group element with a translation transform.

Feb 4, 2026

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example builds a smiling yellow face using D3.js v5, drawing the head, eyes, and mouth as SVG shapes positioned with a centered group transform. The code uses `d3.select`, `d3.arc` for the mouth path, and property setters like `attr` for circles and rectangles. A chained `transition` with a 2-second duration animates the eyebrows upward and back down, creating a repeated eyebrow-raising motion. The face is rendered entirely with SVG elements, with no external data source, and uses a fixed 960×500 viewport.

Jan 30, 2026