Blog
This cover depicts the breadth and depth of the spread of two different news stories through Twitter. The larger orange object (or cascade) represents a...
I’ve got a fever, and the only prescription is more points dancing across my screen. In a previous blog post, I covered how to animate...
Sometimes in life, you’ve just gotta move thousands of points around on the screen. For hundreds of points, this can be accomplished with D3 through...
One of the most common interaction idioms for data visualization is to select by clicking and dragging, also known as brushing. In this post, I’ll...
D3 v4.3.0 was just released, and it came with a notable new feature: diagram.find for d3-voronoi. With this great addition, we are now able to...
While working on visualizing the results of internet speed test data for Measurement Lab, it became clear that there wouldn’t always be data for every...
D3 provides us with many of the basic building blocks needed to make charts in browsers while also making it extremely easy to animate them....
In this post, I’ll go over an example of how to render a couple of charts by creating React components that encapsulate Vega visualizations. The...
One of the best interaction techniques for data vis is to have linked highlighting between related visualizations. In this post, I share a method for...
Projects
A comprehensive data pipeline, API, and visualization system for over 200 million internet speed tests across the world.
An online tool for exploring and visualizing the results of a multitude of different experiments focused on how various breast cancer cell lines respond to a number of different perturbagens.
An interface to navigate through videos from OpenVis Conf powered by text analysis of the transcripts and image extraction from the videos.
An information-dense dashboard exploring shooting performance in the NBA from a variety of visual perspectives.
Find information about various projects I completed during my Master's degree.
Experiments
An exploration of various ways of working with geo data on the web. Includes d3-geo, canvas, and Leaflet.
Demonstrates how to write to framebuffers with shaders in regl, enabling stateful updates of particles.
Shows 100,000 points moving between various layouts smoothly thanks to WebGL. Uses regl and d3.
Circles moving in straight lines producing an illusion of a larger circle rotating. Uses canvas and d3.
Given the end points and control points along a bezier curve, get any point and any angle along the curve. Uses d3.
Shows 7,000 points animating smoothly between different layouts. Uses canvas and d3.
Animating particles moving across the background of a page with lines connecting them when they're close to one another. Uses canvas and d3.
Draws a jagged line between any two points with configurable parameters. Uses svg and d3.
An attempt at creating an at-a-glance visual summary of an NBA player's shooting performance. Uses svg and d3.
Open Source
A command-line tool for creating and publishing blocks. Created by Gabriel Florit.
Interpolates <path> d attribute smoothly when A and B have different number of points.
Create lines that indicate where data is missing with gaps or differently styled line segments.
An interactive UI for editing d3 v4 scales in your browser.
Populates a width prop of a React component to its parent's width.
A higher-order component for React to add derived props for better performance.
An extensible table component for React that is driven by column configuration.
A library for managing state through query parameters in the URL in React.
A collection of utility functions for helping with data visualization.