35. Multiple Views Cleanup

100%

35. Multiple Views Cleanup

✓ Published0🌍 Public

Last edited Apr 2, 2021

Created on Apr 2, 2021

This visualization combines a geographic bubble map with a histogram, both rendered in SVG using React, to display data on migrant deaths and disappearances. The bubble map projects city locations using the D3 natural Earth projection, with circle areas scaled proportionally to the square root of the death count against a graticule and world atlas. Below it, a time histogram aggregates the same data into monthly bins along a time axis, using D3’s time scale and histogram binning functions. The topojson library provides the country boundaries from World Atlas.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map and a histogram to visualize reported migrant deaths and disappearances. The map projects city coordinates using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle radii scaled by `d3.scaleSqrt`. The histogram bins reported dates by month using `d3.histogram` and summarizes totals with `d3.sum`. Both views are rendered in SVG within a React component, with the histogram overlaid on the lower portion of the map. Data comes from a CSV of global migrant incidents, and country boundaries use TopoJSON from the World Atlas.

CCurran Kelleher

92% match

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map and a time-series histogram to visualize global migrant deaths and disappearances. The map uses `geoNaturalEarth1` and `geoPath` from d3-geo to project circle markers scaled by the square root of the death count, while the histogram uses d3’s `bin` and `scaleTime` to aggregate reported dates. React components structure the SVG, with data loaded via d3-fetch from a CSV of the Missing Migrants Project.

SSong Tao Chen

91% match

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map and a date histogram to visualize the locations and timing of migrant deaths and disappearances. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world landmasses with graticules, while circles scaled by d3.scaleSqrt represent the total dead and missing per incident. The histogram below uses d3.bin with timeMonths thresholds and a scaleTime x-axis to aggregate the same data over time, with rect marks colored by the d3.linear y-scale. Data comes from the Missing Migrants Project CSV, and the React components use d3.v5 for all scales and shapes.

Yyuzhang21

91% match

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map and a date histogram to visualize migrant deaths and disappearances. The map uses a natural Earth projection with `d3.geoPath` to draw country boundaries and circles sized by a square-root scale, while the histogram bins the same data by month using `d3.bin` and `d3.timeMonths`. Both views share a dataset from the Missing Migrants Project, rendered as SVG within a React component hierarchy.

Jjesramyep1263

91% match

Loading thumbnail…

Multiple Views

This example combines a bubble map with a date histogram to visualize missing migrant incidents. The map uses a d3.geoNaturalEarth1 projection with graticules and country boundaries from the World Atlas TopoJSON, while circles sized by d3.scaleSqrt represent the total dead and missing. The histogram bins the data by month using d3.bin and sums the casualties with d3.sum, displaying the temporal distribution. Both views are rendered as SVG in React, reading data from a CSV of the Missing Migrants Project.

MMichael Bergerson

90% match

Loading thumbnail…

Multiple views

This interactive visualization combines a bubble map and a date histogram to display global migrant deaths and disappearances. The map uses a D3 natural Earth projection with graticules and country borders, where circle size scales with the square root of the reported total. The histogram bins incidents by reported date using D3's time-based binning. Both views are rendered as SVG elements. The code leverages D3 utilities for data loading, scaling, and projection, with React components managing the view composition.

Rrajamrit-singh

90% match

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map with a date histogram to visualize missing migrants data. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render world landmasses, graticules, and country borders, with circle sizes scaled by `d3.scaleSqrt` based on the total dead and missing. The histogram below bins reported dates into monthly intervals using `d3.histogram` and `d3.timeMonths`, summing casualties per bin with `d3.sum`. Both views render as SVG within a React component structure, pulling data from a CSV of migrant incidents and TopoJSON world atlas boundaries.

Jjwlam83

90% match

Loading thumbnail…

Fork of Multiple Views Cleanup

This interactive visualization combines a geographic bubble map with a time-series histogram to explore migrant deaths and disappearances. The map projects city locations using an equal-area projection with graticules, while the histogram aggregates monthly totals using `d3.histogram` and `timeMonths`. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` for the map projection and `scaleSqrt` for bubble sizing, rendering data from the Missing Migrants Project as SVG. The code demonstrates a modular approach with separate axis and mark components for each view.

Eevers-codeshop-ai

89% match