Alice Hsieh

@AliceHsieh·3 public vizzes

Color and Size Legends

Two legends demonstrate independent D3 color and size scales. A color legend maps ordinal domains like “apple” and “lemon” to discrete hues, while a size legend uses a square-root scale with tick marks and semi-transparent circles. Both are rendered as SVG groups via custom reusable functions, `colorLegend` and `sizeLegend`, which bind data to enter/merge/exit selections. The code uses D3 v5 APIs such as `scaleOrdinal`, `scaleSqrt`, and `scaleDiverging` (imported but unused), with text styling applied through CSS classes.

Feb 14, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example displays a natural Earth projection map of the world, with countries rendered as light green SVG paths and the ocean sphere filled in blue. It loads geographic data from the world-atlas TopoJSON dataset using `d3.json`, converts the TopoJSON features to GeoJSON with `topojson.feature`, and projects them via `d3.geoNaturalEarth1` and `d3.geoPath`. The sphere outline is drawn using a GeoJSON Sphere object.

Feb 7, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit rendered as SVG circles lets users click individual apples or lemons to select them, highlighting the chosen fruit with a black stroke. Built with React and D3 v5, the visualization uses d3.scaleOrdinal for color and radius mappings based on fruit type, while React state manages the selected fruit's ID. Each circle responds to click events, updating the selection and re-rendering the components with animated transitions.

Jan 31, 2020