John Huang

@phenogit·21 public vizzes

Missing Migrants Multiple View with Brushing

This interactive visualization combines a global bubble map and a time-series histogram to explore missing migrant incidents. Users can brush over the histogram to filter the map, which displays circles sized by the total dead and missing count. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while the histogram employs d3.bin and d3.brushX for temporal aggregation and selection. Data comes from a CSV of missing migrants and world atlas TopoJSON, rendered with React and SVG.

Jun 22, 2021

Loading thumbnail…

Missing Migrants Multiple View

This visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances. The map uses a `geoNaturalEarth1` projection with `geoPath` and `geoGraticule` to render world landmasses, while circle radii are scaled by the square root of the total dead and missing via `scaleSqrt`. The histogram below aggregates the same data monthly using `bin` with `timeMonths` thresholds, and employs `scaleTime` and `scaleLinear` for axes. Data is loaded from a CSV using `d3.csv`, with world geometry from TopoJSON.

Jun 21, 2021

Loading thumbnail…

Missing Migrants

This histogram shows the total number of dead and missing migrants over time, with monthly bins displayed as rectangular bars. The visualization uses React to render an SVG chart, with D3 v6 handling data loading, time and linear scales, axis generation, and data binning. The dataset is loaded via d3.csv from a GitHub gist, and each bar includes a native SVG tooltip displaying the exact count. The chart applies a clean design with Poppins typography, teal bars, and labeled axes for time and casualty counts.

Jun 21, 2021

Loading thumbnail…

Missing Migrants on a Map

This visualization shows the locations of missing migrants on a world map, using a natural Earth projection to render landmasses and graticules. Each migrant incident is drawn as a semi-transparent circle, with its radius scaled proportionally to the total number of dead and missing via a square-root scale. The map is built with d3.geoPath for geographic features and d3.geoGraticule for the coordinate grid, while data is loaded from a CSV file using d3.csv. The entire SVG is assembled in React, with world atlas topology processed through the topojson library’s feature and mesh functions.

Jun 20, 2021

Loading thumbnail…

World Map with Cities

This visualization displays a world map with cities, where each city is represented by a circle scaled proportionally to its population. Using D3’s geoNaturalEarth1 projection and geoPath, the map renders landmasses, graticules, and country interiors from TopoJSON data, while city locations are projected from latitude and longitude coordinates. The React component employs the useWorldAtlas and useCities custom hooks to load data via d3.json and d3.csv, with d3.scaleSqrt mapping population to circle radius sizes.

Jun 19, 2021

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The chart uses D3 v6 scales and SVG rendering within a React framework, with dropdown menus to switch X and Y attributes. Hovering over the color legend highlights points of a selected species while fading others, using d3.scaleOrdinal for categorical coloring. The visualization includes axes with formatted tick labels, a color legend, and tooltips via SVG title elements.

Jun 19, 2021

Loading thumbnail…

Dynamic Axis Scatter Plot with Styles

An interactive scatter plot displays the Iris flower dataset, allowing users to dynamically select which numeric attributes appear on the x and y axes via dropdown menus. The visualization uses React for component management and D3 v6’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, rendering SVG circles as marks. Axis components generate ticks and labels dynamically, while the x-axis formats tick values using a `format('.2s')` function. User selections update the state, triggering re-renders of the axes and scatter points.

Jun 16, 2021

Loading thumbnail…

Dynamic Axis Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower attributes appear on the x- and y-axes via dropdown menus. The visualization displays four numeric measurements—sepal length, sepal width, petal length, and petal width—as individual data points rendered as SVG circles using React. Users can compare any combination of these attributes to explore correlations and patterns across the 150 flowers. The chart builds its axes dynamically using custom React components that call d3.scaleLinear and extent to compute scales from the loaded CSV data, with the visualization updating in real time as users change their selections.

Jun 14, 2021

Loading thumbnail…

React Select

This example demonstrates a simple pet selector interface using React. It shows a labeled dropdown menu offering six animal options (dog, cat, hamster, parrot, spider, goldfish), with the hamster preselected. The React component `Dropdown` renders the native HTML `<select>` element, managing its state through `useState` and updating the selection via an `onSelectedValueChange` callback. The visualization uses ReactDOM for rendering and imports D3 v6 for potential data manipulation, though no D3-specific functions are directly applied here.

Jun 11, 2021

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders static text, serving as a starter template for integrating React with D3. The code loads React, ReactDOM, and D3 v6 from a CDN, then uses ReactDOM.render to mount a simple component displaying “Hello React!”. It establishes the foundational structure of a D3-based React project without implementing any data visualization logic, making it a starting point for developers building charting applications.

Jun 9, 2021

Loading thumbnail…

World Map

This world map uses the Natural Earth projection from `d3.geoNaturalEarth1` to render landmasses, graticules, and country borders. The visualization displays geographic features in teal with thin interior boundary lines, all drawn as SVG paths via `d3.geoPath`. Data comes from the world-atlas TopoJSON dataset, processed with the `feature` and `mesh` functions from `topojson`. The React component loads the data asynchronously through a custom hook and renders a loading message until the map is ready.

Jun 9, 2021

Loading thumbnail…

Working with Time

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the horizontal axis and temperature on the vertical axis. The data is loaded from a CSV file using d3.csv, then rendered as an SVG through React components. The chart uses d3.scaleTime and d3.scaleLinear to map the timestamp and temperature values, while d3.line with curveNatural generates the curved path connecting the data points. Custom axis components and a simple tooltip via SVG title elements are included.

Jun 3, 2021

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between petal length and sepal width in the Iris flower dataset. The visualization loads CSV data from a GitHub gist using d3.csv, then maps each observation to a circle positioned by linear scales. The code builds axes as React components with SVG, using d3.scaleLinear to compute domains and ranges, and formats tick labels with d3.format. Tooltips appear on hover through SVG title elements.

May 31, 2021

Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, rendered as SVG using React components. It loads data from a CSV via `d3.csv` in a custom `useData` hook, then uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to abbreviate tick labels (e.g., converting "G" to "B"). The chart includes custom axis components and rect marks with built-in tooltips.

May 28, 2021

Loading thumbnail…

Rendering data with React

This example renders a color palette as a pie chart, with each slice representing a color from data loaded from a CSV file. The visualization uses React to manage the application state and render the SVG, while D3’s `pie` and `arc` functions compute the slice geometry and paths. The data is fetched asynchronously via `d3.csv` from a remote URL, and each slice’s fill is set from the CSV’s ‘RGB hex value’ column. The chart is centered by translating a group element to the middle of the SVG canvas.

May 20, 2021

Loading thumbnail…

Iterating Fast with Vega Lite API

This example demonstrates rapid iteration with the Vega-Lite API by rendering an area chart of San Francisco weekly temperatures. The visualization maps temperature values over time, displaying the data as a smooth, filled area graph. The code leverages the `vega-lite-api` to build the specification, with `vl.markArea()` and `vl.x().fieldT()`/`vl.y().fieldQ()` encoding the temporal and quantitative fields. It uses `vega` and `vega-lite` for rendering, `vega-tooltip` for interactivity, and `d3.csv` to load the dataset from the UCI Machine Learning Repository Auto MPG data source.

May 13, 2021

Loading thumbnail…

Loading Data in React

This example demonstrates how to load and display CSV data in a React application using D3. The app fetches data from a remote GitHub gist via `d3.csv`, then stores it in component state with React hooks (`useState` and `useEffect`). Once loaded, a custom `message` function summarizes the dataset by calculating its file size in kilobytes using `d3.csvFormat`, reporting the number of rows, and listing the column count. While the data downloads, the interface displays a simple “Loading” text placeholder.

May 12, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing CSV data with D3, displaying the file size, row count, and column count as large text. It uses the `d3.csv` method to fetch a remote CSV file from a GitHub Gist and parse it into a tabular data structure, then formats the output with `d3.csvFormat`. The resulting statistics are written to a DOM element with `textContent`.

May 12, 2021

Loading thumbnail…

Mouse Follower

A yellow smiley face, built from SVG circles and an arc, tracks the cursor across a full-screen canvas. The face renders with React components, including a d3.arc-generated mouth, while the center position updates via React state on mouse events. The app uses React's useCallback and useState hooks to manage the mouse coordinates, drawing the face inside a transparent SVG that spans the viewport.

May 11, 2021

Loading thumbnail…

Smiley Face React

This example shows a yellow smiley face built from modular React components, with circular eyes and an arc-based mouth positioned on a yellow background circle. The face is centered within an SVG canvas using a translated group, and each facial feature is defined as a separate React component. The code uses D3’s `arc` API to generate the mouth path, while React handles the component hierarchy and props for sizing and positioning. All rendering is SVG-based, with the face drawn from hardcoded dimensions passed as props.

May 7, 2021

Loading thumbnail…

Smiley Face Part 1

This example is a work-in-progress toward a smiley face, rendering a single yellow circle with a black outline and two smaller black circles as eyes on an SVG canvas. The drawing is currently hardcoded with fixed coordinates and radii, and the main React component simply displays a “Hello JSX” heading, leaving the visual elements commented out in the HTML. The code uses React and ReactDOM’s `render` method, and relies on the SVG primitives `circle`, `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` to define the shapes.

May 6, 2021