I created Space Typer a few weeks ago while playing around with Canvas. Most of my experience with Canvas has come through using KineticJS, which really does a lot of great things for you if you’re drawing and animating shapes. Once I get around to making my first PhoneGap app I definitely want to try to incorporate KineticJS.
On to Space Typer, a framework-free, HTML5 canvas game wherein users control a small spaceship and attempt to fend off the onslaught of common nouns. I’m still thinking about building something more interesting using impact.js or box2D, but the goal here was to build something relatively simple without any frameworks.
I started working on a node.js and socket.io 2-player version this weekend, but ran into a few issues with the clients ending up out of sync. Hopefully I can have it and up and running in the not-too-distant future.
As some Twitter users have brought to my attention, a change in Twitter’s Search API from v1.0 to v1.1 makes this map no longer functional. All GET requests require authorization. I’ll look into either supporting Twitter’s new API or repurposing the map sometime in the near future when my project load is less demanding.
Twitter Map takes the latest geocoded tweets for a given search query and plots them on an Albers projection of the US. The map and tweet circles are drawn using D3.js while the contents tooltip uses a forked version of Tipsy. New tweets are plotted every 25 seconds.
Only about 1% of tweets are geocoded as the feature is opt-in, so only a small number of the tweets processed are actually plotted. Limiting the geocoded tweets to a portion of North America reduces the set to an even smaller group. All of the filtering is done client-side, so this means a lot of tweets are returned but few actually appear on the map.
To expound on that brief overview, the first GET pulls in 100 tweets in JSON format per page. I say per page because Twitter actually has around 1500 results for us, but sets a max of 100 tweets per page, so we have to use a loop to iterate through each of the individual pages. This is great, but keep in mind only one tweet per page may be geocoded, and it may not even be from the US! (I intend to try a spherical world projection at some point or something with greater interactivity possibly using Leaflet in the future.)
So here we are with likely less than one mappable tweet per page and 15 pages of tweets. If the number of tweets is too few to create an adequate map (that arbitrary number being five), we take the oldest tweet from the 15th page on the first run query and use that as a starting point with the Twitter Search API to look for some older tweets to populate the map with. Assuming we meet the quota of a satisfactory number of tweets to map, the most recent tweet is recorded and used for the next GET requests that queries every 25 seconds. The most recent tweet is used as a URI parameter in order to request only the newer tweets (those with a larger ID number). Rinse and repeat.
Finally, the Tipsy fork for SVG unfortunately does not support IE, so the map is best viewed in Chrome, Firefox, Safari, or Opera.
There were a lot of interesting things I learned while creating this map. First, D3 makes creating interactive visualizations incredibly easy. Second, lots of callbacks make code illegible to everyone. I could go into this more, but Evan Czaplicki covered it thoroughly in his Escape from Callback Hell article. It’s an interesting read and rings even more true now that I’ve started playing around with Node.
I promise to provide a more in-depth dive into the Twitter Map code if someone is interested, but it still has some things I want to change before I put it up on GitHub.
Searching too frequently results in Twitter rate-limiting your IP for a limited amount of time. Rate-limiting is done to prevent abuse from runaway scripts, but it can be triggered here because so many GET requests are made in order to populate the map with a sufficient amount of tweets. Do not query repeatedly.