Lawrence Liu

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

Apr 18, 2022

Interactive Scatterplot

This interactive scatterplot visualizes the classic Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Two dropdown menus dynamically change which attribute is plotted on the x and y axes, while a color legend distinguishes species and supports hover filtering to fade unrelated points. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders all marks as SVG circles with native tooltips.

Apr 13, 2022

Fork of Smiley Face Part II

This example shows a pet selector using a dropdown menu with options like Goldfish, Dog, Cat, Hamster, Parrot, and Spider. The selected value is managed through React's `useState` hook, displayed in the console. The `Dropdown` component receives options and state setters as props, rendering a `<select>` element that updates the state on change. The code combines React 16.9 with D3 v7, specifically using the `range` function from D3, though no data visualization is rendered beyond the interactive dropdown interface.

World Map

This world map visualization renders global landmasses and country borders using the Natural Earth projection. The code draws graticules, a sphere outline, land polygons, and interior boundaries as SVG paths via `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. It loads geographic data from the world-atlas TopoJSON source, converting it with `feature` and `mesh`. The React component manages data fetching through a custom hook, while styled fills and strokes distinguish land, interiors, and grid lines.

Fork of Working with time

This fork of "Working with time" displays a temperature-over-time scatterplot for a week in San Francisco, with daily timestamps on the x-axis and temperature on the y-axis. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveNatural for the trend path, and d3.csv for data loading. Axis components from d3.axis are manually recreated as functional React components, while circles with title tooltips highlight each data point.

Working with time

This example visualizes temperature over time using an SVG scatterplot, where each circle marks a temperature reading at a specific timestamp. The x-axis uses a time scale to map dates, while the y-axis linearly maps temperature values. The chart includes labeled axes, tick marks, and a tooltip that displays the full date on hover. It is built with React and D3 v5, leveraging `scaleTime`, `scaleLinear`, and `extent` to compute scales, with data loaded from a CSV file containing weekly San Francisco temperature records.

Stylized Scatterplot

A scatterplot of the iris dataset maps petal length against sepal width. The SVG rendering uses React components for axes and marks, with D3 v5 scales (scaleLinear) and extent for domain computation. Axes are drawn manually via tick generation, and circles include title tooltips formatted with d3.format. The Poppins font and muted color palette create a stylized appearance.

Apr 11, 2022

Rendering data with React and D3

This example visualizes a dataset of CSS named colors as a pie chart, where each slice is a color from the CSV file. The visualization is rendered as an SVG using React for state management and UI, while D3 utilities handle the data loading and shape generation. Specifically, the code uses `d3.csv` to fetch the data, `d3.arc` to define the pie's geometry, and `d3.pie` to compute the slice positions, with React's `useState` and `useEffect` managing the asynchronous data flow.

Apr 11, 2022

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3 v5, displaying summary statistics about the dataset in a large HTML `<pre>` element. The visualization shows the file size in kilobytes, the number of rows, and the number of columns from a CSV file containing CSS named colors. The code uses `d3.csv` to fetch and parse the remote CSV URL, then `d3.csvFormat` to calculate the data’s size. The resulting text output updates the page via the Document Object Model’s `textContent` property.

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL, specifically a dataset of CSS named colors. The code uses the Fetch API within an asynchronous function to retrieve the text content from the gist URL, then logs the raw CSV text to the browser console. Built with D3 v5 and the React framework, the visualization itself is not rendered; instead, it focuses on the data-loading step. The program explicitly handles the asynchronous fetch using a Promise chain with the `.then()` method after converting the response to text.

Fork of Let's Make a Face Part I

This example shows a simple, static SVG smiley face composed of three circles: a yellow head with a black border and two black eyes. It is a React-based fork of a tutorial, with the ReactDOM render call displaying a placeholder “Hello JSX” heading. The SVG markup is embedded directly in the HTML, using explicit `cx`, `cy`, `r`, and `stroke-width` attributes to position and style the shapes, while the `index.js` file sets up the React application with `react` and `react-dom`.

Smiley Face Part 1

A single yellow circle with a black outline spans the full canvas, and two smaller black circles are positioned inside it as eyes. Rendered as a static SVG via the `index.html` markup, the piece uses explicit `circle` elements with attributes for center coordinates, radius, fill, and stroke. The example is drawn directly in the code without external data, and its title indicates this is the first step toward constructing a complete smiley face.