Yuxin Shao

@JaneShaosyx·3 public vizzes

Fork of USA Education Choropleth Map (fcc project)

This fork of the freeCodeCamp choropleth map example visualizes the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a sequential yellow-green color scale. The map renders as SVG via React, with county boundaries drawn using d3.geoPath and topojson feature extraction from county, state, and nation geometries. County color values are mapped through a d3.scaleSequential with interpolateYlGn, while education data is loaded from the freeCodeCamp JSON endpoint and joined to county IDs.

Dec 3, 2022

Loading thumbnail…

Fork of map with points

This visualization displays the population of US cities as circles overlaid on a map of the United States, with the map drawn from TopoJSON data and city points positioned using the geoAlbersUsa projection via d3.geoPath. Circle sizes encode population using a square-root scale, and the rendering uses React with SVG elements. The city data is loaded from a CSV file, and state boundaries and interiors are generated using topojson’s feature and mesh functions.

Dec 3, 2022

Loading thumbnail…

Fork of map of epa data sites

This visualization displays EPA air quality monitoring sites across the contiguous United States, with each site represented by a circle positioned according to its recorded latitude and longitude. The map overlays these data points on a geographic outline of US states, rendered using the `geoAlbersUsa` projection and `geoPath` from d3-geo, with state boundaries and interior borders drawn from TopoJSON data. Circle positions are projected through the same geo projection, and while the code includes a `scaleSqrt` for sizing by AQI values, the rendered circles use a fixed radius of 5 pixels. The visualization is built with React and d3.v5, loading CSV data via d3-fetch and US state geometries from the us-atlas TopoJSON file.

Dec 3, 2022