mesmez

@mesmez·2 public vizzes

Organization Graph Diagram

This example shows a hierarchical organization graph with a single parent node connected to two child nodes, one of which branches into six identically labeled "anonymous" nodes. The graph is rendered as SVG circles and text labels connected by black lines. The code builds the node and link data manually using exported arrays and a custom helper function. It uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute the layout, with node positions updated on each simulation tick.

Nov 20, 2020

Loading thumbnail…

Let's make face with d3

A yellow smiley face is drawn in SVG, with a circular head, two eyes, and a curved mouth defined using `d3.arc()`. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition().duration()` calls on their group’s `transform` attribute. The code uses D3 v6 selections and `parseFloat`/unary plus to read SVG dimensions, positioning all features relative to the center.

Nov 18, 2020