julia-richards

@julia-richards·3 public vizzes

Migrant Deaths Linked Views with Brushing

This interactive visualization combines a world map and time series histogram to explore meteorite landing data, using linked brushing to filter the map based on date selection. The map displays circles sized by meteorite mass using the d3.geoNaturalEarth1 projection and d3.geoPath, while the histogram aggregates monthly mass totals using d3.bin and d3.brushX. Data comes from a CSV of meteorite landings, with country boundaries rendered from World Atlas TopoJSON. React hooks manage state and memoize computations, with SVG rendering for both views.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example visualizes meteorite landing data, plotting mass against year for incidents after 1920 with mass under 40,000 grams. Circles are colored by fall type and include tooltips revealing the meteorite name. The visualization is built programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries and wraps D3’s CSV loader to fetch data from a GitHub-hosted CSV file. A custom configuration improves readability, and the chart auto-fits its container’s dimensions, rendering as SVG with a Vega tooltip handler.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example displays meteorite landing data as a scatter plot, mapping year on the x-axis and mass on the y-axis, with circle size encoding meteorite classification and tooltips revealing names. Built with the Vega-Lite API, it filters out masses below 40,000 using a transform from config.js. The visualization loads CSV data via d3.csv, renders with Vega and Vega-Lite, and uses vega-tooltip for interactive hover details.

Apr 26, 2020