W

Wai Kit Tsang

@watsang·16 public vizzes

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport as a standalone SVG canvas. The visualization demonstrates a minimal setup where no data or marks are present, only a styled background shape. The code uses D3 v5 to select the SVG element, set its width and height to the document body’s client dimensions, and append a single `rect` with a 40-pixel corner radius. No axes, scales, or interactions are defined, making this a static, empty canvas.

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and region, with each node labeled by name. Built with D3 v5, it uses the `tree` layout and `linkHorizontal` generator to draw the branching structure, while `zoom` enables panning and scaling. The SVG renders text labels with font sizes decreasing by depth, and the data comes from a local JSON file. The layout positions nodes with `d.x` and `d.y` coordinates from the hierarchy layout.

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, rendered as SVG. It displays country boundaries and names from the world-atlas TopoJSON dataset using a Natural Earth projection, with the ocean filled blue and countries in green. The map supports pan and zoom through d3.zoom, which applies transform updates to the entire map group. Hovering highlights individual countries in red via CSS. The code uses d3.geoPath and d3.geoNaturalEarth1 for geographic projections and feature conversion from TopoJSON.

Loading thumbnail…

D3 update patterns

This example demonstrates how D3’s join pattern creates initial DOM elements using `selectAll` and `enter().append()`. The code builds an SVG with five red circles, each positioned horizontally by multiplying the index by 120 pixels, using D3’s `range` to generate fruit data objects. It explicitly shows the enter selection, binding an array of `{type: "apple"}` objects to circle elements. React imports are commented out, leaving D3 v5 as the active rendering engine, with circle radius and fill set as static attributes.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3, showing how data joins handle enter, update, and exit states for a bowl of fruit. It sequentially removes apples by popping the array, replaces an apple with a lemon, and filters a specific fruit. The code uses `d3.scaleOrdinal` for color and radius scales, `selection.merge()`, and `selection.exit().remove()` to manage transitions in SVG. Rendering occurs on a 960x500 SVG canvas with a fixed background rect.

Loading thumbnail…

HTML Starter

This example shows a simple HTML page displaying the text “Hello HTML” in large, centered type, with a corresponding “Hello JavaScript!” message logged to the browser’s developer console. The page uses a basic HTML `<style>` block to set the body’s text alignment and font size, and a plain `<script>` tag to call the `console.log` API. No external libraries or data sources are involved, making it a minimal starter template for testing browser rendering and JavaScript execution.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a car, with position determined by the linear scales built using `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for axes. The SVG rendering includes labeled axes and a title, styled via CSS. Data is loaded as CSV with `d3.csv` and parsed to numeric values before being rendered.

Loading thumbnail…

Making a scatterplot!

This example draws a yellow, smiling face with eyes, eyebrows, and a mouth inside an SVG canvas. The face is built from D3 primitives, starting with a circle for the head, separate circles for the eyes, rectangles for the brows, and paths created via the `d3.arc()` function for the mouth. The eyebrows use a chained `transition()` with a two-second duration to animate their position up and down, creating a subtle bouncing effect; the rest of the face remains static. The code relies on D3 v5 and SVG rendering, with the visual elements positioned using absolute coordinates relative to the SVG’s width and height.

Loading thumbnail…

Customizing axes!

This example shows a horizontal bar chart ranking the top ten most populous countries, with population on the x-axis and country names on the y-axis. The visualization customizes both axes by removing domain lines, adding a formatted tick label that converts large numbers into billions, and including a descriptive axis title. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart as SVG, pulling data from a local CSV file. The bars are colored steelblue, and text styling is applied via an external stylesheet.

Loading thumbnail…

Number of Data Science Classes by MIT Department

This bar chart shows the number of data science classes offered by the top five MIT departments, with Course 15 highlighted in red and the rest in black. The data, sourced from MIT’s course catalog, is loaded from a CSV file and rendered as SVG rectangles using d3.scaleLinear and d3.scaleBand. Axes are generated with d3.axisLeft and d3.axisBottom, while d3.csv parses the dataset. The chart emphasizes departmental differences in course offerings.

Loading thumbnail…

Shapes with SVG and CSS

A car inventory report visualizes vehicle data using basic geometric shapes. Circles and rectangles represent car models, with color coding distinguishing attributes: a red circle, a green rectangle, and blue shapes with black outlines. The rendering uses SVG elements directly in HTML, with CSS classes applying styling like red text highlights and stroke properties. Transformations scale and translate the shapes, while line and path elements add simple connector graphics. The example demonstrates manual SVG construction without a JavaScript library, relying on inline markup and stylesheet rules for presentation.

Loading thumbnail…

HTML Cars Report

This example renders a simple cars report as a static HTML page, displaying three vehicle names in a bulleted list with one item visually highlighted. The page uses plain HTML markup for structure, with a linked external stylesheet controlling the presentation. The styles.css file sets a large monospace font for the body and applies a red color to the element with the class "highlighted," which marks the Nissan Leaf. No JavaScript libraries or data-processing APIs are involved; the visualization relies solely on CSS selectors and semantic HTML to convey the report’s content and emphasis.

Loading thumbnail…

React Starter

This example shows a minimal React application that displays a car manufacturer name in large text on a web page. It uses React 16.10.0 and ReactDOM to render the message, pulling data from a local `cars.js` module containing four car records. The code filters cars priced under $1,820 and formats them, though the visible output is just the first car’s make, “honda,” assigned to the `message-element`. The styling is applied via a `<style>` block in `index.html`.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, displaying only vehicles under $2,000 with their year, make, model, and cost. It uses JavaScript modules with exported functions, including `getCars` which parses a static JSON array and returns it via a `Promise` with a simulated delay, and `generateReport`, which filters and formats the data using template literals. The page initially shows "Loading..." and then updates a `<pre>` element with the generated report. It relies on native `Promise` and `JSON.parse` APIs.

Loading thumbnail…

HTML Starter

This example displays the text "Hello World" in massive, 13-em type centered on a blank HTML page, serving as a minimal starting point for web-based projects. It also writes "Hello JavaScript!" to the browser console via the `console.log` API. The rendering approach relies on plain HTML and CSS within an `index.html` file, with no additional libraries or data sources, making it a bare-bones template for developers to build upon.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a white page in a large 13em font. It is a minimal web page that demonstrates the basic structure of an HTML document, including a `<head>` with embedded CSS for text styling and a `<body>` containing the content. The page also includes a JavaScript `<script>` that logs “Hello JavaScript!” to the browser’s console, showcasing a simple interaction with the page’s environment.