Peter Beshai

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 thousands of points using HTML5 canvas and d3, but that approach doesn’t scale too well beyond 10,000 points. Perhaps you... Read More

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 d3-transition on SVG nodes, but this typically becomes too slow when you need to animate more than a thousand points.... Read More

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 focus on how to implement brushing in a scatterplot with D3 through the use of two packages: d3-brush and d3-quadtree.... Read More

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 easily find which Voronoi region is under the mouse without rendering the Voronoi diagram polygons and relying on SVG mouse... Read More

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 geographic location on every single day. We might go several days without meeting a minimum threshold of tests, meaning there... Read More

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. One of the most common charts created with D3 is a line chart, often consisting of a series of SVG... Read More

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 final code has a line chart and a radial heatmap that are synchronized so that when you hover over one,... Read More

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 implementing linked highlighting using React, D3.js and Reflux. Read More

A comprehensive data pipeline, API, and visualization system for over 200 million internet speed tests across the world. Made in 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. Made in 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. Made in 2016 at Bocoup.

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

Find information about various projects I completed during my Master's degree. Made in 2012-2014 at UBC.