Allen Ho

Chloropleth Map

This choropleth map displays the 2022 unemployment rate for each U.S. state, with a blue sequential color scale indicating higher rates. It uses d3.geoPath with a d3.geoMercator projection to render state boundaries from a TopoJSON file, while a threshold scale maps unemployment percentages to d3.schemeBlues. Hovering over a state changes its fill to red via CSS. Data comes from a CSV file joined to state names, and tooltips show the exact rate per state.

Apr 2, 2024

Node-Link Diagram

This node-link diagram visualizes a network of social firm connections using a force-directed layout. The code loads CSV data and creates circles for nodes and lines for links, with hover effects turning nodes red and displaying a tooltip label. It uses d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to position elements, rendering the graph as an SVG with D3 v6.

Mar 26, 2024

Adjacency Matrix

This example visualizes a network of high-tech firms as an adjacency matrix, where each row and column represents a node and colored cells indicate directed connections between them. Built with D3 v6, the code loads CSV data, constructs the matrix, and renders it as SVG rectangles with hover tooltips. Node labels appear on the top and left axes, using the classic matrix layout for compact network representation.

Mar 26, 2024

A7 Line Chart

This line chart displays the monthly average wind speeds for various cities in 2016, with each city represented by a distinct colored line and a circle marker at each data point. The visualization uses D3.js (v6) to load CSV data, group it by city with `d3.group`, and render lines with `d3.line` and scales from `d3.scaleLinear`. A color legend is created using the `d3-legend` library, and the SVG output includes axis labels for months and wind speed.

Mar 20, 2024

Small Multiples

This small multiples chart displays average wind speed by month for ten different cities, with each city’s time series shown in a separate SVG panel. The visualization uses d3.v6 to load CSV weather data via d3.csv, group records by station city using d3.group, and render each line with d3.line. A shared ordinal color scale maps cities to distinct hues, and a legend generated with the d3-legend library identifies each color. Axes are drawn using d3.axisBottom and d3.axisLeft, while hover interactions are implemented with CSS on the line dots.

Mar 20, 2024

Diverging Bar Chart of Temperatures

This diverging bar chart displays average December 2016 temperatures for various station cities, with each horizontal bar extending left or right from a central zero axis to show below- or above-freezing values. The bars are colored using a sequential red-blue interpolator (`d3.scaleSequential` with `d3.interpolateRdBu`), ranging from blue for cold to red for warm temperatures. The visualization loads weather data via `d3.csv` and renders as SVG, using `d3.scaleBand` for the city axis, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for ticks, and the external `d3.legend` library’s `d3.legendColor` for a color scale legend. Hovering over a bar turns it red.

Mar 5, 2024

Bar Chart Sequential Scale

This bar chart visualizes the wealth of billionaires, using a sequential color scale where bar fill intensity corresponds to net worth in billions. The chart encodes value through both bar height and color, with a legend explaining the color mapping. Built with D3 v6, it loads CSV data, applies a linear color scale from white to blue, and renders SVG rectangles. The visualization uses `d3.scaleBand` for x-axis positioning and `d3.axisBottom` for ticks. A `d3.legendColor` legend clarifies the color scale. Hovering highlights each bar in red, and tooltips display exact values.

Mar 5, 2024

ScatterPlot of Length of Playstyles Across 50 games

This scatter plot compares the average and median playtimes of 50 video games, with each point colored by its release console (Nintendo DS, Sony PSP, or X360) using a D3 ordinal scale. Hovering a dot turns it red and reveals a tooltip with exact values. The visualization is built with D3 v6 and the d3-legend library, rendering as an SVG. Data is loaded from a remote CSV file using `d3.csv`, with axes scaled via `scaleLinear` and points drawn as circles via `attr` and `append`.

Mar 4, 2024

Line Chart

This line chart displays wind speed measurements across the months of 2016, with each data point marked by a red circle that turns blue on hover. The chart uses D3.js v6 with an SVG rendering approach, loading CSV data from a GitHub gist. It applies d3.scaleLinear for both axes, d3.line to generate the path, and d3.csv for data ingestion, while axis ticks are built with d3.axisBottom and d3.axisLeft.

Feb 27, 2024

Scatter Plot Matrix

This example renders a full-screen message stating “Hello HTML!” using large CSS-styled text. The visualization is implemented as a static HTML page with inline styles and no interactive elements. It relies on standard HTML, CSS, and JavaScript functionality, with the text size set to 13em and centered alignment. The page serves as a minimal starter template, demonstrating basic document structure without any external libraries or data-driven graphics.

Feb 27, 2024

Bubble Chart

This bubble chart visualizes video game data by plotting average play length on the x-axis against review scores on the y-axis, with circle radius representing average completionist length and color encoding the console platform. It uses d3.csv to load the dataset, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.schemeSet1 for categorical colors. The SVG visualization includes hover tooltips via the title element, axis labels, and custom legends for both color and size, all rendered through D3 v6 selection and data-join methods.

Feb 27, 2024

Scatter Plot

This scatter plot visualizes the relationship between Metric Review Scores and the average length of all playstyles across 50 video games. Each circle represents a game, with its horizontal position indicating playtime length and vertical position indicating review score, while a hover effect highlights individual points. The plot uses D3 v6 with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load data from a GitHub gist. The visualization is rendered as SVG, with circle color encoding review score intensity.

BoxPlot D3

A box plot visualizes the distribution of metric review scores across 50 video games, loaded as CSV data. The chart displays the minimum, first quartile, median, third quartile, and maximum values as interactive black lines that highlight on hover, alongside a steelblue box that changes color when moused over. Built with D3 v6, the code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.quantile` to compute the summary statistics and render the plot as SVG elements.

Histogram D3

This histogram displays the distribution of average daily temperatures recorded throughout 2016, with bars colored green that turn red on hover. Built with D3 v6, the visualization loads CSV data via `d3.csv`, computes bin counts using `d3.histogram()`, and scales the axes with `d3.scaleLinear()`. The SVG rendering includes axis generators (`d3.axisBottom` and `d3.axisLeft`), interactive tooltips via appended `title` elements, and explicit margins for layout. The code demonstrates a straightforward binning workflow from raw weather data to a readable chart.

BarChart D3

This bar chart visualizes the wealth of various companies in billions, with each bar’s height corresponding to its value and a hover effect turning bars red. The visualization is rendered as an SVG using D3.js (v6), with data loaded from a CSV file via `d3.csv`. The chart employs `d3.scaleBand` for the x-axis (company names) and `d3.scaleLinear` for the y-axis (wealth), with axis labels generated by `d3.axisBottom` and `d3.axisLeft`. Bar colors are dynamically set to a blue gradient based on wealth value.

New Bar Chart D3

This bar chart displays the wealth of billionaires, grouped by company name, with bar heights and colors scaled to each billionaire’s net worth in billions of dollars. Built with D3 v6 and React, the visualization loads CSV data from a GitHub gist, uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders bars as SVG rectangles with hover effects via CSS. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and each bar includes a tooltip title showing its value.

Feb 19, 2024

Histogram for Temperature Count of January

This histogram displays the count of average temperatures recorded in January 2016 across the first ten cities in a weather dataset. The visualization uses p5.js to draw the chart and axes, with mouse hover interactions revealing exact counts for each temperature range. Data is loaded dynamically from a CSV file hosted on GitHub using p5.js’s `loadTable` function, and the bars are rendered as rectangles on the Canvas API.

Strip Plot

A strip plot displays the average temperature of ten cities for each month of 2016, with each month’s ten readings jittered horizontally to reduce overplotting. The visualization uses the p5.js library, loading a CSV dataset from a GitHub Gist via the `loadTable` function, and renders circles on a canvas with hover tooltips showing exact temperature and month values. Axis labels and tick marks for temperature and month are drawn manually, with random offsets precomputed in a `randomNum` array to distribute points.

BoxPlot

This box plot visualizes the distribution of Metric Review Scores for 50 video games, each selected to represent a single genre. It displays the median, quartiles, minimum, and maximum values, with outlier scores plotted as individual circles. The visualization uses the p5.js library with `createCanvas`, `loadTable`, and custom hover interactions to display box plot statistics. Data is loaded from a remote CSV file containing video game review metrics, and the scores are sorted and processed to calculate statistical values.

Histogram

This histogram visualizes the count of video games per genre from a CSV dataset fetched via p5.js’s `loadTable`, limited to the first 50 single-genre entries. Using the Canvas API, it draws colored rectangles for each genre’s frequency, with axis labels and gridlines. An interactive button randomizes the fill color, and hovering over a bar triggers a tooltip displaying the genre and its count, implemented through p5.js’s `mouseX`/`mouseY` and `text` functions.

HeatMap

A heat map of temperature data for ten cities across the months of 2016, rendered as an interactive grid of colored squares using the p5.js `loadTable` API to fetch a CSV from a GitHub Gist. Each cell encodes average temperature through color saturation—cooler temperatures appear darker—while hovering over a cell displays its exact value. The visualization includes manual axis labels, a temperature color scale legend, and city names positioned along the left edge.

Feb 7, 2024

Billionaires Dot Chart

This dot plot visualizes the founding years of ten billionaire-owned companies, with each dot positioned along a horizontal axis scaled to represent the year founded and labeled vertically by company name. Hovering over a dot displays its approximate founding year. Built with the p5.js library, the sketch loads a CSV file from a GitHub Gist using `loadTable()`, sorts the year data, and renders interactive circles with custom hit-testing via `mouseOnHover()`. Axis labels, tick marks, and a legend are drawn directly on the canvas.

Feb 6, 2024

Billionare Bar Chart

This bar chart displays the wealth of billion-dollar companies, with each bar representing a company’s worth in billions of dollars. The visualization uses p5.js to load CSV data from a GitHub Gist, sort wealth values, and render bars on a canvas with labeled axes, company names, and hover interactions that reveal approximate values. The chart shows the range of company valuations from the dataset, which was modified to include distinct companies from their earliest established time.

Feb 6, 2024

p5-starter

This example shows a minimal p5.js "Hello World" drawing on an 800-by-800 canvas. It renders a green-outlined rectangle, a red circle, and the text "Hello World" using p5.js functions `createCanvas`, `background`, `rect`, `circle`, and `text`. The sketch runs in the VizHub V3 Runtime, which uses `index.js` as its entry point and supports hot reloading for interactive widgets. The code relies on the p5.js library (version 1.9.0) loaded via a CDN, with no external data source.

Feb 1, 2024