luckytrue

@luckytrue·2 public vizzes

Untitled

This visualization displays two arc-shaped bars representing values from a CSV file, with each bar’s arc length proportional to its value. The arcs use a green color scale and animate their growth when clicked, triggering a random value update. Built with React and D3.js, the code loads data via `d3.csv`, constructs arcs using `d3.svg.arc`, and animates transitions with `transition.attrTween`. Labels appear above each arc, and clicking anywhere on the SVG starts the simulation.

Mar 20, 2020

Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face, built from SVG primitives, blinks its rectangular eyebrows up and down repeatedly. The example uses D3.js v5 selections and transitions to animate the facial features. A circle forms the head, two circles serve as eyes, and an arc path, generated with the `d3.arc()` helper, creates the mouth. The code constructs the face by appending SVG elements to a group and animates the eyebrows with chained `transition().duration()` calls.

Mar 19, 2020