Skip to main content
Log in
S

serjunfan

@serjunfan·15 public vizzes

Loading thumbnail…

World Immigrants

A world map displays immigrant flows between countries, with colored lines connecting origin and destination coordinates based on 2020 migration data. Clicking a country highlights it and filters the visualization to show only flows to that nation, while a horizontal bar chart at the bottom ranks the top ten destinations by immigrant count. The visualization uses React, D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `scaleBand`, and `scaleSqrt`, along with `d3.ForceEdgeBundling` for line bundling. Data is loaded from CSV files via D3's `csv` method, with zooming enabled through `d3.zoom`.

Jun 23, 2021
Loading thumbnail…

Fork of Fork of Fork of of V6 Immigrants flow map between countries

This interactive map visualizes global immigrant flows to a selected country, displaying both origin-destination paths and a bar chart of top destination regions. Clicking a country or highlighted point filters the flow lines and bars accordingly. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for the world map, while flow paths are generated through force-directed edge bundling via `d3.ForceEdgeBundling`. Immigrant data comes from a CSV file, with coordinates matched by country name, and zooming is implemented using `d3.zoom`.

Jun 12, 2021
Loading thumbnail…

Fork of of V6 Immigrants flow map between countries

This interactive map visualizes global immigration flows to and from selected countries in 2020. Clicking a highlighted country filters and displays bundled migration paths, rendered as curved lines, from that origin to destinations worldwide, with a bar chart below ranking the top 20 destination countries by immigrant count. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.ForceEdgeBundling` for flow aggregation, and `d3.scaleBand` with `d3.scaleSqrt` for the bar chart, drawing data from a CSV file.

Jun 11, 2021
Loading thumbnail…

of V6 Immigrants flow map between countries

This interactive map visualizes immigrant flows between countries, with each line representing migration from an origin to a destination country. Clicking a country highlights it in red and filters the visualization to show only its incoming migration flows, while all other flows remain hidden. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath`, with curved lines generated by `d3.ForceEdgeBundling` to reduce visual clutter. The data comes from CSV files loaded with `d3.csv`, and the interface is built with React, allowing users to zoom and pan the SVG-based visualization.

Jun 10, 2021
Loading thumbnail…

V4 Immigrants flow map between countries

This map visualizes immigrant flows between countries in 2020 using an interactive world map. Users can click a country to highlight it as the origin and display bundled curved paths projecting to all destination nations, with stroke opacity indicating connection strength. The visualization uses D3 v5's `geoNaturalEarth1` and `geoPath` for map rendering, `d3.ForceEdgeBundling` for curve grouping, and a `scaleSequential` color scale based on migration numbers. Country boundaries derive from TopoJSON world-atlas data, while migration statistics come from a CSV gist.

Jun 7, 2021
Loading thumbnail…

Fork of Fork of V3 Immigrants flow map between countries

This interactive map visualizes immigrant flows between countries in 2020, rendering a natural Earth projection with country boundaries and curved arcs that represent migration volumes using stroke width and color intensity. Users can click any country to filter and highlight its emigration patterns, with selected regions shown in red and corresponding flow paths displayed in blue. The visualization uses React hooks for state management, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.forceSimulation with curveBundle for edge bundling of flow paths, and d3.scaleSequential with interpolateBlues to encode migration numbers. Data comes from CSV files containing migration statistics and country coordinates, with zooming enabled via d3.zoom.

Jun 7, 2021
Loading thumbnail…

Fork of Fork of Fork of V3 Immigrants flow map between countries

This interactive map visualizes global immigration flows to and from selected countries using edge-bundled lines rendered with SVG. Clicking a country highlights it in red and filters the displayed migration paths to only that origin country, with line opacity and width encoding the 2020 immigrant counts. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the world map, d3.ForceEdgeBundling for bundling the flow lines, and d3.scaleSequential with d3.interpolateBlues for color encoding. Data comes from CSV files loaded via d3.csv, with country coordinates matched from a supplementary coordinate dataset.

Jun 7, 2021
Loading thumbnail…

Fork of V3 Immigrants flow map between countries

This interactive map displays immigration flows to Russia from various countries for the year 2020, using a natural Earth projection. Users can click on any highlighted country to filter and visualize only the migration paths originating from that selection. The map encodes the volume of immigrants through both color intensity and stroke width on the curved flow lines, which are drawn as geographic paths between origin and destination coordinates. Built with React and D3 v5, the visualization leverages `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for map rendering, while processing CSV data loaded via `d3.csv`.

Jun 2, 2021
Loading thumbnail…

V3 Immigrants flow map between countries

This interactive map visualizes global immigrant flows between countries for 2020, based on UN migration data. Clicking a country highlights its origin by turning it red and draws curved flow lines to its destinations, with stroke color encoding the number of immigrants via a sequential blue-purple color scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render world map features, while React manages the selection state and d3.zoom enables pan and zoom interactions.

Jun 2, 2021
Loading thumbnail…

Fork of V2 Immigrants flow map between countries

This interactive map visualizes immigrant flows between countries, showing curved paths from origin to destination for the year 2020. Clicking a country highlights it in red and displays only the migration lines associated with that selected country. The visualization uses React hooks for state management and data fetching, with D3’s `geoNaturalEarth1` projection and `geoPath` for rendering the world map and flow lines as SVG paths. Coordinates come from a local CSV, migration data from a Gist, and country boundaries from a TopoJSON world-atlas file.

May 28, 2021
Loading thumbnail…

V1 Immigrants flow map between countries

This interactive map visualizes global migration flows for the year 2020, showing curved lines between countries that represent immigrant origins and destinations. Users click on a country to isolate and display only the flows originating from that nation. The visualization uses D3’s `geoNaturalEarth1` projection, `geoPath` for rendering the world map and graticules, and React for handling user interactions. Geographic coordinates are derived from a CSV file, while migration counts come from a separate dataset; the map itself is built from topojson data converted to GeoJSON.

May 28, 2021
Loading thumbnail…

Immigrants flow map between countries

This map visualizes immigrant flows between countries using curved lines on a geographic projection. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to render country boundaries, graticules, and flow paths, with React managing the data loading. Immigration data from a 2020 CSV file is processed to extract origin and destination coordinates, and only valid country pairs are displayed. The map uses SVG for rendering, with flows colored in teal to distinguish them from the gray sphere and country fills.

May 7, 2021
Loading thumbnail…

Fork of US graph

This choropleth map shows the proportion of pigs to cows in each U.S. state for 2017, using a sequential color scale from light to dark blue. The visualization combines U.S. Census Bureau state boundaries from the us-atlas TopoJSON with CSV data loaded via d3.csv. React manages the component state, while d3.geoAlbersUsa and d3.geoPath render the map projection and state paths, with d3.scaleSequential mapping data values to colors. State borders are drawn using topojson.mesh, and unpopulated states appear gray.

May 3, 2021
Loading thumbnail…

gw

This visualization shows the top 10 countries by cumulative COVID-19 deaths, using horizontal bars scaled by total deaths. It renders an SVG bar chart with d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, styled with custom CSS. The data comes from a CSV file sourced from Worldometers, and the chart includes a formatted x-axis with d3.format and labels for the chart title and axis. The code uses D3 v6 within a React framework.

Apr 26, 2021
Loading thumbnail…

2020 Studying abroad number!

This choropleth map visualizes 2020 study-abroad numbers by country, with darker reds indicating higher counts. It loads world geometry and country names from the world-atlas TopoJSON/TSV files, joins them to the provided data.json, and renders paths with d3.geoPath and a d3.scaleSequential color scale. Hovering highlights countries green, and d3.zoom enables interactive panning and zooming.

Apr 14, 2021