X

XiaoleiGuo

@XiaoleiGuo·17 public vizzes

Loading thumbnail…

恐怖主义伤亡数（1979-2018）

This interactive visualization presents global terrorism casualties from 1979 to 2018, combining a world map with a linked time-series bar chart. Bubble sizes on the map encode the total dead and missing for each incident, while brushing across the date histogram filters the map to show only incidents within the selected period. The map uses d3.geoNaturalEarth1 with d3.geoPath for country boundaries and graticules, while the histogram applies d3.bin and d3.brushX. Data comes from a CSV file with approximate coordinates. React and D3 v5 render all elements as SVG, with useMemo optimizing performance.

Loading thumbnail…

恐怖主义伤亡数

This visualization combines a world bubble map with a time-series histogram to explore global terrorism casualties. The map displays circles scaled by the total dead and missing, while the histogram shows monthly casualty sums. A brush on the histogram filters the map’s circles interactively. The visualization uses React, D3 v5, and SVG, leveraging `geoNaturalEarth1` for the map projection, `scaleSqrt` for circle sizing, and `brushX` to enable time-range selection. Data comes from the Global Terrorism Database, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example presents a linked-view visualization of migrant deaths using a world map and a time-series histogram. A bubble map shows the geographic distribution of fatalities, while a brushed date histogram filters the map to show data within a selected time range. The visualization uses React with `useMemo` for performance optimization, D3 v5 for map projection (`geoNaturalEarth1`), geographic paths (`geoPath`), and scales (`scaleSqrt`, `scaleTime`), as well as `brushX` for interactive brushing. Data is loaded from a CSV dataset, and country boundaries come from World Atlas TopoJSON.

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Brushing

This interactive visualization combines a world map of migrant deaths with a linked time-series histogram. Users can brush over the histogram to filter the map’s bubble markers, which encode the total dead and missing through a d3.scaleSqrt. The map renders via d3.geoNaturalEarth1 and d3.geoPath, while the histogram uses d3.bin and d3.brushX. Built with React hooks (useMemo, useState) and D3 v5, it loads CSV city data and TopoJSON world boundaries.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization links a geographic bubble map of migrant deaths with a time-series histogram, using brushing to filter data across both views. The map plots circles sized by the "Total Dead and Missing" count, while the histogram aggregates deaths by reported date. Selecting a time range in the histogram filters the map to show only incidents within that period. The implementation uses React with `useMemo` for performance, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `scaleTime`, `histogram`, and `brushX`, and renders as an SVG with data from a CSV and world-atlas TopoJSON.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization combines a world map and a time-series histogram to explore migrant deaths. The map displays proportional circles for each incident, with the histogram below showing the temporal distribution of casualties. Users can brush over a time range in the histogram to filter the map, highlighting only incidents within that period. Built with React and D3, it uses `d3.geoPath` for geographic projections, `d3.scaleSqrt` for circle sizing, and linked views through shared state.

Loading thumbnail…

Multiple Views with Brushing

Two synchronized views explore migrant deaths and disappearances: a bubble map using a natural Earth projection and a time-series histogram. Brushing a time range in the histogram filters the map’s circles, which are scaled by the square root of the total dead and missing. The React app uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, and `d3.brushX`, with country boundaries from World Atlas TopoJSON and city data from Simplemaps. SVG rendering shows graticules, landmasses, and interactive months.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization links a bubble map of migrant deaths with a brushing-enabled histogram. The map plots circles sized by total dead and missing using a square-root scale, while the histogram aggregates monthly totals. Users brush the time axis to filter the map to corresponding dates. The code uses React, D3 v5 APIs like `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `histogram`, with data from a CSV hosted on GitHub and world boundaries from TopoJSON.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example shows migrant deaths worldwide with a bubble map and a linked time-series histogram. The map plots circles scaled by deaths per location, while the histogram displays monthly totals, with brushing on the histogram filtering the map's data. The visualization uses React with d3.v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and CSV data from a data-journalism repository.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization displays migrant deaths worldwide, with a bubble map showing the total dead and missing per location alongside a linked time series histogram. Users brush the date histogram to filter the map’s circles, revealing how fatalities vary over time. Built with React and d3.v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.scaleSqrt` for circle sizing, and `d3.brushX` to coordinate the linked views. Data comes from a CSV of migrant death records with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Multiple Views with Brushing

A world map with proportional symbols shows the geographic distribution of reported migrant deaths and disappearances, while a linked time-series histogram displays the same data aggregated by month. Brushing a time range in the histogram filters the circles shown on the map, revealing temporal patterns in the spatial data. The visualization uses React for component structure, with d3.geoMercator and d3.geoPath rendering the map and d3.brushX enabling the interactive selection. Data comes from a CSV of incident reports, and country boundaries are drawn from TopoJSON world-atlas data.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example uses linked views to explore migrant deaths. A world map displays circles scaled by the total dead and missing, sized with a square root scale. A time-series histogram below shows monthly death counts, with a brushing tool to select a date range. Brushing filters the map to show only data within that period. The visualization is built with React and D3, using `d3.geoPath` for the map, `d3.scaleTime`, `d3.histogram`, and `d3.brushX` for brushing. Data comes from the Missing Migrants Project, and the map uses Natural Earth land outlines and graticules.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization presents migrant deaths worldwide through a linked-view design. A world map displays proportional circles representing total dead and missing individuals, using a square root scale for sizing. Below, a histogram aggregates the same data by month, with brushing enabled through `d3.brushX` to filter the map’s circles based on the selected time range. The map is rendered with `d3.geoNaturalEarth1` and `d3.geoPath`, while React’s `useMemo` optimizes rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Bangladesh poverty MAP

This choropleth map of Bangladesh visualizes district-level poverty rates through a red-to-white color scale. Users can hover over each district to view a tooltip displaying the specific city name, ID, extreme poverty, and poor-level percentages. Built with D3 v5, the visualization uses `geoMercator` projection and `geoPath` to render administrative boundaries from TopoJSON data. It supports zoom and drag interactions via the `d3-zoom` event, while district fill colors are computed from linked JSON poverty statistics.

Loading thumbnail…

Bangladesh poverty MAP

An interactive choropleth map of Bangladesh visualizes district-level poverty rates, with districts shaded on a white-to-red scale based on the proportion of poor residents. Hovering over a district displays a tooltip with its name, ID, extreme poverty rate, and poor rate. The visualization uses D3 v5 with `geoMercator` and `geoPath` to render TopoJSON boundary data, and employs `d3.zoom` for pan and zoom capabilities. Poverty statistics come from a local JSON dataset, while geographical boundaries are sourced from an external Bangladesh TopoJSON repository.

Loading thumbnail…

D3 Course Code Along - Choropleth Map

This choropleth map displays world countries colored by income group, with a legend showing the ordinal color scale. Built with D3 v5, it uses `d3.geoMercator` for projection, `d3.geoPath` to render geographic features from TopoJSON world-atlas data, and `d3.scaleOrdinal` with `schemeReds` for color encoding. Interactive zooming is enabled via `d3.zoom`. A custom color legend with animated circles transitions updates smoothly, and hover effects highlight individual countries.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map with D3.js, displaying country boundaries as green polygons on a blue spherical backdrop against a black ocean. The visualization loads geographic data from the World Atlas TopoJSON file via `d3.json`, then converts it into GeoJSON features using the `feature` method from TopoJSON. The map uses a Natural Earth projection (`geoNaturalEarth1`) and renders paths with `d3.geoPath`, while a separate path element draws the sphere outline. The SVG output highlights the simplicity of data-driven mapping.