Selena Ding

@SelenaDing0312·10 public vizzes

Map of Frequent Arrival Delay State

This map shows the relative frequency of airline arrival delays across U.S. states, with each state filled in teal and circles positioned at airports affected by delays. The visualization uses a React front end with D3 v5's `geoAlbersUsa` projection and `geoPath` to render state boundaries from a TopoJSON US Atlas, while bubble sizes are scaled using `scaleSqrt`. Delay data is loaded as CSV via D3's `csv` function and mapped to latitude and longitude coordinates. Hovering highlights state shapes, and circles maintain semi-transparent blue fills.

Dec 15, 2022

Loading thumbnail…

Untitled

This choropleth displays the 50 U.S. states with land areas filled in green and white state borders, highlighting a state in orange on hover. It uses React and D3 v5’s `geoPath` with the `geoAlbersUsaTerritories` projection to render geographic features as SVG, pulled from TopoJSON data in the US Atlas (`states-10m.json`). The `feature` and `mesh` functions from TopoJSON extract land polygons and interior boundaries, which are styled via CSS.

Dec 15, 2022

Loading thumbnail…

Fork of map of epa data sites

This map shows the locations of EPA data sites across the United States, with each site represented by a small circle. The visualization displays state boundaries and interior borders using `d3.geoAlbersUsa` projection and `d3.geoPath` from the d3 v5 library, while React manages the component rendering. Data is loaded from a CSV file via `d3.csv`, and the map is rendered as SVG within a React application. The current implementation uses a fixed radius of 5 for all circles, though a square-root scale is prepared for size encoding.

Dec 15, 2022

Loading thumbnail…

State Graph

This example displays a choropleth-style map of the United States, with each state rendered as a light gray polygon and white borders separating them. It loads the US TopoJSON data from `us-10m.v1.json` and uses `d3.geoPath` to project the state features. The code applies a scale transform to the SVG to adjust the map’s size and vertical position. The visualization uses D3 v4 and TopoJSON v2, with the map drawn as SVG paths.

Dec 15, 2022

Loading thumbnail…

This is your title

This interactive visualization presents a blank, template-based web page styled with CSS for a scrollytelling narrative, using a light or dark theme toggle. Built with React and HTML/CSS, the example demonstrates responsive layout techniques with flexbox for chart rows and media queries for mobile, though it contains no actual data or chart graphics. The code primarily showcases typography, spacing, and section structure for a story-like presentation, with font imports for Open Sans and Lora.

Dec 14, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a simple webpage that shows the text “Hello HTML!” centered on the screen, styled with a large font size. It is a minimal demonstration of combining HTML, CSS, and JavaScript, and it loads the D3.js version 3 library along with TopoJSON, though neither library is actually used in the visible code. The page relies on basic DOM elements and CSS to render the message, with no data visualization or interactive behavior present.

Dec 14, 2022

Loading thumbnail…

Fork of USA Country Map

This fork of the USA Country Map displays the 50 states with a green fill and white borders, highlighting states in orange on hover. It uses the geo-albers-usa-territories projection with d3.geoPath to render geographic boundaries from the us-atlas TopoJSON dataset. React manages the component state, while D3 and TopoJSON handle data loading and conversion via the feature and mesh functions. The map is drawn as an SVG with the states-10m.json source.

Dec 14, 2022

Loading thumbnail…

Fork of AQI Data in America in 2021 with Histogram and Brushing

This visualization combines a bubble map of 2021 Air Quality Index (AQI) data across the United States with an interactive date histogram, linked through brushing. The map projects data points using `d3.geoAlbersUsa` and `d3.geoPath`, with circle colors mapped via `d3.scaleQuantile` to a scale of AQI ranges. The histogram aggregates data by month with `d3.histogram` and `d3.scaleTime`, displaying mean AQI values. Users can brush a time range (via `d3.brushX`), which filters the map to show only the selected period using React state and `d3.csv`-loaded US EPA data.

Dec 14, 2022

Loading thumbnail…

Fork of AQI Data in America in 2021 with Histogram and Brushing

This interactive map of U.S. Air Quality Index (AQI) data for 2021 uses a d3.geoAlbersUsa projection with d3.geoPath to render state boundaries, while a quantitative color scale encodes AQI values at each monitoring site. A linked d3.brushX histogram below the map shows monthly mean AQI, and brushing a time range filters the map’s bubbles to show only data from that period. The visualization is built with React, uses d3.scaleQuantile for color mapping, and d3.histogram for binning, with data loaded via d3.csv from a GitHub source.

Dec 14, 2022

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard presents NYC crime data through a coordinated set of SVG views: a map, a pie chart, and bar charts. Users can click the reset button to restore the initial state. The visualization is built with React and D3 v6, using d3.geoMercator and d3.geoPath for the map, d3.arc for the pie, and d3.scaleBand and d3.scaleLinear for the bar charts, with animations and a tooltip for details.

Dec 14, 2022