Guillaume Calmettes

@gcalmettes·2 public vizzes

Kids Shape and Color App

This interactive D3 v5 app lets a user mix and match colors, sizes, and shapes by clicking swatches in side panels, updating a central mark rendered as an SVG path. It uses `d3.symbol` with `symbolCircle`, `symbolSquare`, and `symbolTriangle` for the geometry, and `selection.merge` to handle dynamic re-renders of the panels and the mark on each state change. The interface is laid out with fixed SVG groups, and the mark’s fill and scale are driven by user selections from the color, size, and shape panels.

Nov 3, 2018

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types: a color legend with ordinal categories for fruits and a size legend with a square-root scale mapping numeric values to circle radii. Using D3 v5, it renders SVG circles and text labels, with the color legend employing `scaleOrdinal` and the size legend using `scaleSqrt` with tick generation. The size legend positions circles based on cumulative radius sums with spacing, while both legends use reusable functions (`colorLegend` and `sizeLegend`) called via D3’s selection `.call()` pattern.

Nov 3, 2018