Sihua Lee

@sanmao3·3 public vizzes

Fork of Bowl of Fruit - Click to Select

Five apples sit in a row, rendered as red circles inside an SVG. Clicking any apple selects it, drawing a black stroke around it. Built with React and D3 v5, the visualization uses D3's `scaleOrdinal` to map fruit types to colors and radii, with React state controlling the selected fruit ID.

Dec 28, 2021

Loading thumbnail…

network

This example renders a small directed network of eight nodes and five links using D3 v7’s force simulation. The SVG draws curved paths with arrow markers, while each node combines a small circle with a clickable Firefox logo image. Forces include `forceLink`, `forceCollide`, `forceX`, and `forceY`, with node positions updated on each simulation tick. All layout and rendering rely on `d3.forceSimulation` and SVG elements.

Dec 17, 2021

Loading thumbnail…

selection

This example demonstrates D3’s selection API for programmatically creating and managing DOM elements. It renders four paragraphs, each displaying a number from 1 to 4, by selecting the body element and then using `selectAll('p')` with data binding and the `.enter()` method to append new elements. The visualization relies on D3 v7’s `select` and `selectAll` functions, and the code logs both the parent and child selections to the console. The HTML page is styled with large font sizes but contains no graphical chart or data-driven graphics beyond the text output.

Dec 15, 2021