Saroj Khanal

@milan-saroj·3 public vizzes

Bowl of Fruit - Click events with D3.js!

This example demonstrates interactive SVG circles representing a bowl of fruit, where clicking a fruit highlights it with a black stroke. The visualization uses D3.js data joins to smoothly transition fruit sizes and positions when apples are removed or replaced with lemons over timed intervals. The `fruitBowl` function handles enter, update, and exit selections with animated radius and x-coordinate transitions. React is used as the framework wrapper, while `scaleOrdinal` maps fruit types to colors and radii, and event listeners trigger the selection state updates.

Jul 20, 2020

Loading thumbnail…

Ball of fruit

A bowl of fruit animation shows five apples shrinking and disappearing, with one apple transforming into a lemon and a second apple being removed entirely. The D3.js v5 and `scaleOrdinal` API map fruit types to distinct radii and colors, while the `transition().duration()` method animates the circle radii over one-second intervals. The SVG circles enter with a radius of zero, expand to their assigned size, and exit by shrinking back to zero, driven by timed `setTimeout` callbacks that mutate the fruit data array.

Jul 20, 2020

Loading thumbnail…

Untitled

A line chart depicts COVID-19 cases and deaths in the US over time. Two smooth, animated curves, one red and one blue, trace these metrics, with axes for dates and population counts. Built with React, D3 v4, and SVG, it uses `d3.line`, `d3.curveMonotoneX`, and `d3.transition` for drawing. Data comes from a CSV file, which is loaded via `d3.csv`.

Jul 20, 2020