vaporpin

@vaporpin·4 public vizzes

React Hooks Bowl of Fruit

Five apples with D3 ordinal color and radius scales render as React circles in an SVG bowl. Clicking a fruit updates its selected state through React Hooks (`useState`) and a callback prop to draw a black stroke. React’s `useEffect` initializes a D3 brush on a separate `<g>` element, logging selection events to the console. The example demonstrates combining React’s declarative component model with D3’s imperative brush API.

Oct 28, 2020

Loading thumbnail…

React Hooks Bowl of Fruit

A React Hooks bowl of fruit renders five apples as circles in an SVG, with a black outline highlighting the currently selected fruit when clicked. The example demonstrates state management via `useState` for both the fruit array and the selected fruit ID, passing them to a functional `FruitBowl` component. Using D3 v5’s `scaleOrdinal` for color and radius mappings, it sets circle properties dynamically, enabling interactive selection through React event handlers.

Oct 28, 2020

Loading thumbnail…

D3 Nested & Independent General Update Pattern

This example demonstrates an animated fruit bowl where apples and lemons are added, removed, and resized, showing how nested groups of rectangles update independently within each fruit group. The code uses D3’s General Update Pattern twice: first to manage the outer `<g>` elements for each fruit, then, inside a `selection.each` callback, to handle the inner rectangles per group via `selectAll('rect')` and `.data()`. The inner rectangles’ width is driven by `radiusScale(d.type)`, while their quantity is set by `d3.range(d.num)`.

Oct 23, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Five apples appear as SVG groups in a bowl, where each apple holds two stacked slices. After one second, the last apple disappears; another second later, the third apple becomes a lemon; then the second apple is removed, demonstrating special cases of D3’s general update pattern. The code uses `selection.join`-style merge and exit logic with `d3.scaleOrdinal` for color and radius, plus nested `rect` generation via `d3.range`.

Oct 21, 2020