Skip to main content
SimilarExport ZIP
100%

Baseball Brushing on Multiple Views

✓ Published0🌍 Public
PPatrick-Houlihan
Last edited Oct 27, 2021
Created on Oct 27, 2021

This interactive visualization combines a world map of cities with a histogram of baseball player names, linked through brushing. Users can brush on the histogram to filter the cities displayed on the map. The map uses d3.geoPath for rendering country boundaries and graticules, while the histogram employs d3.bin, scaleLinear, and brushX for binning and interactive selection. React’s useState and useMemo manage state and optimize performance, with data loaded from CSV and TopoJSON sources.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

This iteration is optimized for performance using React's useMemo hook.

MIT Licensed

Similar vizzes

Loading thumbnail…

Miltiple views with brushing

This example shows a linked brushing interaction between a date histogram and a world map of migrant deaths, where dragging a brush across the time axis filters the bubbles displayed on the map. The histogram aggregates monthly totals using d3.bin and d3.sum, while the map projects coordinates with d3.geoNaturalEarth1 and d3.geoPath. The brush is implemented with d3.brushX, and updates are triggered via React state. Data comes from a CSV of missing migrants, and the world atlas is loaded from TopoJSON.

Ppatasky
80% match
Loading thumbnail…

Fork of Multiple Views with Brushing

A world map displays cities with populations over 50,000 using a square-root size scale, while a histogram below shows the total dead and missing migrants over time. The visualization uses React with D3 v5, employing `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection and `d3.brushX` for interactive brushing. Users can brush the histogram to filter the map points by date range. Data comes from Simplemaps and the World Atlas TopoJSON, with migrant records from a CSV. The map circles are semi-transparent to show overlapping points.

Wweny1109
80% match
Loading thumbnail…

Multiple Views with Brushing

This example demonstrates linked brushing between a world bubble map and a time-series histogram, both rendered as SVG in React. The map plots migrant deaths and missing persons by location with circle radii scaled by d3.scaleSqrt, while the histogram aggregates the same metric monthly using d3.bin and d3.timeMonths. Brushing the histogram with d3.brushX filters the map’s displayed circles in real time. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map projection, and loads data from a CSV of the Missing Migrants Global 2019 subset.

RRajat Dangat
79% match
Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths and missing persons. Users can brush a time range in the histogram to filter the map’s displayed circles, which are sized using `d3.scaleSqrt` and positioned with `d3.geoPath` and `geoNaturalEarth1`. A reactive `useState` hook manages the brush extent. The map shows city locations from a CSV dataset, with country boundaries from World Atlas TopoJSON, all rendered as SVG with React and D3 v5.

CCurran Kelleher
79% match
Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrant events, paired with a time-series histogram of the same data. Brushing a time range in the histogram filters the points displayed on the map, linking the two views. The visualization uses React for rendering, D3 v5 for scales, projections, and brushing, and TopoJSON for country boundaries. The map uses a natural Earth projection via `d3.geoNaturalEarth1`, while the histogram bins reported dates into months with `d3.bin`.

Ssultanmirzapydev
79% match
Loading thumbnail…

Multiple Views with Brushing

A world map displays cities, with circle size encoding the total dead and missing; a time-series histogram below shows the same metric over time. Brushing a date range on the histogram filters the map’s circles to events within that span. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX`. Data comes from a CSV of missing migrants, rendered as SVG within a React app.

EEdward-Elric233
79% match
Loading thumbnail…

Multiple Views with Brushing

This example presents a global map of missing migrant incidents, with circles sized by the total number of dead or missing. A linked date histogram beneath the map allows brush selection to filter the map’s data points interactively. The visualization uses React with D3 v6, employing `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `bin` with `timeMonths` for the histogram. Brushing is implemented via `brushX` and `scaleTime.invert`. Data comes from the Data Canvas Sense Your City dataset.

CCodeDuckie99
79% match
Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a time-series histogram to visualize migrant deaths. Brushing a time range in the histogram filters the map’s bubble markers, which use d3.scaleSqrt for sizing and d3.geoNaturalEarth1 projections via geoPath. The code uses React with useEffect for data loading and d3.brushX for interactive selection, rendering SVG elements.

LLaura Johnson
79% match