laurajchang

@laurajchang·14 public vizzes

Missing Migrants Map

This interactive visualization displays missing migrant incidents worldwide as a choropleth bubble map, with circle size representing total dead and missing individuals. Users can select from six map projections via a dropdown menu, including Aitoff, August, and Orthographic. A linked time-series histogram below enables date range brushing, filtering the map’s displayed bubbles. Built with React and D3 v6, it uses d3.geoPath for geographic rendering, d3.bin for temporal aggregation, and d3.brushX for interactive filtering, sourcing data from the Missing Migrants Dataset and world boundaries from World Atlas TopoJSON.

Apr 28, 2021

Loading thumbnail…

Stylized Line Plot

This example visualizes daily temperature variations in San Francisco using D3.js and React. The line plot shows temperature trends over time, with semi-transparent circular markers highlighting individual data points and tooltips displaying dates on hover. The visualization implements the D3 margin convention, using `scaleTime` and `scaleLinear` for axes, `line` with `curveNatural` for the smooth path, and React components for rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub gist, with the chart styled using Montserrat font and custom axis colors.

Apr 24, 2021

Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to switch between different sepal and petal measurements on the x and y axes using two dropdown menus. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and SVG circles rendered via React components. Hovering over a species in the color legend fades non-matching points using React state, while the MarksWithFade component manages mouse events to provide interactive feedback.

Apr 15, 2021

Loading thumbnail…

Fork of Missing Migrants Map

This interactive map displays the Missing Migrants dataset, with circles sized by total deaths and missing persons, overlaid on world land and graticule boundaries. A brushable histogram below filters the map by date, while a dropdown menu switches between six geographic projections using d3-geo-projection. The visualization uses React, d3.geoPath, scaleSqrt, and brushX to render SVGs from World Atlas TopoJSON and CSV data.

Apr 13, 2021

Loading thumbnail…

Missing Migrants

This histogram displays the total number of dead and missing migrants per month from the Missing Migrants Dataset, with the x-axis showing reported dates and the y-axis showing the monthly death toll. The code uses React to render SVG elements and D3 v6 APIs including `scaleTime`, `scaleLinear`, `bin`, and `timeMonths` to aggregate the raw CSV data into monthly bins and draw the bars with axes and hover tooltips.

Mar 30, 2021

Loading thumbnail…

World Map II

A world map displays country boundaries and graticules from World Atlas TopoJSON, with city populations from Simplemaps overlaid as scaled circles. A dropdown menu switches between six geographic projections. The visualization uses React with d3.geoPath for rendering geographic features, d3.scaleSqrt for circle sizing, and d3-geo-projection functions like geoEqualEarth and geoOrthographic. SVG renders the map, with the sphere, landmasses, interiors, and graticules drawn as separate path elements.

Mar 29, 2021

Loading thumbnail…

Making a Bar Chart with React & D3 (Refactored)

This example shows a horizontal bar chart of the ten most populous countries in 2020, using population data loaded from a CSV via `d3.csv`. React components render the SVG elements, while D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and the `d3.max` function handle data mapping. The chart applies the D3 margin convention, with axes built as React components and tick formatting using `d3.format`.

Mar 26, 2021

Loading thumbnail…

World Map

This interactive world map visualizes geographic landmasses and interior boundaries using a variety of map projections. Users choose from six projections via a dropdown menu, including Equal Earth, Aitoff, and Orthographic. The visualization loads world-atlas GeoJSON data, and renders the sphere, graticules, and land paths using D3’s `geoPath` and `geoGraticule`. React manages the UI state and rendering, while the `topojson` library processes the topology for interior borders.

Mar 18, 2021

Loading thumbnail…

Making a Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, mapping sepal length and width for individual flowers. It demonstrates a modular approach to combining React and D3, where D3's `scaleLinear` and `extent` APIs handle the data scaling and domain calculation, while React components render the SVG elements. The axes are custom-built using D3's tick generation, and the plot includes interactive tooltips via SVG `<title>` elements and labels for both axes.

Mar 15, 2021

Loading thumbnail…

Rendering Data with React & D3

The example visualizes CSS named colors as a radial burst, with each color represented as a slice in a pie chart. It loads color data from a CSV file using `d3.csv` and renders the SVG using React components. The `d3.pie` and `d3.arc` functions compute the slice angles and paths, while React’s `useState` and `useEffect` hooks manage the asynchronous data loading. The chart displays 148 color swatches arranged around a central point, using each row’s RGB hex value as the fill color.

Mar 9, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a dataset of CSS named colors using React state and D3. The app fetches CSV data via `d3.csv` and stores it with the `useState` hook, displaying a loading message until the data arrives. Once loaded, `d3.csvFormat` calculates the file size in kilobytes, while the code reports the total row and column counts. Rendered as SVG, the visualization uses React’s `useEffect` to trigger the asynchronous data fetch, showcasing a simple integration between React’s component lifecycle and D3’s data-loading utilities.

Mar 5, 2021

Loading thumbnail…

Mouse follower

A yellow-outlined circle follows the mouse cursor across a full-window SVG canvas. Built with React 16.9, the app tracks pointer movement via the `onMouseMove` event, updating React state with the cursor's `clientX` and `clientY` coordinates, then re-renders the circle at that position.

Mar 2, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v6. It fetches a remote CSS named colors dataset and displays the file size, row count, and column count in large text. The code uses `d3.csv` to retrieve and parse the data, then accesses `d3.csvFormat` to calculate the byte size and reads `data.length` and `data.columns.length` for the record metrics. The output is rendered into a `<pre>` element via `document.getElementById`.

Mar 1, 2021

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered as React components, each with randomized eye radius, mouth width, and mouth radius. The faces use a radial gradient from yellow to orange and are drawn as SVG circles and arcs. The code leverages d3’s `arc` generator to shape the mouth, while React handles the component composition and rendering. Each face is positioned via a shared container that translates the SVG group, with stroke widths and offsets fixed across all instances.

Mar 1, 2021