Skip to main content
Log in
K

ka40

@ka40·4 public vizzes

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

A linked-view dashboard maps migrant deaths by location and time using a D3 world map with proportional circles and a brushed time-series histogram. The React app uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for filtering, and d3.bin for temporal aggregation. City coordinates and death counts come from the Missing Migrants Project dataset, while country boundaries use TopoJSON from world-atlas.

Mar 21, 2022
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world bubble map of migrant deaths with a linked time-series histogram. Brushing on the histogram filters the map’s circles to show deaths within the selected date range. The map uses a d3.geoNaturalEarth1 projection via d3.geoPath, while the histogram uses d3.brushX, d3.bin, and scaleTime. React’s useMemo optimizes rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Mar 21, 2022
Loading thumbnail…

Fork of Multiple Views with Brushing

A world map displays circles sized by the total number of dead and missing migrants reported at each location, with a linked time-series bar chart below showing monthly totals. Brushing a time range in the histogram filters the map’s circles to those incidents occurring within that period. Built with React, the visualization uses D3 v5 APIs including d3.geoPath for the map, d3.bin and d3.brushX for histogram binning and interactive selection, and d3.scaleSqrt for circle sizing. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

Mar 21, 2022
Loading thumbnail…

Hello HTML

A single static circle appears centered on a 960-by-500 SVG canvas, rendered as the sole graphic on an otherwise blank HTML page. The code sets the page margin to zero and hides overflow, ensuring the circle sits flush against the viewport edge. The example demonstrates the minimal requirements for embedding SVG directly in HTML, using a `<circle>` element with explicit `cx`, `cy`, and `r` attributes. It requires no JavaScript or external libraries, relying solely on the browser’s native SVG support to display the shape.

Mar 20, 2022