jordi

@jordiiiiii·2 public vizzes

Fork of updatePattern

This example demonstrates a data join update pattern for a fruit bowl visualization. It shows how to add, remove, and update SVG elements when the underlying array of fruit objects changes. The code uses D3 v5 with `select`, `range`, and `scaleOrdinal` to map apple and lemon types to colors and radii. Three timed updates modify the fruit array, triggering re-renders that add or remove circles and text labels. The implementation uses enter, merge, and exit selections to handle transitions dynamically.

Jul 21, 2021

Loading thumbnail…

updatePattern

This example demonstrates the D3 update pattern for smoothly transitioning between data states in an SVG visualization. It shows five fruit circles that change over time through timed intervals: removing an apple, changing an apple to a lemon, and filtering out another apple. The code uses d3.scaleOrdinal to map fruit types to colors and radii, while d3.transition animates circle attributes over one-second durations. The enter, merge, and exit selections handle new, updating, and removed elements respectively, with exiting circles shrinking to zero radius before removal.

Jul 20, 2021