Evgeny

@simvol·4 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

A line chart displays randomly generated scores over a sequence of dates, with the line’s stroke transitioning vertically through a multi-stop color gradient. The visualization uses d3.csv indirectly, but primarily relies on d3.scaleTime, d3.scaleLinear, d3.line with curveNatural, and d3.axisBottom/axisLeft. Data is created with Math.random and rendered as SVG, with an animated transition via d3.transition for the line path update.

Jun 12, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A D3.js visualization animates a bar chart of twenty randomly generated data points, showcasing the general update pattern's special cases. The bars, colored with a gradient spectrum from RainbowVis.js, grow from the bottom to their respective heights over a one-second duration with staggered delays. The example uses the d3.select, d3.csv, d3.scaleLinear, d3.scaleTime, d3.extent, d3.axisLeft, and d3.axisBottom APIs within a barGradient function, rendering via SVG and animation. The data consists of random integer scores mapped to dates in June 2020.

Jun 12, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates a bar chart with gradient-filled rectangles, showing 20 random data points over time. The bars animate from the bottom of the chart upwards using a transition with staggered delays. The visualization employs D3 v5’s general update pattern, using `selectAll`, `enter`, `merge`, and `exit` to manage the SVG elements. It uses `d3.scaleTime` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and defines a linear gradient via SVG’s `linearGradient` element with custom color stops.

Jun 9, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, showing how data joins handle adding, removing, and modifying elements in a visualization. A bowl of apples and lemons is rendered as SVG circles that transition between states as fruits are eaten or replaced over timed intervals. The code uses `d3.scaleOrdinal` for color and radius mapping, and calls `fruitBowl` as a reusable function that leverages `selection.enter()`, `selection.merge()`, and `selection.exit()` with `transition.attr` for smooth animations. The data consists of generated fruit objects with random IDs, visualized in a fixed SVG canvas.

Jun 6, 2020