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...
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...
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.
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.
Playing with svg's <use> tag to randomly generate mandalas. Uses svg 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.
Animate 20,000 rectangles changing position and color. 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.
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.
A higher-order component for React to add derived props for better performance.