Hi!

I'm a Design Technologist at Cortico in Cambridge, MA.

I enjoy making visual tools and expressive experiences with code.

@pbesh

Blog

Creating videos from Processing's p5.js with CCapture.js and ffmpeg October 28, 2018

I’ve recently started exploring the generative art and creative coding space, and it’s been a lot of fun, but boy is there a lot to...

View Post
Visualizing Toxicity in Twitter Conversations August 17, 2018 medium.com/cortico

In late June, Deb Roy approached me to ask if I would be interested in doing some visualization work for a presentation he’d be giving...

View Post
Visualizing the spread of true and false news on social media March 9, 2018 sciencemag.org

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...

View Post
Beautifully Animate Points with WebGL and regl May 26, 2017

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...

View Post
Smoothly animate thousands of points with HTML5 Canvas and D3 March 16, 2017 bocoup.com

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...

View Post
Brushing in Scatterplots with D3 and Quadtrees December 3, 2016

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...

View Post
Scatterplots in D3 with Voronoi Interaction October 30, 2016

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...

View Post
Showing Missing Data in Line Charts September 20, 2016 bocoup.com

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...

View Post
Improving D3 Path Animation September 14, 2016 bocoup.com

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....

View Post
React and Vega: An Alternative Visualization Example March 1, 2016 medium.com

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...

View Post
Linked Highlighting with React, D3.js and Reflux May 4, 2015 medium.com

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...

View Post

Projects

Measurement Lab Visualizations 2016 at Bocoup

A comprehensive data pipeline, API, and visualization system for over 200 million internet speed tests across the world.

View Project
Harvard Medical School Breast Cancer Browser 2016 at Bocoup

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.

View Project
OpenVis Conf 2016 Videos 2016 at Bocoup

An interface to navigate through videos from OpenVis Conf powered by text analysis of the transcripts and image extraction from the videos.

View Project
Buckets: NBA Shot Visualization 2014 at UBC

An information-dense dashboard exploring shooting performance in the NBA from a variety of visual perspectives.

View Project
Academic Projects 2012-2014 at UBC

Find information about various projects I completed during my Master's degree.

View Project

Experiments

Exploring Web-based Map Techniques 2017

An exploration of various ways of working with geo data on the web. Includes d3-geo, canvas, and Leaflet.

Particles Flowing with WebGL and regl 2017

Demonstrates how to write to framebuffers with shaders in regl, enabling stateful updates of particles.

Animate 100,000 points with regl 2017

Shows 100,000 points moving between various layouts smoothly thanks to WebGL. Uses regl and d3.

Line Circle Illusion 2017

Circles moving in straight lines producing an illusion of a larger circle rotating. Uses canvas and d3.

Compute points and angles along a bezier curve 2017

Given the end points and control points along a bezier curve, get any point and any angle along the curve. Uses d3.

Animate thousands of points with canvas and D3 2017

Shows 7,000 points animating smoothly between different layouts. Uses canvas and d3.

Mandala Generator 2016

Playing with svg's <use> tag to randomly generate mandalas. Uses svg and d3.

OpenVis Conf 2017 Moving Particles 2016

Animating particles moving across the background of a page with lines connecting them when they're close to one another. Uses canvas and d3.

Canvas Particle Orb 2016

Animate 20,000 rectangles changing position and color. Uses canvas and d3.

Jagged Lines 2016

Draws a jagged line between any two points with configurable parameters. Uses svg and d3.

Shooting Signatures 2015

An attempt at creating an at-a-glance visual summary of an NBA player's shooting performance. Uses svg and d3.

Open Source

blockup

A command-line tool for creating and publishing blocks. Created by Gabriel Florit.

d3-interpolate-path

Interpolates <path> d attribute smoothly when A and B have different number of points.

d3-line-chunked

Create lines that indicate where data is missing with gaps or differently styled line segments.

d3-scale-interactive

An interactive UI for editing d3 v4 scales in your browser.

react-auto-width

Populates a width prop of a React component to its parent's width.

react-computed-props

A higher-order component for React to add derived props for better performance.

react-taco-table

An extensible table component for React that is driven by column configuration.

react-url-query

A library for managing state through query parameters in the URL in React.

vis-utils

A collection of utility functions for helping with data visualization.