This tool allows you to add both individual nodes or a spread of nodes, and has a number of options to show and hide node points, fills, and lines.

There’s plenty more to be done. Possibilities includes:

1. Gradient fills rather than flat fills
2. Inbuilt export feature
3. Toggle between Delaunay Triangulation and Voronoi Diagrams

Delaunay Triangulation and Voronoi Diagrams are related shape generating algorithms.
Whereas Delaunay triangulation creates an optimal triangular grid, a Voronoi diagram creates polygons where the borders are equidistant between node points.

I guarantee that once you start down this road you will start to see everything in terms of triangles.

Download app:

• Delaunay_pc.zip – Windows (3Mb)
• Delaunay_mac.zip Mac (5.9 mb)

The technique I adapted was to create a random set of initial points, and then use a Delaunay triangulation algorithm to create a set of triangle Shape objects, which are then stored in an array.

Each triangle is then coloured using the setPixel method based on the colour value of the pixel in the underlying image in the centre of the triangle. The simplest technique for calculating the co-ordinates of the centre point of the triangle is to take the sum of the horizontal positions of the 3 vertices and divide by 3 to find the x co-ordinate, and the sum of the vertical positions of the 3 vertices and divide by 3 to find the y co-ordinate. This tells us the Centroid of the triangle.

(It turns out there are 3612 ways of calculating the center of a triangle, see the Encyclopedia of Triangle Centers).

More detail can be added by setting the number of initial points.

In the second iteration, you can add detail to a particular area, by clicking on it. This adds additional control points to the area around the mouse click, and generates more triangles.

When run as a projector, select Print and then Save As a PDF to create a vector image which can be edited in Illustrator.
It’s an intriguing effect to remove some of the triangles to reveal the image beneath.

Try it out

To use, click the load image button to load an image from your hard drive. Click on the image to add extra triangle points. Click reset to revert to the original number of triangles.

Further research

For more work with Delauney triangles, see the work of Jonathan Puckey – Flickr set here

The Flash version we created uses a square movie clip subdivided into 4 triangles. In the first iteration, the movie sets the colour of each triangle randomly from a list of predetermined colours. This creates a very random image. It might be more expressive to tend towards using the colour of the triangles around to determine the color, with a chance of using a random color.

In the second iteration, it uses a bitmap as the generator of the colors. It loads a bitmap image, and then overlays the grid of squares.
Then for each triangle within the square, it uses getPixel to get the colour value in the middle of each triangle. This creates an intriguing triangulated pixel aesthetic.

Try it here:

Further experiments allow us to change the size of the movie clip, creating greater or lesser detail, and creating alternative triangular forms within each square.

Loading XML has long been established a way for Flash to load external data, but if you do not want people to be able to view that data externally some kind of encryption is required. We recently had this requirement when building a quiz game for a client. We wanted the questions to be an external file so that they could be edited and added to without requiring changes to the Flash SWF. However, as a raw external XML file it would allow users to download this file and look up all the correct answers.

Building on work of the extensive AS3 Crypto class, the simple Blowfish Encryption class from Lassie games, and also the Binary XML class from Ghostwire, we’ve created a tool which allows you to load a file, encrypt it with a key of your choosing, and save it out.

Click to view in a new window
Here’s how to use it:

1. Firstly, type some text, or use the Load button to open an external text file.
2. Enter some text, which may be a memorable word, in the Key field, or click the Generate button to create a random 128-bit key.
3. Click the Encrypt button to encrypt the Input text with the Key field, using the Blowfish algorithm. This is displayed in the Output text area
4. Click the Save button to export the encrypted file. If you have generated a random key, remember to also copy and paste it into a text editor to save it
5. You can check it is working by either pasting the encrypted text back into the Input text area and clicking decrypt, or by loading in an encrypted file.

Practical applications

The load and decrypt functions can then also be used inside your Flash game or quiz or whatever, to load in the encrypted XML file, decrypt it and then parse the resultant XML.

Download the source here.

You can view a sample quiz game here.

Download the source of the quiz.

Next steps

If you have a game that needs to write the score to a server in order to update a high-score table, playcount, etc, then you can use the same principle to encrypt the output, which is then decrypted on the server. This provides a basic level of security better than simply transmitting the score etc in cleartext. For a more thorough discussion on this, see here.

Because the secret key is a string variable stored inside the Flash movie, it is vulnerable to being exposed by SWF decompilers such as Sothink SWF Decompiler. So for full protection you would also need to encrypt the SWF movie, such as SWF Encrypt from Amayeta or secureSWF.

Remember that when you deploy the files to the live server to only upload the encrypted versions!

It started with the NY Times, who were trying to understand why there was a sudden spate of lawsuits between tech firms over mobile phone technologies.
The NYT article included an infographic to try and make it easier to understand what was going on, however, it does little to make the subject more obvious.

Earlier this month, an article in The Guardian covered essentially the same ground, and also included an infographic that was little or no better. Apple is suing HTC, Microsoft is suing Motorola, and Nokia is suing just about everybody.

Other people tried to rework the graphic, including data visualisation guru David McCandless at the Information is Beautiful site. This added additional infomation, including what the object of the lawsuit was, and some indication of the size of the players.

The best reworking I came across was by George Kokkinidis, which used a circular graph format, which mades it easy to see at a glance who’s throwing brickbats at whom. It spatialises the players aroung a ring, creating an arena into which their lawsuits do battle.

Making it interactive

But as a static image there is always a limit to the amount of information that can be portrayed here, and also, the information is quickly out of date, or sometimes plain inaccurate.

It seems to me to be a perfect example of where an interactive piece of data visualisation, or spatialisation as I would prefer to think of it, can show more.

So this is what I created, after a couple of hours, in Flash, using the Kokkindis visualisation as a starting point. One thing that became apparent is that there is a mismatch between what George Kokkindis has drawn and the data source spreadsheet that McCandless’ infographic works to. Evidently, more fact-checking is required.

This is version 1.0, little more than a clickable version of the original graphic, and drawing details of the suit from the data McCandless is publishing. But I think it shows the potential for bringing this subject matter more vividly to life.

Next steps

Future enhancements include:

1. Adding company logos and some representation of size, eg market capitalisation.
2. Pulling data from an external data source so that it can be kept up to date easier.
3. Building a display engine to dynamically show lawsuits, and companies, so that it can work with rapidly changing data.
3. More details, including dates and sources, about each lawsuit.
4. A timeline view so it’s possible to see the history of this legal gunfight. Lawsuits could be shown as resolved, and then fade out over time.

Basically this will involve moving from an interactive graphic to a dynamic visualisation system. I’ll be digging further into this, and testing out the Flare toolkit for Flash/ Flex, and other languages such as Processing and openFrameworks.

1. Marca

The first, by Spanish sports newspaper Marca, offers a elliptical arrangement of matches, dates, group tables, teams and venues, and displays the related information in the middle. It’s a great way to capture at a glance how the matches played out across South Africa and throughout the month.

2. Think Positive

The next one, Think Positive, by Bristol-based interactive agency Positive, is simpler, and uses a radial device with all the matches in sequence. This can be spun to navigate to a particular match. It’s very well executed, a great piece of information design. From a UX point of view it shows the influence of the iPhone in the way content is navigated.

3. BBC World Cup 2010 Team Tracker

Thirdly, and definitely my favourite, is the BBC World Cup 2010 Team Tracker.

This application has two modes – as a predictor or a results tracker. In the build up to the World Cup (or afterwards if you wish to plot alternative histories), you can predict the result of matches, and see the progression of teams through the tournament. But rather than a boring series of lines, each country, represented by a two coloured ribbon that twists, turns and grows as that team moves through the rounds. You can save your predictions out and share them via Twitter and Facebook etc.

The Tracker element of the application works in a similar way but tracks the actual unfolding of events in South Africa. Zooming in and out, it gives you all the information, but is also an animated piece of art, an experience, joyous composition celebrating the World Cup.

You can also select a particular team and follow their journey through the tournament, with stop-offs for links to significant moments and highlights from games – the jumping off point for a multimedia experience.

Technically, it’s a tour de force, created in Flash, and shows that while many people have written Flash off, I really can’t think of a better tool to create something like this. But it is not just a technical application, it is a beautifully designed and carefully constructed piece of interactive art. It doesn’t aim to be like a printed wallchart, or a dry exercise in information architecture, but an engaging, enjoyable experience as well.

Printed poster

Lastly, I should mention the beautiful printed World Cup poster created by New York design studio Hyperakt. Using a radial bracket design, each round of matches moves closer to the middle, so at the centre is the final between Spain the the Netherlands, with the triumphant Spaniards occupying the bullseye. You can pledge money via Kickstarter to receive a copy of this poster.

Hyperakt have also created a poster showing all the World Cups to date in a similar format, but presented linearly.

Finally, interactive World Cup trackers don’t get better than this “soccermeter” (approx 1.10 in).

The Sportband records your runs onto its flash drive, which are then automatically uploaded to the Nike Plus site when you plug the Nike Sportsband into the USB of a PC or Mac running the NikePlusUtil.

The key areas that I feel could be improved are:

1. For individual runs, better definition of where you ran faster and where you ran slower
2. More accurate split times, eg each km, or each mile.
3. Better transitions between displays of data.
4. Over a period, whether that be for a week, or a month, better comparison and a better sense of your progress.
5. With these improved analyses, better goal setting that isn’t just about logging miles.
6. API, encryption and security.

Getting started

I first started by seeing what information I could get out of the Sportband by itself. The answer is not alot.

Unlike with the Nike+ iPod connector, it is not possible (as far as I know) to retrieve the data of your workouts without first uploading it to Nike Plus. The device is recognised by the computer as a Human Interface Device, in the same fashion as a keyboard or mouse, rather than as a USB drive. Using an app like iHid for the Mac reveals only information about the device. Run data is deleted from the device once it has been uploaded to Nike Plus.

However, it is not mandatory to only use the Nike Plus web site to view your run data. It is possible to access your workout data, once it has been uploaded to Nike Plus. There is a semblance of an API that lets you retrieve data about your runs via HTTP requests. It’s not exactly public, and there’s no official documentation, which means that it is subject to change at no notice, but it seems to be happy to return results regardless of where it is called.

For Nike+ with an iPod, it is possible to retrieve run data without first uploading your run to Nike Plus. However, the since the Nike Plus API is doing most of the heavy lifting for us, it makes sense to work with it. While I managed to figure out this just by looking at the Activity Monitor of Safari to see what requests were being passed, there is some good work online from people such as Eric Wroolie and Paul Richards. There’s even a Wordpress plug-in (untested by me as yet) which enables you to display your runs within a Wordpress blog. However, as the Nike Plus site URL’s and the API seem to have changed at certain times, there is no guarantee that these will still be working.

Data mining Nike Plus

Run data on Nike Plus seems to be accessible to anyone, if the user has made their run data publicly accessible. Looking at a URL, for instance:

http://nikerunning.nike.com/nikeos/p/nikeplus/en_GB/plus/#//runs/history/417671841/

You can see all my runs over history. The number 417671841 is my userID, putting another userID can pull out someone else’s data, eg 955634643 is another valid ID.

You can find out your own userID by logging in to the Nike Plus site.If you click the link to “All my Runs”, it will direct you to :

http://nikerunning.nike.com/nikeos/p/nikeplus/en_GB/plus/#//runs/history/417671841/all//
The number is your userID.

You will need to make sure your privacy settings allow the data to be accessed outside of the Nike Plus site:

http://nikerunning.nike.com/nikeos/p/nikeplus/en_GB/plus/profile?page=privacy_settings

I used the Activity Monitor in Safari to see the requests that are being made to the Nike server. There are a number of .jsp requests that grab the data which is then parsed by the Nike Plus flash application.

Looking at the activity monitor shows a number of jsp calls used to retrieve data, eg:

http://nikerunning.nike.com/nikeplus/v1/services/app/run_list.jsp?userID=417671841

This retrieves all runs by a user, me

Doing a view source on this data shows that this is an XML file. Each individual run is given a runID, such as 1211505962

Again, looking at the activity monitor shows that the data for the individual run is retrieved from a query of the format:

http://nikerunning.nike.com/nikeplus/v1/services/app/get_run.jsp?id=1076405728&userID=417671841

where the ID is the run ID.

Looking at the source of this data again reveals the XML structure of an individual run. There’s a lot of empty tags in there, such as BPM which indicate possible future Nike products such as integrated heart-rate monitors, or may be used by Nike+ iPod connector but not the Sportband. As well as the actual run data, there is additional data that might be added by the user once uploaded to Nike Plus, such as how they felt, weather condiitions, terrain, and other notes.

The key data is the snapshots, of the time at each mile and each kilometer. There is also the extendedData which consists of distances recorded every second. My guess is that this is probably the raw data that the Sportband generates.

<?xml version="1.0" encoding="UTF-8"?>
<plusService>
  <status>success</status>
  <sportsData>
    <template>
      <templateName>
        <![CDATA[Basic]]&gt;
      </templateName>
    </template>
    <userInfo>
      <weight>80.0</weight>
      <device>SportBand</device>
      <empedID>4H811T0EVSX</empedID>
    </userInfo>
    <runSummary hasHRS="false" workoutType="standard">
      <distance>18.8589</distance>
      <duration>5189000</duration>
      <calories>1563.0</calories>
      <equipmentType>sportband</equipmentType>
      <heartrate>
        <average>0</average>
        <maximum>
          <bpm>0</bpm>
          <duration>0</duration>
          <distance>0.0</distance>
<pace>0</pace>
        </maximum>
        <minimum>
          <bpm>0</bpm>
          <duration>0</duration>
          <distance>0.0</distance>
<pace>0</pace>
        </minimum>
      </heartrate>
    </runSummary>
    <batteryLifetime>0</batteryLifetime>
    <startTime>2009-01-29T07:26:30+00:00</startTime>
    <snapShotList snapShotType="userClick">
      <snapShot event="stop" id="661803145">
        <distance>18.859</distance>
        <duration>5189000</duration>
<pace>275148</pace>
        <bpm>0.0</bpm>
      </snapShot>
    </snapShotList>
    <snapShotList snapShotType="kmSplit">
      <snapShot event="" id="661803146">
        <distance>1.0</distance>
        <duration>275000</duration>
<pace>210190</pace>
        <bpm>0.0</bpm>
      </snapShot>
      <snapShot event="" id="661803147">
        <distance>2.0</distance>
        <duration>541000</duration>
<pace>245222</pace>
        <bpm>0.0</bpm>
      </snapShot>
      ....
    </snapShotList>
    <snapShotList snapShotType="mileSplit">
      <snapShot event="" id="661803164">
        <distance>1.609</distance>
        <duration>443000</duration>
<pace>294266</pace>
        <bpm>0.0</bpm>
      </snapShot>
      <snapShot event="" id="661803165">
        <distance>3.219</distance>
        <duration>848000</duration>
<pace>245222</pace>
        <bpm>0.0</bpm>
      </snapShot>
      ....
    </snapShotList>
    <extendedDataList>
      <extendedData dataType="distance" intervalType="time"
intervalUnit="s" intervalValue="10">
0.0000,0.0204,0.0612,0.1019,0.1427,
0.1835,0.2175,0.2515,0.2990,0.3330,0.3738,0.4010,
0.4213,0.4553,0.4961,0.5369,0.5776,0.6048,0.6388,
0.6796,0.7136,0.7543,0.7951,0.8359,0.8767,0.9107,
0.9379,0.9854,1.0194,1.0602,1.1010,1.1417,1.1621,
1.2029,1.2369,1.2777,1.3253,1.3592,1.4000,1.4408,
1.4680,1.4884,1.5292,1.5631,1.5971,1.6379,1.6855,
1.7263,1.7602,1.8010,1.8350,1.8826,1.9234,1.9641,
1.9981,2.0389,2.0797,2.1205,2.1680,2.2020,2.2428,
2.2836,2.3244,2.3651,2.3991,2.4399,2.4739,2.5147,
2.5554,2.5962,2.6370,2.6710,2.7050,2.7457,2.7865,
2.8273,2.8681,2.9089,2.9428,2.9836,3.0312,3.0720,
3.1060,3.1535,3.1875,3.2283,3.2691,3.3167,3.3506,
3.3914,3.4322,3.4730,3.5138,3.5477,3.5953,3.6293,
3.6633,3.7041,3.7448,3.7584,3.7992,3.8400,3.8740,
3.9012,3.9215,3.9215,3.9487,3.9894,4.0302,4.0642,
4.1118,4.1525,4.1933,4.2205,4.2477,4.2953,4.3157,
4.3632,4.4040,4.4448,4.4788,4.5264,4.5671,4.6079,
4.6283,4.6691,4.7099,4.7506,4.7846,4.8254,4.8662,
4.9070,4.9477,4.9885,5.0157,5.0565,5.0973,5.1244,
5.1652,5.2060,5.2468,5.2876,5.3283,5.3555,5.3827,
5.4235,5.4711,5.5050,5.5526,5.5866,5.6274,5.6682,
5.7157,5.7497,5.7837,5.8177,5.8585,5.9060,5.9468,
5.9740,6.0078,6.0486,6.0826,6.1234,6.1709,6.1981,
6.2457,6.2797,6.3205,6.3612,6.3952,6.4292,6.4768,
6.5108,6.5515,6.5787,6.5991,6.6331,6.6739,6.7147,
6.7487,6.7894,6.8370, ....</extendedData>
    </extendedDataList>
    <bestComparableRun/>
    <name/>
    <description/>
    <signatureValidationStatus>0</signatureValidationStatus>
    <howFelt/>
    <weather/>
    <terrain/>
    <isHumanRaceRun>false</isHumanRaceRun>
    <isFirstHeartRun>false</isFirstHeartRun>
    <intensity/>
<previousRun id="1411967596"/>
    <nextRun id="808019914"/>
  </sportsData>
</plusService>

Pulling out the runs for a particular period, you can use startIndex and endIndex parameters.

http://nikerunning.nike.com/nikeplus/v1/services/app/run_list.jsp?userID=417671841&startIndex=20&endIndex=40

Building an initial data parser

As it’s XML, we can do what we want with it, and choose whatever technology to parse the data and display the results. I’m going to stick with Flash, and see if I can work on some of the aspects listed at the beginning of this article.

I first created a classes to import the data for all runs, display a summary, and then import the run data for a selected run.

Here’s an initial AIR app which retrieves all the runs for a userID (by default it has my user ID), and then grabs the run data for an individual run once clicked upon. It’s not possible to run as a Flash movie within a browser due to Flash security restrictions (on which more in part 2).

I used the ISO8601Util class from Brooks Andrus to help display the date in a more user friendly way, though some more date manipulation is still required.

So far, so good. In Part 2, coming shortly, I’ll look at how we can work with the Nike Plus data, to create a class for individual runs, and see what we can do to create new visualisations and transitions.

Pioneered with the sIFR technique, Flash image replacement puts a selectable Flash movie instead of a text element, usually a header tag such as an <h1> or <h2>. Users without Flash see a plain text image, Google and other search engines see the text, and user with Flash see a heading rendered with Flash, using whatever typeface has been exported as the Flash movie. However, most of the techniques we’ve tried have all had issues in terms of ensuring cross-platform consistency.

One of the simplest methods we have found for image replacement is jQuery.Flash. This is a plug-in for the javascript framework jQuery written by Luke Lutman.

jQuery.flash provides a simple, standards compliant way for embedding flash content in a web page – in this regard it is similar to techniques such as the SWFobject library. But it also makes it relatively simple to do Flash image replacement.

Here’s an example.

It’s still not perfect – the headers do not adjust if the browser window is resized, and it’s hard to control the spacing around the replaced elements, but until we see wider adoption of web fonts supporting the @font-face tag this is the best way to achieve rich typography in headers. We’re continuing to follow technologies such as Fontdeck, but a clear standard is still yet to emerge for web typography.

The mural, featuring Dutch football legend Johan Cryuff, was created using the excellent Illustrator plug-in Scriptographer. An amazing web-based application for creating large-size murals is Rasterbator.

This on Totaalvoetbal on Wikipedia:

Space and the creation of it were central to the concept of Total Football. Ajax defender Barry Hulshoff explained how the team that won the European Cup in 1971, 1972 and 1973 worked it to their advantage: “We discussed space the whole time. Johan Cruyff always talked about where people should run and where they should stand, and when they should not move.”

The constant switching of positions that became known as Total Football only came about because of this spatial awareness. “It was about making space, coming into space, and organizing space-like architecture on the football pitch,” said Hulshoff. The system developed organically and collaboratively: it was not down to coach Rinus Michels, his successor Stefan Kovacs or Cruyff alone. Cruyff summed up his (Total Football) philosophy: “Simple football is the most beautiful. But playing simple football is the hardest thing.”

The 1972 European Cup final proved to be Total Football’s finest hour. After Ajax’s 2:0 victory over Inter Milan, newspapers around Europe reported the “death of Catenaccio and triumph of Total Football”. The Dutch newspaper Algemeen Dagblad declared: “The Inter system undermined. Defensive football is destroyed.”