Yee Han

Ep. 24 | Stylized Bar Chart

This stylized bar chart displays the top 10 countries by projected 2020 population from the United Nations World Population Prospects 2019 dataset. Horizontal bars, rendered as SVG rectangles via React components, encode population values on a linear scale with a band scale for country names. D3’s `scaleLinear`, `scaleBand`, `max`, and `format` utilities handle scales and axis tick formatting, converting gigabytes to billions. The code also uses `csv` for data loading, custom `AxisBottom` and `AxisLeft` components, and a `Marks` component with `<title>` tooltips.

Aug 13, 2021

Ep. 26+27 | Working with Time

A time series scatter plot of San Francisco weekly temperature data from the Data Canvas Sense Your City dataset, rendered as an SVG via React components. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map timestamps and temperatures, with a natural curve connecting points via `d3.line` and `curveNatural`. Axis ticks are formatted with `timeFormat('%a')` for weekday labels, and hovering over circles reveals tooltips via SVG `<title>` elements. The code integrates reusable axis and mark components while fetching data with `d3.csv`.

May 29, 2021

Smiley Face | Tweak your face | Yee Han

Six randomized smiley faces render in an SVG canvas with React, each composed of nested components for the face, eyes, and mouth. The face uses a colored circle with fixed stroke width, while the mouth is drawn with d3’s `arc` generator using randomized radii. Eyes are positioned via offset coordinates and randomized eye radius. All faces share the same center point, creating overlapping circles with varied fills and mouth widths, demonstrating reusable component composition and d3 arc creation within a React rendering pipeline.

Jan 30, 2021

Ep. 41 - Multiple Views

This visualization combines a bubble map and a histogram to show the total count of dead and missing migrants over time and location. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw the world atlas, with circle areas scaled by `d3.scaleSqrt`. The histogram bins reported dates into monthly intervals using `d3.histogram` and `d3.timeMonths`, summing deaths per bin. Both views use React with D3 v6, rendering SVG from the Missing Migrants Global 2019 subset dataset.

Jan 4, 2021

Ep. 38 | Working with Time

This visualization shows the total dead and missing migrants over time as a histogram, where each bar aggregates the total for a month. The chart uses a scatter plot dataset sourced from Data Canvas Sense Your City, displayed as SVG in React. It employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `timeMonths`, `histogram`, and `extent` to bin the dates into monthly intervals. The y-axis sums the casualties per bin via `sum`, with tooltips on each bar. Axes are custom drawn using React components.

Jan 4, 2021

Ep. 40 - Missing Migrants on a Map

This visualization displays the global distribution of missing migrants, with circles sized according to the square-root-scaled count of total dead and missing individuals. A world map serves as the backdrop, rendered using D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw landmasses and graticules. The interactive React application loads geographic data via `topojson` and migrant data from a CSV file (Data Canvas Sense Your City Dataset), plotting each incident as a semi-transparent circle positioned by its location coordinates.

Jan 4, 2021

Ep. 35 | Interactive Color Legend

A scatter plot of the Iris dataset, sized 960 by 500 pixels, displays petal length against sepal width with points colored by species. An interactive ordinal color legend on the right uses React state to track hovered species, dimming non-matching circles to 20% opacity and highlighting only the selected species. Built with React and D3 v6 (scaleLinear, scaleOrdinal, extent), the SVG renders axes, a native `<title>` tooltip, and three color-coded species groups loaded via d3.csv.

Dec 31, 2020

Ep. 34 | Scatter Plot with Color Legend

This scatter plot visualizes the classic Iris dataset, plotting petal length against sepal width for three iris species. Each flower is represented by a colored circle, with species differentiated through an ordinal color scale and a dedicated legend. The visualization is built with React and D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles for marks. The data is loaded asynchronously via `csv` from a GitHub gist, with axis components and a color legend created as reusable React components.

Ep. 33 | Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species. Each circle is colored via a D3 ordinal scale that maps species to a categorical color palette, with the species name accessible through a native SVG title tooltip. React components render the axes and marks, while d3.scaleLinear handles position scaling and d3.format formats the tick labels. The CSV data is loaded asynchronously using the d3.csv method within a React hook.

Ep. 33 | Scatter Plot with Color

This example visualizes the classic Iris Dataset as an interactive scatter plot, letting users select which flower measurements to plot on the X and Y axes from dropdown menus. The chart renders each data point as a circle colored teal using SVG, with axes labeled and formatted via d3.scaleLinear, d3.extent, and d3.format. React manages the UI state, while D3’s csv loader fetches and parses the data. The code also includes a tooltip showing the X value on hover via SVG title elements.

Ep. 32 | Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for different flower species. Two dropdown menus, built with React and react-dropdown, allow users to select which attribute appears on the x and y axes. The chart uses d3.scaleLinear for both scales, with Axes and Marks components rendering SVG circles containing tooltips. Data is loaded asynchronously via d3.csv in a custom useData hook, with styled axes and labels using the Poppins font.

Ep. 31 | Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, letting users explore relationships between sepal and petal measurements across flower species. Two dropdown menus, built with React state management, dynamically select which attribute appears on each axis, updating the scatter plot and axis labels in real time. The visualization uses D3 v6 scales and SVG rendering for the circles, with custom React components for the axes and marks. Data is loaded asynchronously via D3’s `csv` function, and each point includes a native SVG `<title>` tooltip displaying its x-value.

Ep. 30 | Menus with React

This interactive example demonstrates a pet-selection menu built with React. It shows a dropdown list of six animal options (dog, cat, hamster, parrot, spider, goldfish), where the currently selected value is highlighted in the interface and logged to the console. The app uses the `useState` hook from React to manage the selected value, and the custom `Dropdown` component renders a native HTML `<select>` element, mapping over the options array to produce `<option>` tags. ReactDOM renders the entire `App` component into the `#root` div, with small inline CSS styling for large label and select fonts.

Ep. 30 React Starter

This example demonstrates a minimal React application that renders the text “Hello React” onto a web page. The code imports React and ReactDOM, defines an `App` component that returns a simple `div` element, and mounts it to the `#root` element in the HTML document. It uses the `ReactDOM.render` method to display the component, with the page loading React and ReactDOM from unpkg CDN scripts. The example serves as a basic starter template for building interactive visualizations with the React framework.

Ep. 29 - World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with interior borders and a graticule overlay. It uses React with D3 v6, specifically `geoNaturalEarth1` for projection and `geoPath` for drawing SVG paths. The map data comes from the world-atlas TopoJSON dataset, processed with topojson’s `feature` and `mesh` functions to extract land polygons and country boundaries. The visualization is styled with a soft gray sphere background and contrasting land and graticule strokes.

Ep. 22 | The Margin Convention

This example demonstrates a bar chart ranking the ten most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization renders as SVG rectangles, where each bar’s length encodes population via `d3.scaleLinear` and its vertical position uses `d3.scaleBand`. React manages the component state and lifecycle, while D3’s `csv` loader fetches and parses the dataset. The chart applies the margin convention by translating a group element to offset the plotting area, with margins defined as a fixed object.

Ep. 22 | Axes with React & D3

This example shows a horizontal bar chart of the top ten countries by 2020 population, with axes drawn manually using React components and D3 scale functions. The chart loads United Nations World Population Prospects 2019 data via `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Ticks for both axes are rendered as SVG elements, with x-axis tick marks generated by calling `xScale.ticks()`, while bars are positioned and sized through the same scales.

Ep. 23 | Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 countries by population from the United Nations World Population Prospects 2019 dataset. Rendered as SVG using React components, the chart uses d3.scaleBand and d3.scaleLinear for positioning, with custom AxisBottom, AxisLeft, and Marks components. The code demonstrates a refactored pattern where D3 is used for scales and data processing while React handles the DOM rendering, with d3.csv loading the data asynchronously via a useData hook.

Ep. 21-22 | Pathetic Bar Chart

The example displays a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG rectangles. It uses React with hooks to fetch and store the data, while D3’s `scaleBand` and `scaleLinear` map country names to y-positions and population values to bar widths. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via D3’s `csv` method. A loading state is shown until the asynchronous fetch completes.

Ep. 25 | Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width for individual flowers. The code uses React with D3 v6 to render an SVG, employing `scaleLinear` for both axes, `extent` to set domains, and `csv` for data loading. Axes are custom components using the `tick` class, and marks are circles with native SVG `<title>` tooltips. The styling uses the Poppins font, teal circles, and a minimal gray axis design, resulting in a clean, modern presentation.

Ep. 20 - D3.pie() & D3.arc()

This example shows a full-screen radial burst of colored wedges, each representing a named CSS color from a CSV dataset loaded via D3’s `csv` utility. Using React with hooks, the code fetches the data once with `useEffect`, then renders each row as an SVG path generated by `d3.pie()` and `d3.arc()`. Every arc is filled with its corresponding CSS color hex value, creating a complete circular chart that highlights the variety of named colors.

Ep. 20 - Rendering Data with React

This example loads a dataset of CSS named colors from a GitHub Gist and renders each color as a horizontal stripe. A React app fetches the CSV data using the `d3.csv` utility, then maps over the rows to create a series of `div` elements, each with a background color from the `d3['RGB hex value']` field. The visualization shows the full spectrum of CSS color names, stacked to form a tall color swatch, with a simple loading state displayed before the data arrives. React state and hooks (`useState`, `useEffect`) manage the asynchronous data fetch and rendering.

Ep. 16 - Loading Data with React & D3

This example demonstrates loading CSS named color data from a remote CSV file using D3’s `csv` utility, with React’s `useState` and `useEffect` hooks managing the asynchronous fetch and component state. The resulting view renders a plain-text summary of the dataset size—calculating kilobytes, row count, and column count using `d3.csvFormat`—inside a large `<pre>` element. While the data loads, the React component displays a "Loading..." message. The visualization uses React 16.9, D3 v6, and relies on a gist-hosted CSV as its sole data source.

Ep 13+15 : Loading and Parsing CSV Data

This example displays summary statistics for the CSS named colors dataset, which it loads from a remote CSV URL. It uses `d3.csv` to fetch and parse the data, then outputs the formatted size in kilobytes, row count, and column count into the page. The visualization demonstrates the basic workflow of reading external tabular data with D3 v6 and presenting simple text-based feedback.

Line Chart of Temperature

This line chart visualizes weekly temperature data for San Francisco, showing the trend of temperature values over time. The chart uses a single line mark with a fixed size and opacity, encoding time on the x-axis and quantitative temperature on the y-axis, both with zero scale suppression. Built with the Vega-Lite API, the visualization leverages D3’s `csv` function to load data from a GitHub gist and renders interactively with tooltips via `vega-tooltip`. The appearance is customized through a config object that removes axis domains and adjusts font colors and sizes for readability.

Circle for religion vs. country

This example shows the distribution of major religions across countries using circle marks sized by population. The x-axis sorts countries by total population, while the y-axis lists religious affiliations, with tooltips revealing the specific religion for each circle. Data comes from a CSV file loaded via `d3.csv` and is rendered using the Vega-Lite API’s `markCircle` method, with quantitative encoding for population and nominal fields for country and religion. Styling is customized through a config object, and the visualization auto-fits the browser window.

Stacked Bars

This example displays a stacked bar chart of population by country and religion, with countries sorted by total population and each bar segmented by religious affiliation. The visualization is constructed using the Vega-Lite API, with the `vl.markBar()` method encoding the x-axis as country, y-axis as quantitative population values, and color as religion category. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered with SVG using Vega-Lite’s declarative specification, enhanced by a custom config for axis styling and tooltip support through Vega Tooltip.

Scatter Plot with Menus

This scatter plot visualizes the relationship between vehicle weight and horsepower, colored by origin and sized by weight, based on the auto-mpg dataset loaded via `d3.csv`. The visualization uses vega-lite-api to construct the specification, with vega-lite and vega handling rendering to SVG. Interactive tooltips display car names using vega-tooltip’s `Handler`, while the `config.js` customizes axis and label styling. The plot fills the window with a fit autosize, and the code registers the tooltip handler during initialization.

Largest 5 Countries

This visualization shows the five most populous countries each year, using a bar chart that sorts countries by population descending and displays the population values for each. The data is loaded from a CSV file containing population by country and year, which is fetched using the `d3.csv` function. The visualization is built using the `vega-lite-api` library, with the chart specification defined in `viz.js` using the `vl.markBar()` and `vl.encode()` methods. The rendering is handled by `vega` and `vega-lite`, with interactive tooltips enabled through `vega-tooltip`.

Mouse Follower

A circle follows the user's mouse cursor across an SVG canvas. The visualization uses React's `useState` and `useCallback` hooks to track the latest mouse coordinates and render a circle at that position. The circle's center updates on every mouse movement event, creating a direct and immediate visual response. The example is built with React 16.9.0 and ReactDOM to manage the SVG rendering and state updates.

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, with the body styled using CSS to set the font size to 13em. A JavaScript script runs in the browser, logging “Hello JavaScript!” to the Chrome developer console. The code demonstrates the foundational structure of an HTML document, combining inline CSS styling with a script tag for basic interactivity. It uses no external libraries, relying solely on native HTML, CSS, and JavaScript APIs.

Smiley Face Part IV - VI | Yee Han

A grid of randomly generated smiley faces demonstrates how React components and D3 utilities can be composed for data-driven SVG rendering. Each face is a distinct combination of prop values—stroke width, eye offset and radius, and mouth width and radius—drawn using React functional components with JSX. The code uses `d3.arc` to generate the mouth path, while `d3.range` creates the 18 faces. The faces are rendered inside an SVG container via a `FaceContainer` component that applies a translation transform, showing the interplay between React’s declarative structure and D3’s geometric functions.