erickdau@gmail.com

@erickdau·3 public vizzes

Fork of Hello HTML

This example renders a yellow smiley face in an SVG canvas using React for component structure and D3’s `arc` function to draw the mouth. The face consists of a large yellow circle with a black stroke, two dark eyes positioned symmetrically, and a semicircular mouth path generated from an arc with a 90-degree angle. The code uses ReactDOM to mount the component, while D3 v7 supplies the arc generator, and all shapes are drawn as SVG elements with fixed pixel coordinates. The visualization demonstrates a minimal, static composition without interaction or data binding.

Mar 22, 2024

Loading thumbnail…

Fork of Let's Make a Face Part I

A smiling face built from SVG primitives uses a yellow circle for the head, with two smaller black circles for eyes and a curved line for a mouth. Rendered with React 18 and plain SVG elements inside an HTML page, the visualization centers the face on a 960 by 500 canvas. The code directly positions each shape via explicit `cx`, `cy`, and `r` attributes, with the head outlined by a black stroke. No external data or animation library is involved, relying solely on static SVG markup generated through React’s declarative syntax.

Mar 19, 2024

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, using an interactive radial layout where each ring segment represents a node’s value. The chart supports click-to-zoom transitions with smooth animations, implemented in D3 v5 with SVG rendering. The dataset is loaded from a CSV and nested into a hierarchy, with color encoding by branch depth. Users can explore the hierarchy by clicking arcs to zoom into nested levels, with the animation providing a smooth transition between views. The example is a port of Mike Bostock’s Observable notebook and serves as a practical reference for adapting D3 v5 to vanilla JavaScript.

Mar 19, 2024