A

Andrew

@andrewdiep1·28 public vizzes

Loading thumbnail…

d3 adjacency matrix (stanford dataset)

This adjacency matrix visualizes a filtered Twitter interaction network among members of the 117th US Congress, using data from the Stanford SNAP dataset. Cells show whether pairs of nodes (IDs under 50) are linked, with teal indicating connections and black for non-links. Built with D3 v7, the SVG rendering uses `d3.scaleBand` for axes and `d3.csv` for data loading. Hover interactions trigger tooltips and highlight the corresponding row and column via stroke styling changes.

Loading thumbnail…

d3 node-link diagram (stanford dataset)

This interactive node-link diagram visualizes the Twitter interaction network of the 117th United States Congress, using data from the Stanford SNAP repository that records retweets, replies, and mentions among members. The visualization displays nodes as circles representing congress members and edges as cyan lines representing interactions. Built with D3 v7, the layout uses physics-based simulation via `d3.forceSimulation`, including `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Hovering over a node triggers a tooltip showing the node ID and its neighbors, while `d3.drag()` allows users to reposition nodes interactively with SVG rendering and CSS transitions.

Loading thumbnail…

d3 edge bundling (soc dataset)

This example visualizes the Zachary karate club social network using edge bundling, showing friendships among 34 members as curved paths arranged in a radial hierarchy. A slider adjusts edge tension, dynamically changing how tightly the bundled links curve. The visualization uses d3.cluster to compute the hierarchical layout, d3.radialLine with d3.curveBundle to draw the bundled edges, and SVG rendering for the paths and labels. Data comes from a simplified version of the networkrepository.com soc dataset, loaded via d3.json.

Loading thumbnail…

d3 node-link diagram (soc dataset)

This example visualizes the Zachary Karate Club network, a social graph of 34 members, using a force-directed node-link diagram. Nodes represent individuals and links represent friendships, with interactive features allowing users to hover over nodes to view IDs and neighbors, or drag nodes to reposition them. The visualization is built with D3 v7, using `d3.forceSimulation` for physics-based layout, `d3.forceLink` and `d3.forceManyBody` for forces, and `d3.drag` for node interaction. Data comes from a CSV file loaded via `d3.csv`, with edges and nodes rendered as SVG lines and circles.

Loading thumbnail…

d3 adjacency matrix (soc dataset)

This adjacency matrix visualization displays the Zachary Karate Club network, showing friendships among 34 club members. Each cell indicates whether a connection exists between a pair of nodes, with turquoise representing linked pairs and black representing unlinked ones. Built with d3.v7, the code loads CSV data and uses `d3.scaleBand` to map nodes to both axes, rendering labeled rectangles as SVG elements. Interactive hovering reveals source-target details and link status, while highlighting the corresponding row and column with animated stroke changes. The tooltip appears on mouseover with a transition effect.

Loading thumbnail…

d3 time series streamgraph

This streamgraph visualizes Google Search Trends for five best-selling video game franchises from 2004 to 2024, showing relative popularity over time. It uses d3.stack() with the stackOffsetSilhouette offset to create the layered streamgraph shape, with a colorbrewer categorical palette from the colorbrewer library for the series. The chart employs d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while the d3-legend library provides the legend. Data comes from Google Trends, simplified for the example, and is rendered as SVG with interactive tooltips.

Loading thumbnail…

d3 time series multiline

This example visualizes mobile cellular subscriptions per 100 people from 1990 to 2010 for five North American countries, using a multiline chart to compare trends over time. It relies on D3 v7 with SVG rendering, a linear scale for time, and a color scale from ColorBrewer to distinguish countries. The chart includes a tooltip on mouseover and a legend from the d3-legend library, with data sourced from the Global Development dataset.

Loading thumbnail…

d3 time series heatmap

This example visualizes yearly infection counts for U.S. states from 1970 to 1980 as a time series heatmap, where each cell’s color intensity reflects the number of infections. The chart uses a sequential color scale based on ColorBrewer’s OrRd palette, with a legend generated via the d3-legend plugin. Rendered as SVG, the heatmap positions state labels on the y-axis and years on the x-axis, while a custom tooltip displays state, year, and infection count on hover. The data is loaded from a CSV file using d3.csv.

Loading thumbnail…

d3 time series small multiples

This example visualizes population growth in the top five North American countries from 1990 to 2010 using small multiples, with each of the 15 charts representing a unique country-year combination. It shows the trends and comparisons of population growth rates across these nations. The visualization uses D3 v7 with SVG rendering, employing a color scale from ColorBrewer for country distinction and a legend from Susie Lu’s d3-legend library. The data comes from the Global Development dataset, simplified for clarity. Each small multiple displays a line chart with axes, and a tooltip provides interactive details on hover.

Loading thumbnail…

d3 line chart (5 lines)

This line chart shows life expectancy growth from 1990 to 2010 for five North American countries, using colorbrewer’s Accent palette to distinguish each country. Built with D3 v7, the visualization draws five separate line paths using `d3.line()`, with gray circles marking individual yearly data points. The chart uses linear scales for both axes, with an ordinal color scale for the legend. The data is loaded from a CSV file via `d3.csv()` and simplified from the original global development dataset. The black background and white labels create high contrast, while the legend is added using the d3-legend plugin.

Loading thumbnail…

d3 scatterplot qualitative

This scatterplot visualizes the relationship between urban population percent growth and mobile cellular subscriptions per 100 people across five North American countries. The visualization uses a qualitative color scale from ColorBrewer to distinguish each country, with data points rendered as semi-transparent circles. The chart employs d3.csv to load data, d3.scaleLinear for both axes, and d3-legend to create the categorical legend. The simplified dataset comes from the Corgis Global Development collection, and the SVG rendering is built entirely with D3 v7.

Loading thumbnail…

d3 bar diverging

This example shows a diverging bar chart of United States rural population growth from 2000 to 2009, using a diverging color scale from ColorBrewer to distinguish positive and negative growth values. The visualization loads CSV data from a GitHub gist, which is based on the Corgis global development dataset, and renders it as SVG bars using D3 v7. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical year on the y-axis, and a `d3.scaleDiverging` with the RdBu color scheme for encoding value magnitude. The d3-legend library adds a sequential color legend, while axis labels and ticks are generated with standard D3 axis methods.

Loading thumbnail…

d3 bar sequential

This example visualizes the distribution of infectious diseases in 1968 using a sequential bar chart, with each bar’s height and color intensity encoding the number of infections. The chart employs a sequential color scale based on ColorBrewer’s OrRd scheme, mapping values from 0 to 150,000, and includes a legend generated with the d3-legend library. The visualization is rendered as SVG using D3 v6, with axes, labels, and a dark background for contrast. The data, simplified from the CORGIS Global Development dataset, is loaded from a CSV file, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the quantitative y-axis.

Loading thumbnail…

d3 scatterplot matrix

This scatterplot matrix visualizes North American population-health indicators, comparing fertility rate, life expectancy, and population growth across the United States, Canada, and Mexico. Each of the nine charts plots one variable against another, with data points colored by country using a d3.scaleOrdinal color scale and a legend rendered in SVG. The code loads data from a CSV file via d3.csv, filters incomplete records, and uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.extent to build axes and scale the plots.

Loading thumbnail…

d3 line chart

This visualization shows population growth in the United States, Canada, and Mexico from 1890 to 2010, with each country represented by a colored line and gray circles for individual data points. Hovering over a circle displays a tooltip with the country, year, and population growth value. The chart uses d3.line and d3.scaleLinear to generate SVG paths, with data loaded from a simplified CSV derived from the Corgis global development dataset. Interactive mouseover, mousemove, and mouseout events control the tooltip's visibility and content.

Loading thumbnail…

d3 bubble chart

A bubble chart visualizes the relationship between urban population growth and total mobile cellular subscriptions for the US, Canada, and Mexico, with each bubble’s radius encoding subscriptions per 100 people. The D3 v7 code loads CSV data, filters to three North American countries, and uses a log-scaled y-axis with d3.scaleLog. Circles are rendered as SVG elements with tooltips, using d3.axisBottom and d3.axisLeft for axes. Data comes from the Global Development dataset hosted on GitHub.

Loading thumbnail…

d3 histogram

This visualization shows the distribution of yearly infection counts across US states from 1970 to 1980, using a histogram. The code loads CSV data from a GitHub gist, computes bins with `d3.histogram`, and renders rectangles with `d3.scaleLinear` for axes. Hovering over a bar reveals a tooltip with the bin range and count. The SVG chart displays maroon bars that turn crimson on interaction, with clear axis labels and a title.

Loading thumbnail…

d3 heatmap

This example visualizes yearly infection counts for US states from 1970 to 1980 using a heatmap. Cells are colored on a red scale, with darker shades representing higher infection numbers, and hover interactions reveal a tooltip with state, year, and exact count. The visualization uses d3.csv to load data, appends SVG text elements for labels and legend, and creates colored rect elements for each data point. The tooltip is positioned with event.pageX and event.pageY, while the legend is drawn manually with a loop generating gradient rectangles.

Loading thumbnail…

d3 scatter plot

A D3 scatter plot visualizes the relationship between state population and the number of infections for diseases in the US in 1975, using a logarithmic scale on both axes. Each maroon circle represents a state-disease data point, and hovering over a circle turns it crimson and reveals a tooltip with the disease name, state, population, and infection count. The visualization uses `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axes, with data loaded via `d3.csv` from a remote gist. Rendered as SVG, the plot includes labeled axes and a title, with the tooltip styled through an HTML div.

Loading thumbnail…

d3 bar chart

This bar chart visualizes the distribution of disease types by number of infections in 1968, using a logarithmic y-scale to accommodate wide value ranges. Built with D3 v6, it renders SVG rectangles with maroon fills that transition to crimson on hover, supported by an interactive tooltip displaying exact infection counts. The chart includes labeled axes, a title, and data simplified from the CORGIS health dataset, demonstrating the use of d3.scaleBand, d3.scaleLog, d3.axisBottom, and d3.axisLeft.

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes the distribution of diseases in 1968, showing the number of infections for each disease type. Built with D3 v6 and SVG, it uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. The dataset is loaded via `d3.csv` from a GitHub Gist URL. Interactive tooltips appear on mouseover, displaying infection counts, implemented with D3 selection and event handlers.

Loading thumbnail…

p5 strip chart

This interactive p5.js sketch displays a strip chart of yearly infection counts for US states from 1970 to 1980, using a simplified dataset derived from the CORGIS health repository. Red dots are jittered along the x-axis to reduce overplotting, with y-axis positions mapped to case numbers. The visualization includes axes, gridlines, and a hover tooltip that reveals the specific year and infection count for each point. The `preload()` function fetches CSV data via `loadTable`, while `setup()` initializes the canvas and random jitter values, and `draw()` renders the chart and handles mouse interaction.

Loading thumbnail…

p5 box plot

This p5.js visualization displays a box plot of infection counts across US states from 1970 to 1980, using a dark-themed canvas. It renders the box, whiskers, median line, and outlier points from a CSV dataset, with axis labels and gridlines. The sketch implements mouseover tooltips for the box and individual outliers, showing quartile values and summary statistics. The code relies on p5.js functions like `map`, `loadTable`, and custom quantile calculations to position elements.

Loading thumbnail…

p5 histogram

This visualization displays a histogram of total infection counts for US states from 1970–1980, with bars representing binned data ranges up to 30,000. It uses p5.js to load a CSV dataset from a GitHub gist, render the chart on a 1000x1000 canvas, and provide interactive tooltips that appear on hover to show each bin’s range and frequency. The code draws axis labels, grid lines, and bars using p5’s `rect`, `text`, and `map` functions, with data processed via the `table.getColumn()` API.

Loading thumbnail…

p5 heatmap

This visualization displays a heatmap of yearly infection counts for US states from 1970 to 1980. It uses p5.js to render colored squares on a 1000x1000 canvas, with darker reds indicating higher infection numbers. The map includes state labels, year markers, and a color legend. Hovering over any square triggers a tooltip that reveals the exact year, location, and infection count. The data is loaded from a CSV file via the `loadTable` function, with square fill colors computed directly from the numeric infection values.

Loading thumbnail…

p5 dot plot

This dot plot visualizes the average number of infections by disease type, using a logarithmic scale to manage wide value ranges. The visualization highlights that measles has the highest average infection count, with annotations explaining its contagious nature. Built with p5.js, the sketch loads CSV data via `loadTable()` and renders interactive tooltips on hover, which display the exact infection numbers for each disease. The chart includes labeled axes, grid lines, and a custom color scheme on a dark background.

Loading thumbnail…

p5 bar chart

This p5.js bar chart visualizes the distribution of diseases from a simplified 1968 health dataset. It shows infection counts for various diseases, highlighting the lower number of Measles cases due to the introduction of the vaccine in 1963. The chart uses a dark background, axes, and labels, with interactive tooltips that appear on hover for each bar. The tooltip displays the disease name and its total infection count, implemented using the p5.js `loadTable` function and mouse-position checks via a custom `isMouseOverTooltip` function.

Loading thumbnail…

p5 starter

A starter p5.js sketch displays a single white circle at the center of a dark 500-by-500-pixel canvas. It uses the p5.js library to create the canvas and draw the shape, with `createCanvas` setting the dimensions and `noLoop` preventing continuous redraws. The drawing occurs in the `draw` function, which sets a black background and fills the circle with light gray. This minimal example demonstrates basic p5.js rendering of static vector shapes.