Yesterday my team relaunched AddThis.com, consolidated our brand, and launched a bunch of cool new features. One of my favorite parts is the map on the homepage which shows real-time shares as they are happening.
The map was interesting to build. We wanted it to be fast, look good on all browsers (including mobile and tablets) and communicate the reach we have being on 14 million websites and reaching 1.3 billion (yes, with a B) users every month. To do this, I looked at options using Canvas and SVG, but ultimately decided that good old-fashioned HTML and JavaScript would do the job best. We do use SVG and Canvas for it though, just not in the traditional in browser way.
The map itself is built using Protovis which while no longer actively developed, includes multiple map projections out of the box. We then use PhantomJS to create a png from the SVG that Protovis spits out. The share icons are built in a similar manner. They are canvas circles that we build into a sprite and then use PhantomJS for the actual sprite construction. By scripting the generating of these two key images, we were able to tweak and play with colors simply and with real data. No need for our design team to fire up photoshop and send over an image. Change some CSS or JS, run the build script and everything is ready to go.
Take a look at the rest of the site. Our entire team did a killer job with these new features and styling. Will, Foo, Jeff, and Jim all wrote up other pieces of this launch. Greg also highlighted how to user the new Trending Content Tool in WordPress. Exciting times here at AddThis.
