Nick-Brice (@Nick-Brice), VizHub

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a bubble map and a time-series histogram to explore migrant deaths worldwide. The map displays circles sized by the total dead and missing, while brushing the histogram filters the map’s circles in real-time. It uses React with `useMemo` for efficient rendering, D3 v5 for scales, `geoNaturalEarth1` projection, and `brushX` for linked selections. Data comes from a CSV of global migrant incidents, with country boundaries from World Atlas TopoJSON.

Mar 29, 2022

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a bubble map and a time-series histogram to explore migrant deaths worldwide. The map displays circles sized by the total dead and missing, while brushing the histogram filters the map’s circles in real-time. It uses React with `useMemo` for efficient rendering, D3 v5 for scales, `geoNaturalEarth1` projection, and `brushX` for linked selections. Data comes from a CSV of global migrant incidents, with country boundaries from World Atlas TopoJSON.

Mar 29, 2022

Loading thumbnail…

Fork of Persons of Concern StreamGraph by Origin

This visualization presents a streamgraph of the total number of persons of concern (refugees, asylum-seekers, internally displaced persons, and related categories) grouped by country of origin, using data from UNHCR Population Statistics. The chart renders as an SVG with a wiggling stacked area layout, highlighting countries with over one million total persons. It interpolates yearly values between data points and uses d3.stack with stackOffsetWiggle, d3-scale-time, and d3.axisBottom for the time axis. Labels are positioned automatically via the d3-area-label library, and the implementation runs on d3 v4.

Mar 29, 2022

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes using two dropdown menus built with `ReactDropdown`. The React component structure uses `useState` to manage axis selections and `d3.csv` to load data, while D3’s `scaleLinear`, `extent`, and `max` handle scaling. SVG circles represent individual flowers, with axis labels and ticks generated by custom `AxisBottom` and `AxisLeft` components, rendering the chart entirely in SVG.

Mar 28, 2022