musclemike

@musclemike·2 public vizzes

Practice

A donut chart of five colored arcs represents angular segments via D3's `arc` generator, with the final arc spanning a full circle from 3 radians to 2π. The SVG is centered using a group transform, and each path's `d` attribute is computed from hardcoded `startAngle`/`endAngle` data. The visualization uses `d3.select` and `d3.arc` with an inner radius of 60 and outer radius of 100, applying a small pad angle between segments. Colors come from a fixed palette, and the chart is rendered statically without interaction.

Mar 26, 2020

Loading thumbnail…

Practice

This practice visualization renders a simple face composed of a yellow circle with a black stroke, two eyes, and a curved mouth. Built with React and D3 v5, it uses D3’s `select` and `arc` APIs to construct SVG shapes. The `arc` function generates the mouth path with specified inner and outer radii and angular extents. The composition is centered via an SVG transform, with eye spacing and offsets hard-coded. The example demonstrates basic SVG drawing and D3’s arc path generator for creating annular sectors.

Mar 26, 2020