Chiasm Crossfilter Integration

100%

Chiasm Crossfilter Integration

✓ Published0🌍 Public

Last edited Oct 13, 2021

Created on Oct 12, 2021

This interactive visualization links a bubble map of migrant deaths and disappearances with a time-series bar chart of monthly totals. Brush selection on the bar chart filters events on the map using crossfilter, while map panning updates the chart’s filtered range. Built with Chiasm components, D3 v3, Leaflet, and crossfilter, it renders SVG bars, canvas tiles, and circle markers over map data loaded from CSV/JSON files. Movement is throttled and animated with transitions.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Chiasm Crossfilter Integration

This example integrates a linked bubble map and temporal histogram to explore migrant deaths. The map, built with Leaflet, renders each death as a red circle, while the histogram uses D3 and Crossfilter to show the temporal distribution. Brushing a date range in the histogram filters the map, and panning or zooming the map updates the histogram, enabling interactive cross-filtering between the two views. The visualization combines D3, Leaflet, Crossfilter, and Chiasm to support these coordinated interactions, with panning and zooming on the map refining the time series and brushing on the time axis filtering map points.

CCurran Kelleher

91% match

Loading thumbnail…

Chiasm Crossfilter Integration

This example shows a linked crossfilter dashboard with a Leaflet bubble map and a bar chart, driven by Chiasm’s reactive component architecture. Brushing the bar chart filters the map’s circles by date, using `ChiasmCrossfilter` to aggregate event data by month and latitude/longitude. D3 v3 renders the bar chart and map, while the layout plugin manages the vertical split and the dataset loader fetches the `events` data. Crossfilter 1.3.12 handles multidimensional filtering across the two visualizations.

Bbasskur

83% match

Loading thumbnail…

Interactable time table

This interactive visualization combines a world bubble map with a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection via `d3.geoPath` to plot circles scaled by the number of dead and missing, while the histogram below aggregates the same data by reported date using `d3.bin` and `scaleTime`. A brush on the histogram filters the map’s circles, dynamically updating the visualization. Built with React and D3 v5, it sources data from a Missing Migrants CSV and country boundaries from TopoJSON.

Jjsong

79% match

Loading thumbnail…

TODO: Migrant Deaths Linked Views with Brushing

This interactive visualization links a bubble map and a time-series histogram to explore migrant deaths and disappearances worldwide. The map displays the total dead and missing per location with bubble size scaled by magnitude, while the histogram shows monthly totals over time. Brushing a time range in the histogram filters the map’s bubbles to show only incidents within that period. The visualization uses React with d3.scaleSqrt, d3.geoNaturalEarth1, and d3.geoPath for mapping, and d3.brushX for the linked selection. Data comes from a CSV of Missing Migrants Global incidents.

WWarren-Fitzhenry

79% match

Loading thumbnail…

Migrants Multi View w/ Brushing (Performance Optimized)

This interactive visualization combines a bubble map of migrant deaths with a time-series histogram, linked through brushing. Dragging across the histogram filters the map to show incidents within the selected date range. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render world landmasses, while circle size encodes the total dead and missing via `d3.scaleSqrt`. The histogram bins data monthly using `d3.histogram` and `d3.timeMonths`, with a `d3.brushX` for interactive filtering. All rendering uses SVG within a React framework, with performance optimized through `useMemo` and `d3.v5`.

AAndres de la Garza

79% match

Loading thumbnail…

Migrant Chart Aggregation Part 2

This interactive visualization aggregates migrant deaths and disappearances over time by binning the reported dates into monthly intervals. The bar chart, built with React and D3 (d3.bin, d3.timeMonths, d3.sum), sums the "Total Dead and Missing" values for each month. Using d3.scaleTime and d3.scaleLinear, the SVG renderings map dates and counts to positions along the axes. Tooltips display exact monthly totals. The dataset comes from a CSV file of global Missing Migrants records.

Jjbruzzo

78% match

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization combines a world bubble map with a time-series histogram to explore migrant deaths and disappearances. Users can brush a time range in the histogram to filter which incidents appear on the map, linking the two views. The map uses a natural Earth projection via `d3.geoPath`, with circle radii scaled by the square root of the death count. The histogram aggregates monthly totals using `d3.bin`, and brushing is implemented with `d3.brushX`. Data comes from the Missing Migrants Project CSV, rendered with React and SVG.

HHwl98

78% match

Loading thumbnail…

Interactable time table

This interactive visualization combines a world map and timeline chart to explore global migrant deaths. A bubble map uses `d3.geoNaturalEarth1` and `d3.geoPath` to project circles scaled by total dead and missing, with country boundaries and graticules from TopoJSON. A linked date histogram, powered by `d3.brushX` and `d3.bin`, allows brushing to filter the map in real time. The data comes from a CSV of migrant incidents, rendered with React and D3 v5.

JJunyanL

78% match