erin

@Rrin·3 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for data mutations. A bowl of apples changes over time as fruits are eaten and replaced with lemons, showing how the visualization handles removal, modification, and filtering of data elements. The code uses `d3.select`, `d3.range`, and custom ordinal scales for color and radius, rendering SVG circles and text. The update logic in `fruitBowl` manages enter, update, and exit states through `selection.selectAll`, `.merge`, and `.exit().remove()` operations.

Feb 14, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates how to add interactive highlighting to a geographic map with minimal code. It renders an SVG world map using TopoJSON and D3’s `geoNaturalEarth1` projection, styled via CSS classes. The visualization uses D3 v5 with a JavaScript `Heatmap` class, though the class is instantiated with sample array data rather than heatmap-specific values. The key interaction is a simple CSS `:hover` rule that changes country fill colors from light green to red. The code also initializes a zoom behavior, though no zoom transforms or panning are implemented in the provided scripts.

Feb 6, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern - Grouped

A bowl of fruit visualizes the General Update Pattern with grouped elements; apples and lemons appear as colored circles within a bowl, with each fruit's type distinguished by a specific color and radius. The D3.js code uses an ordinal scale for color and radius, and coordinated enter, update, and exit transitions to animate the circle sizes over two seconds as fruits are added, removed, or changed. The example is rendered as SVG and demonstrates the pattern with a click-to-update interaction on numeric labels.

Jan 31, 2020