BlueDot EDIT Exhibit

BlueDot Inc. is a company that analyzes the propagation of disease worldwide. With that description, it was a pleasant shock to be a part of an in-house Design Team in the summer of 2017. Getting to know BlueDot's products, with lots of data backing software and print products that needed to read crystal-clear, there was actually an unending barrage of challenging design work. I got to participate in a particularly exciting one when an opportunity to participate in the EDIT festival came up in the middle of the summer and we seized it. The festival pitted design and futurism against the 17 Millenium Goals, with showcases ranging from aquaculture to threats from globalization (us!) packed into the abandoned Unilever soap factory on the east end of Toronto. We chose to highlight the new "proximity" of the global neighbourhood with the proliferation of shorter and more frequent flights crossing the globe, and the fact that humans are not the only passengers on flights. SARS was an infamous example that locked the global flight network and still saw the cross-continental spread of the disease, consequently spurring the founding the lab that would become BlueDot.

We were given a corner of the third floor propped between a floor manager's office box and a huge sliding doorway with about 10 feet in the middle.

The decision to go with a projector setup was unanimous and immediate. No TV hassles, capitalizing on the whole wall area, and no problems from occlusion because of the high ceilings. That said, we had initially planned on a dark and somewhat omonous design, but that flew out the window when we realized how close to:

The huge windows to the left
Something titled plainly as the "drone zone"

that we would be. We switched gears and went for something that would capture a bit more attention: a brilliant, panning gradient underlying a spinning, responsive 3D globe. Flight lines would draw in whenever the audience entered a destination, showing the flow of "passengers" travelling between that destination and its "closest neighbours": the most popular routes.

In the back, I aggregated a complete database of flight itineraries into statistics on flight times and a weighted graph of destinations. In the front, a React application managed the timing and structure, and puppeteered the visuals through d3, in particular d3-geo and d3-geo-projection. The globe was an orthographic projection that was animated by slerping between waypoints (in az-el space) (e.g. destinations) and along preset paths (e.g. along flight lines, along lines of latitude). Flight lines were hairier than expected because d3 has no 3D support (ironically) so they were drawn as Bezier curves and split in the middle for proper occlusion.

Details of clipping flight lines in d3 orthographic

Derek Watkins created a clever demo of 3d flight lines on an orthographic globe in d3. A naive attempt to draw flight lines won't work because they won't actually be occluded by the globe if they fall behind it. Here's how this demo avoids it:

The arc is drawn from three points interpolated with a Catmull-Rom curve in the projected 2D coordinates that happens to visually approximate a true circular curve in 3D nicely
The line fades with proximity of either of its points to the clipping plane

Drawing the spline in the projected, 2D coordinates eliminates any option to split the line before projection and get visual smoothness for cheap, even if d3 had the functionality natively (which I haven't been able to find anyways). That means that interpolation will have to be a lot more manual.

I eventually settled with what I consider the most obvious option:

Obtain the coordinates of the clipping point by the cross product of the current globe center with the normal to the great circle plane of the arc. Given the origin and destination Po and Pd respectively and the globe center C, we're looking for C x (Po x Pd) normalized
Interpolate coordinates between our origin and destination using something like d3.geoInterpolate
Project interpolated point at the right scale (read: elevation) above the ground for that fraction of the flight line
Draw one [smoothed] line from the origin to the clipping point along the interpolated points in between, and another from the clipping point to the destination, moving one accordingly to the background. Watch the cases where the whole line is in front or behind the clipping plane.

To figure out where in the flight path we would need to splice our clipped point, we need to compare the great angles of the clipping point to one end vs. end-to-end.

The festival lasted ten days and hosted thousands of attendants, and the demo survived! It comprised of four screens:

^{A home screen that cycled through major cities. Vancouver is featured above.}

^{A screen revealing the diseases present in this destination}

^{Home sweet home: a reminder of the new "proximity" of the destination to Toronto}

And it still sees use when BlueDot goes to public events!

^{PC: Deepit Bhatia, at UofT's latest "Donuts with the Dean" at Dalla Lana School of Public Health}