Skip to main content
SimilarExport ZIP
100%

Data Visualization Assignment

✓ Published0🌍 Public
Jjanyqngo106
Last edited Jun 3, 2023
Created on Jun 3, 2023
Forked from HTML Starter

This interactive map displays the global distribution of missing migrants, using a Mercator projection to show countries colored by the total number of dead and missing per country of origin. The visualization includes zoom controls and preset region buttons that trigger smooth animated transitions of both country paths and incident location points. Built with D3.js, the code uses `d3.geo.mercator()`, `d3.geo.path()`, and `d3.behavior.zoom()` to handle the geographic rendering and user interaction.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing migrants on a Map

This map visualization shows the global distribution of missing migrants, with the size of each circle representing the total number of dead and missing individuals at a given location. The visualization uses a natural Earth projection and overlays semi-transparent circles on a world map, alongside graticules and country borders for geographic context. Built with React and D3 v5, the code employs `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to render the map, while a square root scale (`d3.scaleSqrt`) maps the migrant counts to circle radii. Data comes from a CSV file of the Missing Migrants Project, with geographic coordinates parsed and projected onto the SVG canvas.

Bbsolomon103
83% match
Loading thumbnail…

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants, with circle size encoding the total dead and missing per location. The map uses a natural Earth projection rendered via `d3.geoPath`, with land, graticules, and country interiors drawn in SVG. React manages the component state, while D3 scales (`scaleSqrt`) determine circle radii. Data comes from the Missing Migrants Global 2019 subset CSV, loaded with `d3.csv`.

PPedro Henrique Vanali
83% match
Loading thumbnail…

Fork of Missing Migrants on a Map

This interactive visualization combines a world map and a time-series bar chart to display the global distribution and monthly totals of missing migrants. The map uses D3’s `geoNaturalEarth1` projection with `geoPath` and `geoGraticule` to render landmasses and graticules, while circles sized by square-root scale represent the count of dead and missing per incident. A synchronized date histogram below, built with D3’s `bin` and `timeMonths`, aggregates the same data over time. The chart is rendered as an SVG using React, with data from a CSV of the Missing Migrants Global dataset.

CCodeDuckie99
83% match
Loading thumbnail…

D3 course - Missing Migrant Data

This interactive visualization maps recorded migrant deaths and disappearances worldwide, with each city’s circle radius scaled by the square root of its reported total dead and missing. The map renders landmasses in gray on a dark globe, with graticules and country boundaries drawn via `d3.geoPath` and `d3.geoGraticule`. It projects the data using `d3.geoNaturalEarth1`, overlays circles via React SVG, and loads city records from a CSV, with sizes determined by `d3.scaleSqrt`. Missing migrant data comes from a public subset, while country shapes use the World Atlas TopoJSON.

JJames Rhodes
83% match
Loading thumbnail…

40) Missing Migrants on a Map

This example visualizes missing migrants worldwide, with proportional circles indicating the total dead and missing at each incident location. The map uses an equirectangular projection rendered with d3.geoNaturalEarth1 and d3.geoPath, layered with graticules, land masses, and country interiors. React manages the component lifecycle, while d3.scaleSqrt maps the migrant counts to circle radii. Data comes from a CSV of missing migrant incidents, and world geography is loaded from the world-atlas TopoJSON dataset.

Llefat92
83% match
Loading thumbnail…

Missing Migrant Part III

This visualization maps the Missing Migrant Project dataset, showing the total number of dead and missing migrants at each recorded location with circles sized by a square-root scale. It uses a natural Earth projection and geoPath to render world landmasses, graticules, and country interiors. The React app loads the CSV via d3.csv and the world atlas via d3.json, then renders SVG circles with opacity to reveal spatial clustering of migrant incidents.

Aadewole-top
83% match
Loading thumbnail…

Fork of Missing Migrants on a Map

This interactive visualization maps incidents of missing migrants worldwide, with each circle representing a single event and its size scaled to the reported number of dead and missing. The map uses a D3.js natural Earth projection with SVG rendering, incorporating geospatial APIs like `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the graticule and sphere elements. Country boundaries are drawn from the World Atlas TopoJSON source, while the data comes from the Missing Migrants Dataset loaded via D3’s `csv` function. The React-based frontend utilizes `useWorldAtlas` and `useData` custom hooks to fetch and process the geographic and incident data, with circles positioned using the projection and colored with low opacity.

Hhongshuyan99@outlook.com
83% match
Loading thumbnail…

Fork of Missing Migrants on a Map

This interactive React application visualizes the Missing Migrants Dataset as a world map, where each circle represents an event and its radius reflects the total number of dead and missing individuals. Built with D3.js v5, the visualization employs a Natural Earth projection with graticules and country boundaries sourced from the World Atlas TopoJSON. The code leverages `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3, along with `scaleSqrt` to map the death toll to circle sizes, rendering the SVG output through React components.

Cchar0496
83% match