rintisch

@rintisch·6 public vizzes

Line Chart with Multiple Lines

This line chart displays a week of temperature data from multiple cities, with each city represented by a distinct colored line over time. The visualization includes axes with labels, a legend showing city names, and a title. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest` to group data by city, and a `line` generator with `curveBasis` for smooth paths. Data comes from Data Canvas - Sense Your City, rendered as SVG with custom axis styling and a color legend component.

Oct 28, 2019

Loading thumbnail…

Color and size legends

This example demonstrates two distinct legend types for data visualization: a color legend and a size legend, both rendered as SVG. The color legend maps categorical values (apple, lemon, limes, orange) to distinct colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric range (0–10) to circle radii, showing a proportional relationship. Both legends are built with the D3 library (v5) and its selective update pattern via `selection.merge`.

Oct 28, 2019

Loading thumbnail…

Bowl of Fruit II - General Update Pattern

This example demonstrates the general update pattern for data joins in D3, showing how fruits in a bowl transition as apples are eaten or replaced with lemons over timed intervals. It renders an SVG bowl with circles and text labels, using `d3.scaleOrdinal` for color and radius scales, while `selection.data`, `.enter`, `.merge`, and `.exit` manage the dynamic updates, with `transition().duration()` animating the radius changes over one second.

Oct 25, 2019

Loading thumbnail…

Bowl of Fruit - Hover to select

Five apples and a lemon are rendered as colored circles in an SVG bowl, with hover highlighting the selected fruit with a black outline. The example demonstrates enter, update, and exit selections, animating radius and position changes over one-second transitions. Built with D3 v5, it uses `scaleOrdinal` for color and size, `selection.merge`, and `transition` to handle dynamic data updates as fruits are eaten and replaced.

Oct 24, 2019

Loading thumbnail…

Bowl of Fruit - Click event

A bowl of five apples is rendered as SVG circles, with click events selecting a fruit and highlighting it with a black stroke. The data-bind updates smoothly through animated transitions: apples shrink and disappear when eaten, and the third apple morphs into a lemon with a color and size change. Using d3-v5, the code employs scaleOrdinal for color and radius mapping, selection.merge for updating, and transition().duration() to animate enter, update, and exit states.

Oct 22, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Multiple circles represent fruit in a bowl, with apples as dark red and lemons as orange. The example demonstrates D3’s general update pattern, where data joins with `selection.data` handle entering, updating, and exiting elements. Animated transitions using `transition().duration(1000)` grow new circles from radius zero, shift positions, and shrink removed ones. The code uses `d3.scaleOrdinal` for color and radius mapping, with `merge` to combine enter and update selections.

Oct 21, 2019