Guess where I went for vacation (clue in the chart).

This long, narrow country is divided into 15 regions.  In the chart below, an uneven parade of 13 bubbles was used to present some sort of economic projections.  The capital of the country was singled out as the top of the table.

The unevenness has a side effect, that the guiding lines are forced to have differing lengths and bewildering turns.  Further, because bubbles have no intrinsic scale, the designer must put all the data onto the map as well, thus failing our self-sufficiency test..

The following bar chart version respects the wide, thin space and yet delivers the data more clearly.  The top version displays all the data while the bottom one uses a simple axis.  The bottom chart is my preference since most readers are probably interested in approximate and relative comparisons, rather than exact projections.  (The map would be better off without colors.)

Reference: "Inversiones entre 2008 y 2012 llegaran a US$ 57 mil millones impulsadas por mineria y energia", El Mercurio, Aug 25 2008.

This flowchart shows you what to say during private time with your special friend. Say goodbye to confusion and hello to deep conversations. Start from the middle of the chart and work your way out. Never again will you be at a loss for words.

There's also this universal comedy flowchart similar in spirit.

a network-like visualization of the history of the America’s Cup through the visual depiction of all the people & the boats who are part of "the legend".

[link: americascup.com]

I was exchanging email with Rob a few days ago, and he brought up that I might see a slight boost in traffic from Australia because he had spread the word (thanks!) at a statistics conference. I immediately went over to Google Analytics, and indeed, there was an increase in traffic from the land down under.

That's when I created Visitr, a way to see where your site visitors are coming from in near real-time, and after plenty of hearty discussion – it's complete with open source code, so you can customize Visitr for your own site or application.

What is Visitr?

Visitr is essentially a map that shows bubbles in places your site visitors are, um, visiting from. Bubble size represents the number of requests a particular visitor made recently. I call it Visitr, because it's easier to say than map thing that shows web traffic. I also put some gibberish on the bottom right corner using the city name of where I think you are. That's just me messing around.

How Visitr Works

The map is written in Actionscript 3.0 and makes use of Modest Maps and TweenFilterLite - two very useful libraries I keep coming back to. The data (i.e. IP addresses) come from my Apache log files and I map the IP addresses to location with the free version of MaxMind's GeoCity database.

Alright, enough blubbering. So how can you customize Visitr for your own website? Well there's two parts here:

1. Get the data from server log files and geolocate IP addresses.
2. Map data in a way that doesn't look ugly.

Let's start with the first part – the data.

Geolocating IP Addresses

MaxMind provides an easy-to-use service, GeoIP City that maps IP addresses to cities. There's a non-free service, which is about 99.6% accurate, but more importantly, there's a free version – GeoLite City. The free service is only 77% accurate, but that's good enough for this application. If you want to switch to the more accurate later, it's only a matter of replacing a single file.

I included the PHP code to geolocate IP addresses in the source, but here's the part of interest in /log/_helper.php:

<?php include_once("Net/geoipcity.inc"); include_once("Net/geoipregionvars.php"); $gi = geoip_open("GeoLiteCity.dat", GEOIP_STANDARD);   /* * Get location of ip_address */ function getLocation($ip_address) { global $gi;   $record = geoip_record_by_addr($gi, $ip_address); return $record; }  

The Net folder is from MaxMind, but I can't remember where I got it from. I bundled it in the source though. Just stick an IP address in getLocation() and it returns an object that holds country, state, city, zip code, and even latitude and longitude. Could this get any easier?

Load and Map the Data

Modest Maps and TweenFilterLite do most of the work when it comes to displaying the data. I use PHP to generate an XML file that contains locations and read it in to my Actionscript with loadData() on line 60 of Visitr.as. I load 40 or so IPs at a time. When I'm running out, I ask PHP for more data and load up the queue.

Customize the Map

One of my favorite parts about Modest Maps is how easy it is to use map tiles from various services like Google, Yahoo, or Microsoft or you can even use your own map. I used OpenStreetMap tiles, but you can use whatever you want. I just wanted something really simple. I actually tried blacking out the map at first and just showing the circles, but FlowingData doesn't get enough traffic (yet) for that to be interesting.

On line 85 of Visitr.as I applied a filter to the map to give that dark grayscale appearance. How great is it that I only have to change one line of code to completely change my map's appearance? This color matrix tool from AdobeTutorialz helps you decide what filter to apply.

Here are the few lines of code it took to draw and customize the map:

// Draw the map map = new TweenMap(stage.stageWidth-20, stage.stageHeight-20, false, new OpenStreetMapProvider()); map.setExtent(new MapExtent(69.345206, -44.222107, -139.921875, 163.125000)); var mat:Array = [0.12344,0.24376,0.0328,0,-1.9,0.12344,0.24376,0.0328,0,-1.9,0.12344,0.24376,0.0328,0,-1.9,0,0,0,1,0]; map.grid.filters = [new ColorMatrixFilter(mat)];  

Those four lines of code creates the map with OpenStreetMap tiles, sets the boundaries to the world, and then applies a filter to grayscale.

Create the Markers

Now for the blue markers. Take a look at /com/flowingdata/visitr/Marker.as. The method names are pretty self-explanatory. On line 43, play() makes the animation with TweenFilterLite. I start the marker at scale zero, tell it to grow, and then make it fade away over a minute. You can pretty much do whatever you want here. Be creative!

Places for Improvement

The first thing I'd probably do is optimize the data loading process. I'm not keeping track of the IPs that have been mapped already, so there could be some overlap as Visitr polls the Apache logs for more data. I'd also like to put an initial progress bar at the beginning to show data is loading.

I'm sure all of you can think of plenty of ways to improve Visitr, so why not give it a try? Make the map interactive with pan and zoom functionality or display the cities as markers pop up. I tried moving the map like Twitter World, but after watching it for a little while I felt a kinda nauseous.

Visitr is Free

Anyways, all the code is free and BSD-licensed, so have fun with it. If you implement any optimizations or come up with your own versions, I'd love to hear about it. Ideas? Improvements? Let me know in the comments.

an online mapping website with a collection of browsable 3D isometric city maps of about 33 different cities in the world. each map is augmented with additional (user-generated) information about places of interests, restaurants, hotels & events.

[link: onionmap.com]

Mashups have been around for a while now, but for the most part have required at least a little bit of web development. Maybe it's a line of javascript or thousands. Mozilla Labs, with the Ubiquity plugin, aims to make mashup-making accessible so that everyone can view data how they want everywhere on the Web. Use natural language like "map this" to stick a map into your email or get Craigslist offerings out of the list and onto a map.

For version 0.1, the application looks interesting. Check out the demo (or even install the plugin yourself):

[Thanks Colin and Jodi]

Recently, Business Objects released a new product named Xcelsius Present 2008. They are promoting this new version of Xcelsius as an application that will “make it easy for non-technical users to create interactive data presentations.” This product comes with ten pre-built analytical templates; novices supposedly can just match their data to a template and they’re [...]

I just downloaded Google Chrome, played a little and I must say I like it. It is very clean, so it goes well with my idea of information visualization. If I were a IE user I would probably make the switch, but for serious browsing you can’t beat Firefox+extensions. If a portable version is made available in the near future I’ll install it in my pen drive.

And, of course, you may want to think twice before using yet another Google property…

 

a2a_linkname="I Like Google Chrome, but…"; a2a_linkurl="http://charts.jorgecamoes.com/i-like-google-chrome-bu/";

a comic book made by Scott McCloud, creator of the classic comic Understanding Comics, which visually (& a bit infographically) explains the complex inner workings of their new open source browser Google Chrome.

the comic was designed as a printed book for journalists & bloggers, but online copies have been appearing since yesterday. the script was based on interviews with about 20 engineers who worked on the project, which was then adapted into comics form.

[link: books.google.com (comic) & nyud.net (better-rez version) & scottmccloud.com|via nyud.net & googleblog.blogspot.com]

Nike+ is a device you hook up to your shoe and iPod Nano to track your running patterns and receive feedback while you're running. Already a million people around the world have been training with the device, with the U.S. putting up 2.4 million global training miles. This past Sunday was "the day the world stopped to run" in the Nike+ Human Race 10K.

I was in New York last week and got a picture of the giant Human Race display in the middle of Times Square.

It's a really great self-surveillance example. It's millions of people taking interest in themselves, collecting data, and then ultimately making a contribution to a group. In this case, people are grouped by countries.

Did any readers participate in the race? I'd be interested to hear how it went.

a custom-made casing for a flourescent tube light based on recording & graphing 1 second of the ambient 'hum' sound produced by the light. the resulting 3D volume consists of a frequency time graph of 50 sequential laser-cut acrylic layers, with each layer corresponding to 20ms of the sound recording

[link: plummerfernandez.com|thnkx Matthew]

see also laser-cut sound analysis sculptures & sound chair data sculpture.

I've been a fan of Google Suggest since I first saw it - and I think that the news that it will now become the default experience for all Google searches is very significant because it will change everyone's expectations of what should happen when they start typing into a search box everywhere:



Of course several search boxes already do this kind of thing (the search box & 'awesome bar' in Firefox 3, the 'omnibox' in Google Chrome) but I believe that its use will become widespread not just for web based searching but also within desktop applications.

In 2005 just after Google Suggest came out I implemented my own version of it - it doesn't take much to get the basics right - you just need a reverse index. A bit more work and some stats can help eliminate common 'stop words' & give spelling suggestions; some further work and you can index two or three word phrases. Some of this stuff ended up in a desktop product in my day job.

Of course in a disconnected desktop product one doesn't have the huge amount of statistical information on what is searched for & clicked on, but to get a simple version of 'suggest' up and running can be quite quick and gives the user real tangible benefits.

The search box _should_ never be the same again...

Last month, FlowingData had a pretty good month moving up to rank 4,130 on Technorati and growing from about 4,000 subscribers to 4,500, so our community has grown a bit. Thank you to all of you who have been spreading the word!

In case you missed them, here are some of the best posts from August:

• Watch the Rise of Gasoline Retail Prices, 1993 - 2008
• It's Like Google Maps with Sim City 2000 - OnionMap
• Map of Olympic Medals in Bubble + Geographic Form
• Britain From Above - Beautiful Use of Satellite Technology
• Visualize Genomes and Genomic Data - Circos
• Beginner's Guide to FlowingData - A Guided Tour
• Is There a Market for Premium Online Data Visualization?
• Awesome Olympics Coverage By The New York Times
• Many Eyes Adds Wordle to its Extensive Visualization Toolbox
• 3 Worthwhile Alternatives to the Pie Chart

a comedy sketch based on a flip charts, lots of visual drawings & some freeform graphs, including a "Breakdown of Hummer Owners" & "How Funny I Find Farts (by Location)". presented by New York comedian Demetri Martin.

[links: demetrimartin.com & en.wikipedia.org]

see also PowerPoint presentation humor.

a series of artistic data sculptures whose form and content is determined by information (artistic, historical, political, social) from the U.S. Census Bureau, the National Endowment for the Arts, the Gallup Organization, the Bureau of Labor Statistics & many other dataset sources.

for instance, in data sculpture titled "Corpse 2", the length of each of piece is divided into 90 equal parts, each one representing a year of age, from infancy (0-1 year) to the 90th year, moving from the thin end to the thick. the width of each section is determined by the average (1976 to 1998) number of non-gun homicides per year for people at that age. the vertical dimension is set by the number of gun homicides.

[link: homepage.mac.com]

Stamen has taken a step towards the concrete with their recent Hurricane Tracker for MSNBC. From what I can tell, it updates every couple of hours or so. The tracker shows where Hurricane Gustav has been and where it's headed and provides information on wind speed, ground speed, and location.

From the map we see a development from tropical depression in the Caribbean Sea, to a big category 4 over Pinar Del Rio, and then something between a category 3 and 2 as it moves over New Orleans. Gustav dwindles to a tropical storm as it moves towards Dallas. With mandatory evacuations of New Orleans starting yesterday, here's to hoping everyone finds somewhere safe to stay.

Some will find this amusing while others won't get it at all. If you don't get it, consider yourself lucky. Have a good weekend, everyone.

[Thanks, Canna]

I used to ride my bike to school, and I always forgot my U-lock. Instead of riding back for it, I'd just stash my bike unlocked in between a cluster of bikes. I told my friend jokingly, "It'll be OK. 98% of people are good." One day I got out of class, and my bike was stolen.

I was cleaning up some Actionscript in preparation for a tutorial post on how to make your own animated Walmart map, but a couple of bad memories involving stolen code and bad knockoffs (of my work) stopped me midway. I had to think:

Is releasing my code the best thing to do?

I'm sure the consensus is a resounding yes, but what's to stop some lazy person from ripping off my code and pawning it off (or worse, selling it) as their own? What if I want to sell my visualizations? I am after all a lowly graduate student. It'd be nice to have another income stream.

On the other hand, had others before me not released their work under that wonderful BSD license, I would not be able to do what I do. At least not as easily. Modest Maps? Free. TweenFilterLite? Free. Flare Visualization Toolkit? Free. If I don't follow suit, does that make me selfish? Yes, it does.

Giving Back to the Community

I've heard that phrase, giving back, so many times in both the real-life sense and the digital one, but it never made much sense to me. I mean, I got it, but I never really got it.

Perhaps I never understood it, because I wasn't using much of the community's resources nor did I have anything to give back. I have something to give back now. I can help people learn in the same way that others before me have and still do. I'm incredibly thankful to those who maintain these open source projects and still help me out from time to time when there's really nothing in it for them.

The least I can do is continue to promote this idea of openness and help this small field of data visualization flourish into what it deserves to be. It's why I blog, and it's why I should give back, but to what extent?

Making the Case for Open Source Data Visualization

My dilemma brought me back to a Data Evolution post on open source data visualization. It highlighted three things:

1. Open Tools – As in freely available software tools like R and Processing.
2. Open Code – How often have you seen a visualization and wondered, "How did they do that? If only the code were available."
3. Open Data – Oh so important in data visualization. The core. Open data means more people can try out different methods.

It's not always possible to attain all three. For example, we pay money for software because the companies would not exist otherwise. It's a business, and to think that software companies would develop a bunch of free software is unrealistic. Also, oftentimes, data just can't be shared – usually because of privacy issues. Lastly, open code doesn't make sense a lot of the time. The DE post grades The New York Times with a D for openness, but they're a news business, not a visualization repository.

While we can't always attain all of three things, there's no reason why we can't try to strive towards that ideal. As someone I know likes to say – strive for perfection. You might not reach that standard, but you could end up with something close.

Open source is a development method for software that harnesses the power of distributed peer review and transparency of process. The promise of open source is better quality, higher reliability, more flexibility, lower cost, and an end to predatory vendor lock-in.

Tweeting Thoughts

I of course tweeted this in the middle of the night while watching the day's remaining olympic events - to release code or not to release code. Here are are some of the replies:

@rpj: To release, always! (When legally possible.)

@ehrenc: re: code. You could always release half the code :)

@pims to release code. There's some brilliant people around that can build on top of what you did. Open world :)

As for me, well, let's just say you should expect to see tutorials – complete with code – in the coming weeks.

a collection of mainly graphical results from a research project that focused on revealing how people feel anger, joy, fear, sadness & love. a simple survey asked 250 participants between the ages of 6 & 75 years from 35 different countries to graphically represent these emotions on a set of human silhouettes. the resulting drawings were compiled in layered Photoshop documents. in addition, participants could express emotions textually or choose appropriate colors. the text results were analyzed on frequency, while the color choices determine a DNA-like frequency pattern.

[link: emotionallyvague.com]

see also: personality DNA test & Playboy centerfold averaging & Google Project.

an online information dashboard that summarizes & graphs the Internet activity relating to the 2008 presidential elections, in an attempt to compare the similarities & the disparities between the mainstream media & user-generated content.

perspctv's current graphs include the "CNN national poll of polls", news mentions, blogosphere mentions, Twitter mentions, a US electoral map & Google Trends-based timelines comparing the names of the candidates.

[link: perspctv.com|thnkx toshio]