hunianhang

@hunianhang·3 public vizzes

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of colored wedges, with each wedge representing one color from the dataset. The code loads color data from a CSV file using D3’s `csv` utility, then React renders an SVG. Each wedge’s path is generated by D3’s `arc` function, with start and end angles computed from the data index. The React component uses `useState` and `useEffect` to fetch and store the data, while D3 v5 and React 16.9 handle the rendering.

Nov 16, 2022

Loading thumbnail…

Hello HTML

A grid of ten randomly generated cartoon faces fills the screen, each with a yellow circular head, black-outlined stroke, two eyes, and an arched mouth. Built with React and D3 v7, the example uses d3’s `arc` generator to construct the mouth paths and d3’s `range` to produce the face count. Every face’s dimensions and positions—stroke width, eye offset, eye radius, and mouth size—are randomized on each render, demonstrating reusable SVG components composed within a React hierarchy.

Nov 11, 2022

Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas as a circle with eyes, eyebrows, and a mouth, built by manipulating DOM elements with D3.js v5. The code uses `select`, `append`, and `attr` to construct the shapes, and `transition` to animate the eyebrow group moving down and back up over a 4-second loop. The mouth is a path generated with the `arc` function, creating a curved shape from specified angles.

Nov 9, 2022