Adam Hooperʼs Portfolio

Below is a demo. You might get a better experience if you view it as published.

For hacks

There isn’t much journalistic depth here, but I did conduct interviews with government technicians to ensure all would go as planned on election night.

The data:

• Municipal results from Municipal Affairs
• Montreal results from the City of Montreal (hosted on a media-only FTP server, because they were afraid of denial of service if too many people requested the file at once)
• Provincial shapes from Statistics Canada
• Montreal shapes from the City of Montreal

For hackers

The neat tricks here:

• Google Fusion Tables is quick-and-dirty.
• Fusion Tables doesn’t highlight a polygon when you click on it. My solution: bake out each region as its own TopoJSON-encoded flat file. When the user clicks a region, Fusion Tables reports the region’s ID, the app fetches the TopoJSON for that ID, and the app draws a polygon on top of the Google Map.
• Looking up electoral regions by postal code was very difficult. The City of Montreal outputs a list of all addresses in the city and their city-specific regions. And sometimes in Canada, the first three digits of a postal code map exclusively to a single municipality. But if a postal code isn’t in Montreal and its first three digits don’t map to one municipality, I’d need to find a latitude/longitude with Google’s Geocoder service, then find the region that point is in with Google’s Fusion Tables API. (Why not always use Google’s geocoder? Because there’s a quota.)
• Since this was all flat files, it was easy to host and update on Amazon S3.

Source code: https://github.com/adamhooper/quebec-municipal-elections-2013

Below is a demo. You might get a better experience if you view it as published.

For hacks

As published: “This six-year interactive map by Adam Hooper and Momoko Price shows where and how animals get into trouble in Toronto.”

Momoko Price got a boatload of data from the Toronto Wildlife Centre. I fetched lots of images from Wikipedia (and I included the licenses and sources). We worked together to bring the data to the Star and help with editorial coverage.

The result was a big set of stories in the Toronto Star.

The overarching theme is discovery: we want you to discover all this stuff you never knew was happening in your backyard. We chose a magnifying-glass analogy.

For hackers

We had too many data points to put on the map, and I always wanted to try a heatmap, so I started with that. I customized heatmap.js for speed. I used PhantomJS to generate PNG files for IE8. I wrote a funky JSON compression library (which I haven’t open-sourced yet) to make the 17,000 data points manageable.

The map is a custom one. My goal was to keep colour and text away from the map, because they detract from the overlaid heatmap. I used TileMill with OpenStreetMap data. I wrote a custom stylesheet and some custom PostGIS queries to get the road labels just right.

On to the magnifying glass: I rendered the map at three different zoom levels. (It isn’t divided into tiles like Google Maps.) When you zoom in, the appropriate map is scaled and placed in the appropriate position. Then the base heatmap, which is an HTML <canvas> (or in IE8’s case, an <img>) is copied, scaled and positioned to fit on top of the rectangle.

Every time the selection changes (that includes every time the magnifying glass is moved), a bunch of datasets are recomputed for the right-hand sidebar. There are lots and lots of optimizations, so it’s smooth even on IE8.

Below is a demo. You might get a better experience if you view it as published.

For hacks

As published: “A database compiled by the Canada Border Services Agency tracks illegal goods and contraband seized at border points in Canada, including more than $5.5 billion worth of drugs over the past six years.”

This map supported great [stories] (http://www.cbc.ca/news/politics/story/2013/03/27/pol-border-drug-seizures-china-gbh.html) written by David McKie related to the data he acquired via access-to-information requests.

It’s great to know where illegal drugs are coming from. This map shows where the ones we know of are coming from, and that’s a start.

For hackers

D3 doesn’t support IE8, so I had to get clever.

I used a rough SVG/VML abstraction layer which I had originally used in CensusFile. It’s like Raphaël but an order of magnitude faster. (It has far fewer features.)

I figured out the centroid of every Canadian province and every country. I downloaded a pretty map image, and I reverse-engineered its exact projection.

The rest was easy. Each line is a VML or SVG line between two coordinates (determined by the projection). Every time the selection changes, the lines’ colour and thickness change to match.

Below is a demo. You might get a better experience if you view it as published.

For hacks

As published on CBC: “Over the last six years, the Canada Border Services Agency has seized billions of dollars worth of drugs at border points across Canada. The map below uses data from a CBSA database to show seizures of drugs originating in the United States at Canadian land-border crossings, ports, airports and mail centres.”

The data was requested by David McKie.

I admit I felt personally motivated by this story: I grew up near the U.S. border and I’ve always been fascinated by life on the edge. I hope to inspire others in the same way.

This is really a big bunch of “Top 10” lists: choose a drug and whether to sort by value or number of drug seizures, and we’ll list the top border crossings. I personally like it as a game: I take some border crossings I know and try to find the drug for which they’ll rank the highest possible.

I designed the animated-rectangles chart on my own, then I realized it was a bit more innovative than I’d thought. I explained it to editors as akin to a Slate story on gun deaths. It was also a bit like all those D3 force-directed graphs (example) I’d seen of late.

The hardest part was geocoding. David McKie and I entered the latitude and longitude of every single border crossing.

Another hard part was determining the sizes of dots and rectangles. A seizure’s value can vary from $1 to $1 billion. I experimented with several exponential and logarithmic scales.

For hackers

I’m fed up with EPSG:3587, the map projection that Google Maps and other web maps use. It skews Canada terribly.

So I generated a custom SVG map, using PostGIS and map data from public Canadian and American websites. It uses EPSG:3348, the projection Statistics Canada recommends. All the dots are SVG <circle> elements with data-location=[permalink] attributes.

The IE8 support came through SVGWeb.

But an SVG map means we can’t use an existing mapping library. I had to code a custom zoom function, custom panning, and so on. It’s tricky and not much fun, but I feel this map projection contributes to the story.

Below is a demo. You might get a better experience if you view it as published.

For hacks

CBC was covering the 2013 papal conclave and wanted something fresh. Twitter and Instagram are very fresh indeed.

We stylized an artsy map of the Vatican and added every geocoded picture we could find. We sprinkled in some geocoded tweets and vines to make sure there was always plenty of content.

We found that most tweets and Instagram posts surrounding Vatican City aren’t actually geocoded. But we also found that the small fraction of users who geocode their tweets and images created plenty of content to keep the site fresh–especially when the pope was announced.

For hackers

I was as much a director as a programmer for this project.

My primary objective was training and we had a tight deadline. I proposed the architecture and coded some programming-heavy bits, but CBC’s multimedia team wrote half of the JavaScript and much of the stylesheet (with my help).

My trickiest contributions were:

• The clock (no kidding). I customized Walltime to get it just right without requiring a half-megabyte download.
• Placing the icons correctly. I used Affinity to make the math easy: the developer enters a few points for which we know both the latitude/longitude and x/y coordinates, and the library creates a formula to find accurate x/y coordinates for any other latitude/longitude points using an affine transform. It’s accurate enough; and it made it easy for us to change angles and sizes right up to the deadline.
• Clustering icons. I used Leaflet and Leaflet.markerclusterer with some special glue so the slideshow would expand and collapse clusters properly.
• Making it reusable. After the deadline, I refactored the interactive so that the CBC multimedia team can make new social media maps using just an HTML page and a new image.

Below is a demo. You might get a better experience if you view it as published.

For hacks

Which statistics are interesting, and which are boring?

It really depends on the story. As published for OpenFile (before it went offline), our story was “compare your block with your friend’s”.

I later revamped the interactive, making it easier to use, expecting that I would sell it to a publication and we could work a new story together. Alas, no sale happened. If you’d like to publish a census map, please contact me and we can formulate a story.

In the meantime, the most interesting feature is certainly the zooming. The statistics are divided by block.

For hackers

Perhaps you’d better stick to the source code, at https://github.com/adamhooper/censusfile.

I’ll summarize:

• Just like Google, this interactive presents data in tiles.
• Those tiles are JSON objects with lots of data: vector representations of regions, bitmaps of hit regions (to detect what region you’re hovering over), and statistics for each region on the tile.
• The web server builds these tiles from two sets of information: a 35GB database of polygons, and a 100MB database of statistics. The 35GB database is uploaded ahead of time; the 100MB database takes about five minutes to generate and upload, so it can go live on the day the data is released.
• The client is extremely-heavily optimized, so it works in Internet Explorer 8. For instance, the client skips parsing the JSON tile data and instead deals with small pieces of it, using regular expressions.

Below is a demo. You might get a better experience if you view it as published.

For hacks

At OpenFile, six editors, Craig Silverman and I filed access-to-information requests in six cities for all the geo-located bicycle accidents we could get.

We wanted to make them into a story. So we found the stories that matter to you: your commute, your visits to friends’ places, and your trips to the movies.

You keep your story; we add context.

This was published for OpenFile, whose website has since disappeared. I am hosting a private copy that only has Toronto data.

For hackers

• Google Maps provides the directions.
• When we get them back, we feed them to a custom Python server.
• The Python server simplifies the line a bit, then queries a PostGIS database for points closest to the line.
• We cluster the points and present them.
• We use Google Fusion Tables for the “View city-wide accidents” feature.

Source code: https://github.com/adamhooper/openroad

Below is a demo. You might get a better experience if you view it as published.

For hacks

I wrote this piece to complete my Master of Journalism at Carleton University. I interviewed my main sources on the ground and didn’t quote anything I didn’t record. I employed one fixer in Kahama. I took pictures and filmed video myself.

For hackers

This is mainly a text story, so I edited it in OpenOffice (now LibreOffice). This was especially helpful for handling revisions.

I inserted invisible marks in the document corresponding to multimedia (for the final HTML) and citations (for fact-checking).

I wrote an XSLT script that converts the final .odf file into HTML. Multimedia elements are translated into raw video and img tags in the HTML.

Next, I wrote JavaScript to pluck the multimedia elements out of the main text flow, moving them to the side (or in the background). I tracked the user’s scroll location to determine when multimedia elements should appear or disappear. (Snowfall follows the same principle.)

The intent: keep the user focused on the story. The background and foreground images add context and back up the text.