Random Etc. Notes to self. Work, play, and the rest.
New Maps at London2012.com
At Stamen we've just finished building a new map for LOCOG (the London Organising Committee of the Olympic Games). This map builds on the work we did last year, with some new work on the back-end to expose a wider variety of content and another round of improvements to the Modest Maps powered front-end. This time we're trying to organise and make spatial sense of the thousands of geocoded articles and photos that the London 2012 team are producing, highlight the ongoing works in the Olympic Park, London and the UK, and showcase the depth and breadth of information available on the main site.
As always when we've just released something, I haven't had a lot of time to reflect on what's been done since I stopped working on it every day, but I wanted to get some words down while the paint's still wet. As always, but sometimes it's important to state clearly: I write for me here, not for Stamen (though I'm not sure what I'd change) and certainly not for LOCOG (you shouldn't take any of this as an endorsement from them). As always, and sometimes you can't say it enough: not all the work shown here is by me, I'm part of a bigger team at Stamen and almost all of us had a hand in this one. We also have very attentive and supportive clients!
We've had a lot of fun paying attention to their brand; going to town with the bright colours, seamless transitions, polygon shards, flags and so on whilst keeping that controversial logo moving nicely. It's sometimes tricky to stay within the guidelines and still have things make sense on top of the maps we've made, but the style guide is tough but fair and it's definitely worth it in the end. Since the branding already pushes things from the graphic design standpoint we've taken the opportunity to push the interactive end of things. The map allows you to filter the content by category, time, search terms and place, with all those (except the search terms) happening client-side to give you an immediate update.
From a technical standpoint the trickiest bit was getting the clustering right. It uses multiple levels of the UK's administrative hierarchy behind the scenes to group different categories of content together into those numbered and coloured flags. When you click on a flag we display an info bubble with tabs containing excerpts from all the content. All of those elements update when the filters change, either immediately or with a slight (and hopefully imperceptible) pause, and hundreds or thousands of animations get kicked off every second if you drag the time slider. With all that going on, the clustering had to be robust!
It's one thing to identify that your map has too much content when it's zoomed out, or that when you're zoomed in some things are overlapping. But it's another thing to group things together in intuitive ways, and yet another thing to have those groupings behave appropriately with other UI elements, and to have the content (which is really all that matters) remain accessible at all times. Throughout the final stages of the project we were worried about cramming too much stuff into the info-bubbles that appear when you click on the flags, and we considered sending you to a separate page section below the map to read extended search results. In the end though we went with the tabbed info bubble approach (I felt a little better about this idea after seeing that people like Mapeed were taking a similar approach). This can sometimes present you with a lot of scrolling to do, but with the added control given by the filters (and the constant updating of the content in the info bubble) we're happy with how that turned out.
Anyway, it's not all about technical achievement, even if that was my personal focus. Some of the features are very simple conceptually, such as showing and hiding webcams depending on whether you're zoomed-in or not. But if you zoom into the park and it happens to have snowed, you can be greeted with a pleasant surprise:
And sometimes we're really just trying to get out of the way, so that the park can speak for itself:
What's next? Well I probably shouldn't say... but since it's custom cartography season at Stamen at the moment, and we all make our interests public, you might be able to guess where we'll take things next. We'll see!
SFMOMA ArtScope
Once again I've been beaten to the punch by Stamen, infosthetics, Geraldine, Esquire and more. But here it is for posterity: we released SFMOMA ArtScope a couple of weeks ago. This was a fun one, we're really pleased with the lens approach (rather than continuous zooming) and we're loving the serendipitous bouncing from piece to piece when you search.
Inside info: the artwork is arranged by acquisition date, earliest acquisitions are top left and latest are bottom right.
Text along a path in Flash
Trevor McCauley did the hard part years ago, as is often the case, but it seems like there's no source code out there showing text along a path in Flash using actionscript 3. I'm not the only one thinking about this – the degrafa folks have got the extremely capable algorithmist Jim Armstrong looking into the problem too.
I don't have time to write a full explanation tonight (packing calls, tomorrow I'm in Montréal for Design Engaged), but I've got a quick solution which might be of use to you if you googled upon this page. Read on for more if you're interested in a quick overview.
Fix for buggy Flash TextField selection (on mouse leave)
Today's post is about tiny details.
I've noticed a frustrating problem with text in Flash that I've finally managed to find a workaround for. I'm testing in Mac OS X using Firefox 3 and Flash 9, but I've seen it on other systems too, and recently had help reproducing this bug from our client at MSNBC, so I'm pretty sure it's widespread.
Since this is a fairly esoteric issue that will only bother Flash programmers, I'll continue only in the full version of this post.
New Work: Hurricane Tracker for MSNBC
Thanks to a glorious holiday weekend in Bodega Bay, I've been scooped once again by my esteemed friends and colleagues in announcing our work on MSNBC's Hurricane Tracker, which debuted on Saturday. I jumped on this project as soon as I knew we had a chance to work on it, and despite the inevitable project logistics and some awkward travel timing on my part I'm glad to say it made it out before the end of the hurricane season.
There are four storms active in the Atlantic right now:
There's much to say about this, not least the fact that it's the first thing I've ever really worked on that exists in a competitive environment with many credible alternatives.
However, there's still more to come so it will be a while before there's time to properly reflect. For now, let me echo Mike in saying I also think map design for the web continues to be an exciting and vibrant area to be working in, and leave you with a quote from Google's Ed Parsons:
That’s not to say the principals of design are not important in the creation of “maps” for screen display, indeed one could argue for the need of a “new” cartography which adopts rather than ignores the capabilities of screen based maps to portray information dynamically.
— Ed Parsons, "Cartography is dead, long live the map makers"
Firehose
Update (June 20th): the 'Firehose' app described in this post relied on Twitter's public timeline IM support, which has been down for several days in a row. Firehose will return when Twitter gets their stuff back online.
About a week ago I made a proof of concept Flash site that I'm calling Firehose. It shows every post from Twitter's public timeline as fast as it can, in a BigSpy style.
I wasn't sure whether to make it public any time soon, but given how interesting people are finding sites like Twistori the time seems right. Blaine mentioned it on the Gillmor Gang podcast yesterday, and it hasn't gone down since so I assume it will cope with more viewers!
I'm using the XIFF actionscript 3 library to speak to a server running OpenFire, and that server has a bot that broadcasts items from Twitter's public timeline as XMPP (Jabber) instant messages to everyone viewing the Flash site. The main reason it needs its own server is because for socket communication Flash is only allowed to connect to the domain it was served from, and therefore it can't connect to Google Talk or AIM from any server I can host it on.
Anyway, you can probably tell that I'm more interested in the technology than whether it's useful or not. It really is just a proof of concept. It's a bit silly because it's too fast to be readable. But it works! (Except when it doesn't. Let me know in the comments if it doesn't work for you?)
Silly or not, Firehose does expose one tiny piece of functionality right now. There's no filtering yet, but it currently highlights "twitter" by default, and you can see what it looks like with other words highlighted by using the URL #fragment, like this, or this, or this.
Clearly there are several next steps I could take with this. The same setup could also be used to subscribe to a particular set of users, or tracked keywords, or (with a little more server-side work) to geocode the tweets and plot them on a map, TwitterVision style. We're just getting started with this, and Twitter is the only public jabber bot I know of with this kind of volume of output (this BBC one looks interesting too though).
NB:– Twitter is a former client of my employer Stamen but we're not working with them officially at the moment. This is the same Jabber PubSub feed they made public a few weeks back, that people are mainly using to power Twitter search engines.
Simple Text Outlines in Flash
(This post is part of the series I threatened to write about actionscript 3.)
For the mySociety travel time maps I wanted to have user-defined labels that looked pretty much like the map styles in the OpenStreetMap base maps we were using, like this one:
It turns out Flash doesn't have a way to draw the outlines of text easily, nor does it have a stroke filter like Photoshop. I tried a few different solutions that didn't work out, including a combinations of ConvolutionFilters (too hard to get right), GlowFilters (too blurry) and stacks of offset BevelFilters (nasty looking edges). Since the only thing in Flash that has the same quality antialiasing as the text does is, well, more text, that's what I ended up using. It looks like this:
I've included a sample SWF and pulled out the relevant AS3 code (for Flex Builder) in the full post, below.
Optimising Actionscript 3
This is the first in a series of posts about actionscript 3 that I announced earlier. Here's the feed of posts tagged as3.
Even with the great speed improvements that actionscript 3 and Flash 9 offer over actionscript 2 and Flash 8, I've occasionally had the need to revisit a project and look for places to optimise.
Miscellaneous Tips
Here's a list of suggestions I recently made to Gabe, who has his own actionscripting notes, as he was revisiting an old project looking to reduce CPU usage.
- look closely at what happens every frame (on enter frame) or inside for loops with 100s or 1000s of objects
- creating objects is slow (using 'new') - if you do it inside of a loop consider if the object could be declared outside the loop and reused inside it
- trig can be slow - lots of sin and cos inside of loops could be slowing things down (likewise pow, log etc)
- redrawing everything (graphics.clear() etc...) is slow, but moving and resizing things (with width/height or scaleX/Y) is fast; just moving things cached as bitmap is fastest (but scaling them is slow)
- creating new Textfields and TextFormats is slow, reusing them is faster
- visible = false still gets drawn, removeChild is better
- hinting types (with :int, :String etc.) and using compiled classes rather than dynamic objects to hold your data will be faster - this is again most important inside of loops
Tweaking the framerate
Simply dropping the framerate of an application might work as far as CPU usage goes too.
(Be careful with this though - if you're watching exclusively watching the CPU meters, and not the app, you might be optimising for the wrong audience!)
You can do that with the SWF metadata tag above your main app class in Flex Builder. The main bit is [SWF(frameRate='15')] but check the help file as you might have background colours and width/height in there already.
Memoization
You probably won't need it, but the trick used in Digg Arc (for calculating arc points before redrawing them) was to use what's called memoization — it helps with space-time trade-offs.
The idea is to remember the results of calling a function with certain arguments and only recalculate when the arguments change.
e.g. You might have a function that you're calling it a lot with the same values e.g. calculatePoints(1,2,3,4) that looks a bit like this:
function calculatePoints(a,b,c,d):Array
{
var points:Array = [];
/*
lots of heavy math with a,b,c,d and points
*/
return points;
}
Instead of calculating every possible variation, you can create a hash of the common results:
private var results:Object = {};
function calculatePoints(a,b,c,d):Array
{
var key:String = [a, b, c, d].join();
var points:Array = results[key] as Array;
if (points) {
return points;
}
else {
points = [];
}
/*
lots of heavy math with a,b,c,d and points
*/
results[key] = points;
return points;
}
Then if calculatePoints is called again with 1,2,3,4 you grab the answer from your results Object and return that instead of calculating it again. You probably want to set a limit on the number of things you cache though, so don't use this technique without thinking about that, and only consider this if your performance bottleneck is definitely one maths-heavy function!
Caveat Optimisor!
The only way to be sure about optimisations is to time things, manually or in your development environment, and bear in mind that even to experienced coders some performance issues can be unintuitive.
Writing About Actionscript 3
I've been programming interactive maps visualisations using Flash and Actionscript 3 for almost a year now. Actionscript 3 code is what's behind the scenes of most the Flash work I've been involved with at Stamen so far: Trulia Hindsight, Digg Arc, Twitter Blocks, Modest Maps and more.
So in the spirit of writing about what's important to me (and what I'm actually doing) instead of only writing tangential asides, I'm going to start writing occasional notes on Actionscript 3 here. Hopefully the ideas explored will contribute to my upcoming workshop at Etech in San Diego in March.
I considered starting a new blog, but I've had to deal with my fractured blogging personae twice before already. Hopefully there'll be enough visualisation and project links to keep non-coders interested.
All kinds of people read this blog for all kinds of reasons, you might not care who I spent New Year with and that's OK with me. The actionscript posts will be tagged with as3, if that's all you're interested in you can subscribe to a feed of them here. (The same is true of the Processing posts, which have a feed here).
← Back to Home
© Random Etc.. Powered by WordPress using the DePo Skinny Theme.