Edison Gu

@edisonghc·5 public vizzes

NJ Income Final

This interactive visualization combines a bubble map of New Jersey with a linked histogram, showing income and population by ZIP code. Users can toggle between average income and population for bubble sizing, while brushing the histogram filters the map by age range. The map uses d3.geoMercator and d3.geoPath with TopoJSON county boundaries, while the histogram uses d3.histogram and d3.brushX. Circles are scaled with d3.scaleSqrt, and all rendering uses SVG within a React framework.

Aug 16, 2023

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes the global share of the population infected with HIV/AIDS for 2017, using a yellow-orange-red sequential color scale to encode prevalence percentages. Country boundaries come from the World Atlas TopoJSON, while the map projection, graticules, and sphere are rendered using d3.geoPath and d3.geoGraticule. The visualization is built with React, fetching data via d3.csv, and uses d3.scaleSequential with interpolateYlOrRd for coloring, with gray indicating missing data.

Aug 15, 2023

Loading thumbnail…

NJ Income

This interactive visualization displays demographic and income data for New Jersey, showing population counts or average incomes as scaled circles positioned by geographic coordinates on a county map. Users select which attribute to display via a dropdown menu, while a histogram below shows age distribution, with a d3.brushX selection filtering the map circles to show only data within the selected age range. The map uses d3.geoMercator projection with d3.geoPath to render county boundaries from TopoJSON, while circles are sized with d3.scaleSqrt based on the chosen metric, with data sourced from a CSV file containing individual income records.

Jul 31, 2023

Loading thumbnail…

Test

A date histogram displays the sum of total dead and missing migrants per month, sourced from the Missing Migrants Dataset. The visualization uses d3.bin to group reported dates into monthly bins and d3.sum to aggregate the death counts within each bin. React components render SVG axes and rectangular marks, with d3.scaleTime and d3.scaleLinear mapping time and counts to pixel coordinates, while tooltips show exact values on hover.

Jul 31, 2023

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This example links a geographic bubble map of New Jersey counties with a time-series histogram, using color and size to convey the annual salary of migrant deaths. Brushing the histogram filters the map, with the selected time range visually isolated on the map. The visualization is built with React and D3 v5, using `d3.geoMercator` and `d3.geoPath` for the map projection, `d3.scaleSqrt` for bubble sizing, and `d3.brushX` for the interactive filter. Data on migrant deaths and county boundaries are loaded from CSV and TopoJSON sources.

Jul 31, 2023