W

Whitney Hung

@ilovedc74·27 public vizzes

Loading thumbnail…

Arcs and Lines practice

This example visualizes country ruling party timelines using a React and D3 v5 stack. It fetches a CSV dataset and renders two horizontal lines representing different timeline tracks, with a gray sub-line and a black main line. The code leverages D3’s `csv`, `scaleLinear`, `arc`, and `line` utilities, though the current implementation focuses on line elements and an arc path. The SVG output is managed through React’s `useState` and `ReactDOM.render`, displaying loading states until data is fetched. The project demonstrates basic data loading and geometric shape composition within a React component structure.

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles, sized proportionally to population using a square root scale. The visualization renders geographic context—landmasses, country interiors, graticules, and a sphere—using d3.geoNaturalEarth1 and d3.geoPath, with city data loaded via d3.csv from the Simplemaps World Cities Database and country boundaries from TopoJSON. React manages the component state, while d3-scale and d3-geo handle projection and sizing.

Loading thumbnail…

Loading and Parsing CSV Data exercise - Dataviz 2020 course 13 & 15

This example demonstrates how to load and parse a CSV file using D3 v5 and the Fetch API, displaying the dataset’s basic metrics—row count, column count, and file size—in a large text block. It fetches the raw CSV from a GitHub Gist, parses it with `d3.csvParse`, and writes the results to the page. The code includes alternative commented approaches using `d3.csv` and async/await, highlighting the parsing logic. The data originates from a manually cleaned Wikipedia table on fish as food, covering edible fish categories by texture and flavor.

Loading thumbnail…

Mouse follower, a circle

A circle follows the mouse cursor across a full-screen SVG canvas, with its position updating live in response to pointer movement. The visualization demonstrates interactive React state management, where the initial mouse position is set to the center of the window. Using React's `useState` hook and an SVG `onMouseMove` event handler, the component captures `clientX` and `clientY` coordinates from the event to update the circle's `cx` and `cy` attributes. The code relies on React 16.9 and ReactDOM to render the circle element.

Loading thumbnail…

Test

A smiling face built with React and D3.js renders inside an SVG, composed of independently defined components for the background circle, eyes, cheeks, and a mouth drawn with the d3.arc() API. The face uses a radial gradient for the cheeks, and fixed props define geometry like eye offset, radius, and stroke width. The React component hierarchy passes data-driven values down to each visual element, producing a static, scalable vector graphic.

Loading thumbnail…

Loading and parsing data from csv files

This example demonstrates how to load and parse a CSV file in the browser using the Fetch API. It fetches a raw CSV file containing CSS named colors from a GitHub gist and logs the text content to the console. The code defines an asynchronous helper function, `fetchtext`, that uses `fetch` and `response.text()` to retrieve the data, and it also includes an alternative promise-based fetch call. No visualization is rendered; the focus is purely on the data-loading workflow.

Loading thumbnail…

Test

A grid of procedurally generated smiley faces, each rendered as an SVG composed of reusable React components. The faces vary in eye size, cheek position, and mouth radius through randomized parameters. Built with React and D3, the visualization uses `d3.arc` for the mouth path and SVG primitives for facial features, all arranged within a transformed coordinate system.

Loading thumbnail…

Let's make a face with HTML, SVG, React

A static SVG face is drawn with yellow circular head and two black eyes, using React to render the markup. The example demonstrates how React components can output SVG elements directly, with hardcoded coordinates and dimensions for the face features. The code imports React and ReactDOM, while the HTML file loads React and ReactDOM from unpkg CDN. This is a minimal illustration of combining React's declarative UI approach with SVG's vector graphics capabilities, though no interactive behavior or data binding is shown.

Loading thumbnail…

About fruits

Five apples render in an SVG bowl, then update through timed data joins: one apple disappears, another becomes a lemon, and a third is removed. The fruit bowl chart uses d3-selection’s `enter` and `merge` methods to bind fruit objects to groups containing circles and text labels. `d3.scaleOrdinal` maps fruit types to colors and radii, with the code drawing from d3.v5.

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON. It shows the entire globe as a blue sphere with light green countries, using the `geoEqualEarth` projection and `geoPath` to generate SVG paths. The map draws country boundaries from the `world-atlas` dataset loaded via `json()`, demonstrating a simple choropleth-style base map with subtle stroke effects.

Loading thumbnail…

Bowl of fruit - hover to select

Five apples in a bowl render as SVG circles whose size and color map to fruit type via `d3.scaleOrdinal`. Hovering over a fruit calls the `setSelectedFruit` prop, redrawing the selection with a black stroke. Using D3 v5 data joins and `transition`, the visualization animates changes over time—removing fruit, replacing an apple with a lemon, and deleting another—while text labels update via `.merge()` on enter/update selections.

Loading thumbnail…

Bowl of fruit - click to select

Five pieces of fruit sit in a bowl, rendered as SVG circles with varying radii and colors via d3.scaleOrdinal. Clicking a fruit selects it, highlighting the chosen item with a black stroke. D3's data join and transition system animate the fruits' positions and sizes as apples are removed, replaced by a lemon, or filtered over time.

Loading thumbnail…

About fruits

Five apples are arranged in an SVG bowl, then one is removed, one is replaced by a lemon, and another is removed in sequence. Animated transitions move each fruit horizontally and resize it according to its type using `d3.scaleOrdinal` color and radius scales. The `fruitBowl` function handles data joins with `.enter()`, `.merge()`, and `.exit()`, using d3's `.transition()` for morphing.

Loading thumbnail…

About fruits

This example shows how a data join animates changes to a fruit bowl. Five apples are initially rendered as circles, then one is removed, another transforms into a lemon, and a third is eaten, all with smooth transitions. Using D3's `select`, `range`, and `scaleOrdinal`, the `fruitBowl` function manages circle enter, update, and exit states via `.transition().duration(1000)`, animating radius and position. The SVG output is updated dynamically as JavaScript timeouts trigger the re-rendering.

Loading thumbnail…

World Projected Population Area Chart

This chart shows the projected population of the United Kingdom from 1950 to 2100 as a smooth area plot. The data is filtered from a UN World Population Prospects CSV file, with population values converted from thousands to raw numbers. Using D3 v5, the visualization employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the filled path, and `axisLeft`/`axisBottom` with gridlines. The SVG rendering includes a title, axis labels, and formatted tick values.

Loading thumbnail…

A week of temperature in SF

This visualization shows a week of temperature data in San Francisco, with a smooth area chart tracking temperature changes over time. The SVG rendering uses D3 v5 scales (`scaleTime`, `scaleLinear`) and axes (`axisLeft`, `axisBottom`) with gridlines. An area generator with `curveBasis` creates the filled curve, while the data loads from an external CSV file. The chart includes custom axis labels and a title, styled via CSS classes.

Loading thumbnail…

A week of temperature in SF

This visualization displays a week of temperature readings in San Francisco, plotting temperature against time as a smooth curved line. The chart uses d3.scaleTime and d3.scaleLinear to map the data, with axes rendered via d3.axisLeft and d3.axisBottom. The line is generated with d3.line using a curveBasis interpolation, and the data is loaded from a CSV file using d3.csv. SVG is the rendering approach, with styled grid lines and axis labels.

Loading thumbnail…

A week of temperature in SF

This visualization displays a week of temperature readings in San Francisco, plotting temperature against time as a smooth curved line. The chart uses d3.scaleTime and d3.scaleLinear to map the data, with axes rendered via d3.axisLeft and d3.axisBottom. The line is generated with d3.line using a curveBasis interpolation, and the data is loaded from a CSV file using d3.csv. SVG is the rendering approach, with styled grid lines and axis labels.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a set of cars, with each circle representing a vehicle. The visualization uses D3.js v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render SVG axes with gridlines. Data is loaded from a CSV file via the `csv` function, parsed into numeric fields, and drawn as semi-transparent purple circles. The chart includes axis labels and a title, with margins calculated from the SVG’s dimensions.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The visualization uses D3 v5’s scaleLinear, axisLeft, and axisBottom to construct axes with grid lines, while the data is loaded via csv() and parsed into numeric values. Circles are rendered as SVG elements with a fixed radius, purple fill, and partial opacity, emphasizing data density in the lower-left region.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the world’s most populous countries, with each circle representing a country positioned along a linear population scale and a point scale for country names. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the axes and circles in SVG. Data is loaded from a CSV file and parsed with D3’s `csv` function, with population values formatted in billions via the `format` helper.

Loading thumbnail…

Customising Axes

This example demonstrates how to customize axes in a bar chart showing the top 17 most populous countries. The chart uses D3 v5 to load CSV data and render SVG rectangles, with a linear scale for population on the x-axis and a band scale for country names on the y-axis. The code customizes the axes by removing default domain and tick lines, formatting tick labels from millions to billions using `d3.format`, and adding custom axis titles with specific font sizes and colors via CSS classes. The x-axis ticks extend across the plot area for enhanced readability.

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population figures for the world’s most populous countries, using a CSV dataset where values are multiplied by 1,000. The chart uses an SVG container and D3 v5’s `scaleLinear` for the population axis, `scaleBand` for the country categories, and `axisLeft`/`axisBottom` to render tick marks. Rectangles are appended via a data join, with width mapped to population and height set to the band’s bandwidth.

Loading thumbnail…

Let's make a face with D3.js

This example builds a stylized smiling face from basic SVG shapes using D3.js v5. It draws a yellow head circle, two eyes, and a mouth path created with the `d3.arc` generator. The animation uses chained `transition().duration()`.attr calls to make the eyebrows move up and down, creating a simple facial expression. The code demonstrates SVG rendering with D3’s selection and attribute manipulation APIs.

Loading thumbnail…

Let's make a face with D3.js

This example builds a stylized smiling face from basic SVG shapes using D3.js v5. It draws a yellow head circle, two eyes, and a mouth path created with the `d3.arc` generator. The animation uses chained `transition().duration()`.attr calls to make the eyebrows move up and down, creating a simple facial expression. The code demonstrates SVG rendering with D3’s selection and attribute manipulation APIs.

Loading thumbnail…

HTML Cars Report

This example presents a minimal cars report using plain HTML and CSS, showing a static list of two identical 2014 Geely Rollup entries priced at $1500. The page structure relies on semantic HTML elements such as `<h1>` and `<ul>`, while styling is handled through a linked `styles.css` file that increases font size and applies monospace typography. One list item is visually distinct through the `highlighted` class, which colors its text red. The visualization demonstrates fundamental DOM styling without JavaScript or data-binding libraries, emphasizing basic document markup and CSS class-based presentation.

Loading thumbnail…

Cars Report

This example shows a simple dashboard that displays a list of cars under a price threshold, formatted as text lines. It uses React for the frontend, with the `getCars` function returning a promise that simulates a two-second network delay via `setTimeout`. The `generateReport` function filters car data and maps each entry to a string using `formatCar`. The result is rendered into a `<pre>` element, initially showing “Loading…” until the data arrives.