Justine Giaky Huynh

@jghuynh·3 public vizzes

Color and Size Legends

This example demonstrates how to create custom legends for both ordinal color scales and continuous size scales in D3 v5. It shows a color legend with four fruit categories (apple, lemon, lime, orange) rendered as colored circles, and a separate size legend with scaled circles representing values from 0 to 10. The code builds reusable legend components using D3’s `scaleOrdinal`, `scaleSqrt`, and `selection.call()`, rendering everything as SVG elements with styled fonts and circle strokes defined in CSS.

Feb 23, 2020

Loading thumbnail…

Mobility Rate Bubble Chart

This bubble chart shows the relationship between median parent household income and mobility rate for California universities, with bubble size representing average students per cohort and color indicating trend in parents from the bottom income quintile. The visualization uses D3 v5 with SVG rendering, d3.scaleSqrt for bubble sizing, d3.scaleDiverging with the Spectral interpolator for color encoding, and d3-legend for legends. Data comes from Opportunity Insights' Mobility Report Cards dataset, filtered to California institutions and sorted by cohort count for proper layering.

Feb 22, 2020

Loading thumbnail…

Gun Deaths in Florida

This example re-creates the Florida Gun Deaths chart, showing the number of murders committed with firearms in Florida from 1989 onward alongside an annotation marking when the "Stand Your Ground" law was enacted. The visualization uses D3.js (v5) with SVG rendering, employing `d3.area()` for the red area chart, `d3.axisBottom` and `d3.axisLeft` for axes, and a line drawing function to add context. Data is loaded via `d3.csv` and filtered by year before being mapped to linear scales.

Feb 21, 2020