— Forest and the Trees

Archive
Design

Been a crazy month. I will start posting regularly soon. Here are links to two great visualizations and one article that were posted during the last month.

Stamen does more good work with their cab tracking piece.

Kind of related to the Stamen cab tracking is an article in the New Yorker from a couple weeks ago. It describes the methods behind NavTeq, which is the company/technology that makes all the on-line maps work. Interesting to think of Stamen’s viz in the context of the driving directions algorithms. Could cab speeds and road choices be used as traffic indicators – or maybe as the quickest routes from point A to B?

Jonathon Harris (w/ Sepandar Kamvar) also does more good work with “We Feel Fine“. The main piece is done in Java – but, love lines which uses the same back-end technology is in Flash. The visualization is great (not a surprise). But, equally exciting is the effort to structure emotional blog content. Cool stuff.

Read More

I finally got to take advantage of the improvements to the Drawing API in Flash 8. They are great. And (in theory) I will blog about different aspects of them soon. But, there is one thing to beware of… setting your lines to Miter. Miter lines draw a lot slower than other lines. Miter is very cool, in that it looks and behaves exactly like a line should – no more goofy rounded edge. But, if you’re doing work with lots of redraw, try to avoid it. (I was writing code for a pie chart where the arcs of the pie slices were being constantly updated by a user dragging a slider.) My tests show miter lines draw about 10x slower. I was hoping to post a nice demonstration example. But, I’m totally swamped.

lineStyle documentation here

Read More

Jon Udell has an interesting post on designing sparklines — “Tufte is all about subtraction.”

Read More

I put up a new version of findr that has two advanced controls.

  1. You can return photos in any order – the default is “interesting”, but now you can retrieve by “latest upload” and more.
  2. Added a rather slow “noise reduction” or “tag spam blocker” feature. What am I talking about? If you drill down far enough in findr you always end up with this lion. It shows up because it has so many tags. Now you can eliminate pics that have too many tags. Open Advanced Controls. Check “noise reduction”. Use the slider to set the tag threshold. Unfortunately, it is slow. So beware. Flickr does not return tags with photos on a multi-photo query. So, you need to loop through a list of photos and grab tags for each one. That said, you do get rid of the lions. To see it work try: dog –> golden retriever –> family.

I am leaving the original version of findr up as well. The advanced controls are interesting as an experiment. But — they’re not really necessary; I don’t love how they look (need to skin that combo box); they’re slow; and, most of the time, simple is better.

Read More

Well, I’m reaching a bit with that title. But, hey it’s a blog. First, definitions…

Folksonomy – user described data. E.g., users tagging their photos on Flickr.

Intersection – The common elements in sets. E.g., two sets [1,2,3,4,5] and [1,5,6,7,8] intersect to become [1,5]

Taxonomy – A hierarchical data structure. E.g., Computers –> Software –> Web Development Tools –> Front-end –> Flash.

What you really want on the web is a taxonomy that you understand. You shouldn’t have to know exactly what you are looking for, just have a general idea – more of a Sunday paper and less of a dictionary. Obviously, you need a dictionary, and the web does that well. But, think about going to a movie. You don’t always know what movie you want to see. Sometimes you want to look at the movie section of the paper – see what’s playing close, at a good time, that’s getting good reviews. Searching for “King Kong” isn’t going to give you that. (This type of movie browsing is done very well at boston.com btw. Check out the movie map.)

When I made findr, I was thinking about it in terms of refining a search. But, the underlying concept of refining your search is taxonomy. You can’t refine unless you give structure to your data. E.g., I can’t ignore lousy movies in the paper without a system that rates them. And what findr does is create a structure. You want a funny dog picture. You start with dog, then you see chihuaha, then costumes – you are creating a taxonomy. The intersection keeps the costume within chihuaha. And the related tags (until you drill down deep) means you will have results. Now findr’s a good example, but, delicious is great – because it has more ways to interesect. I can look through my own tags and choose “flash–> data visualization”, and get the results. I can also look at a link and find other users who have bookmarked it and look at their links (which is a great way to find new sites). I’ve created a “me –> similar users –> flash” structure. It’s a different slice and it provides a different service – surfing, vs. retrieving.

Read More

Last week they drove me crazy, but, the benefits of public APIs vastly outweigh the disadvantages. Richard MacManus has a good summary here of why public APIs, and the trends they are driving (Web 2.0), are so interesting: mash-ups, web as platform, the importance of letting go of your data, etc.. It’s all great stuff – and any one of those reasons should be enough to stop you from giving up on flickr. But the trend I’m most interested in is front-end innovation and data visualization. Nothing is enabling the development of interesting interfaces more than the availability of public data. The initial front-end innovations were the emergence of Ajax and mash-ups. But now Flash is playing a bigger role. And while mash-ups still get most of the press, and certainly housingmaps will forever be the Web 2.0 poster child (deservedly so), you don’t need to mash to innovate.

Building dBases with appropriate middleware (e.g. PHP) is a big effort. Most Flash developers don’t know how to build a dBase, and with only a certain amount of free time to experiment, don’t want to spend it learning mySQL. Plus, even if you made your own dBase, the data won’t be as interesting as flickr or Amazon. There were always a couple guys who were scraping – or building visualizations from a “kind of public” dataset. But, the opening up of APIs has everyone jumping in. There have probably been more Flash based flickr tools built in the last month than any previous month – and things just seem to be getting busier. As more applications get built, more people see them and get interested, more source is opened, the tools become more robust, and the integration gets easier. All those changes result in more applications being built and the cycle continues. It’s positive feedback. There have been similar periods of Flash experimentation in the past. A few years ago, everyone was building sites with Flash animations and experimental layouts. But, there’s a difference now. Because we’re using the same data, we’re tackling similar problems. And we’re tackling the same problems as the Ajax folks. More people working on the same problems lead to quicker and better solutions.

Also, even though many of the front-ends this month use one specific API (flickr), because all the interfaces are tied to an API that is trying to adhere to (or maybe create) an API standard, interface ideas and code should more easily port to other APIs – like delicious or lastFM. I am reaching a bit here as I have only worked with flickr. But, interface ideas around tags should work well with other tag based APIs. And code for accessing one API should be adaptable to accommodate another.

I won’t go back on my post from last week. Public APIs aren’t perfect. But, they are great. And they’re starting to have a big impact on Flash data visualization.

Read More

Findr is a FlashForward Finalist in the Application category. Wow.

I’ve actually been doing a bunch of work on Findr. I am adding a couple search features and should be open sourcing it really soon (finally). The source is kind of a mess, but, I’ve now gotten 2 emails requesting it, so I’m feeling the pressure. (Thanks for the requests btw.) I just uploaded another version (0.7). It has a couple performance enhancements and some bug fixes. Thumbs load by row now, so, if you click on another tag before all the thumbs are loaded, all 99 thumbs will not load in background and suck up all your bandwidth. Also, Kelvin Luck updated Flashr (again) and it now has caching. I’ve done some testing and this seems pretty great – basically, you don’t need to re-query Flickr for the same request. Caching might cause some memory problems. If you have any, please let me know. It’s very easy to go back to the non-cached version.

Anyway, I’m flattered to get the nomination. But really, both Kelvin, for building Flashr, and Flickr, for putting out a comprehensive API, deserve as much credit as I do. Findr’s kind of buggy and experimental (it’s certainly not up to “client work” standards) – and the other apps look pretty great and solid – but, Findr is the only one developed using a public API and a 3rd party open source tool – and I’m assuming that that was one of the reasons it was chosen. I’m psyched about that. (I’ll blog about why soon.) And I’d love to see “using public APIs” as a FF category in the future. For other Flash apps using public APIs, please check the links page.

Oh yeah – vote for Findr here. All the finalists are here.

(Usage is sure up. Check my mochibot findr stats. Cool.)

Read More

Keeping visualizations on pixel can improve readability. What is on pixel? Just making sure your rectangles are located and sized to whole numbers. This may seem a bit anal at first, but when there’s lots of info on screen, it can make a difference in legibility and eyestrain. It’s also one of those things that you might not notice until you look for it. Fortunately, it’s easy to solve. Just use Math.round and round all your values to a whole number. Obviously, you can’t keep all shapes on pixel – circles and diagonal lines will be anti-aliased by Flash.

This is basically the same idea behind fonts made specifically for Flash. Flash does a good job at anti-aliasing (but not nearly as good as Illustrator), but, if you can avoid anti-aliasing, you should. It makes things blurry. (Flash fonts sit exactly on pixel and have a fixed point size.)

If you are not dynamically attaching all your content, check everything on screen in the properties box and make sure the x, y, height, and width values are whole numbers. How you keep text on pixel depends on the text. First, make sure the _y of the text is a whole number. For left-aligned make sure the _x is on pixel as well – width and height will not make a difference. Centered text cannot be guaranteed to be on pixel. Right-aligned text will be on pixel if the text width and the _x location sum to a whole number. Fortunately, Flash 8 makes resizing text fields much easier – dragging the text area so it is wider does NOT scale the text as it did in earlier versions.

Lines are a bit different. I’ll write a separate post on lines in the next couple days. Quickly, pre-Flash 8, lines were centered on the pixel – so a 1 pixel, horizontal line at _y of 10 actually draws from _y 9.5 to 10.5. I started this post by including lines, but it got too long.

Here’s the source for the files. Source contains a project (Flash 8), an fla with one line of code (saved as Flash 7), and 3 classes. Code will only work in Flash 7 (Flash 6 compatable except for getNextHighestDepth().)

Read More

I made a Flickr photo browser type thing with Flash (requires Player 8, hi-speed, 1024×768). I’m calling it Findr. It uses the Flickr public API and Kelvin Luck’s fantastic Flashr (which wraps the API for Flash).

It’s still very beta with bugs to fix and design improvements to make. But, I wanted to post something before my talk on Wednesday, so here it is. And here’s what it does…

  1. First, enter an initial tag.
  2. Findr displays a list of related tags. Then, it gets a list of photos matching the initial tag and displays photo thumbnails.
  3. After the initial tags and thumbs load, you can click on tags or thumbs.
  4. Clicking a tag will grab a list of related tags and display the intertersection of that list with the other tag list(s). After displaying the intersection list, photos that match all clicked tags are displayed.
  5. Clicking a thumb will load a larger version of the image and display its title, owner, and a link to its photo page.

I’ll open source the code in the next couple weeks if anyone’s interested. Just need to clean it up first.

Also – for people using Flex Builder 2.0 Alpha, this does not work with Firefox Flash Player 8.5 WIN XP. It does work with MIE 8.5 WIN XP.

Read More