Confession of Photo Booth Addict

18 12 2009

Smile SantaThat is what my wife would say.

You might read the title and think that I am always taking pictures in photo booths, but it is actually much worse… In the last 5 years I have built and programmed about 5 photo booth variations…. and of course there are a lot of pictures to go along with those.

So it all started when I went to my friend Joey’s wedding.  I was discussing with a buddy that we should start a business.  Then I recalled having used a photo booth at another friends wedding in California the year before.  It was a great idea… we would go into the photo booth business of renting out photo booths and services to special events: Weddings with scrapbooks, corporate Christmas parties, etc.The First Photo Booth I Built

Next I went online and researched the cost… they are actually pretty pricey and require chemicals, film, etc.  After a couple of days I started to think, “how hard could it be, all that is needed is to take a couple of pictures and print them out.”  Well it is not that hard, but it is not that easy either.

To make a very long story short I have gone in and out of the photo booth business.  In the process I have used a PHP\Command Line scripted software, written one in C# and written another in Processing.  I have built a booth out of wood, plastic, an old picture frame, steel and now a antique radio.

Antique Radio - Soon to be a Photo Booth

Some of these photo booths have been for the business, but at this point that is no longer the motivation. I really enjoy the time spent on these creations. It is an opportunity to bring all of the computer graphics geekiness to my family and friends in a way that they love.

Antique Radio Photo BoothAbove is a picture of the new booth.  As for the software, I bought it fromBreezeSystems ($75)… and it is better than anything I ever wrote.  There is still some finishing work needed, but the new booth is ready for our holiday party.

My Dog, Sally, in a Photo Booth

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Why Improving Data Visualization and Interaction Matters

15 12 2009

There is growing interest in visualizing and interacting with data for good reason.  Improving the speed and intuitiveness of data representation is required as people interact with more and more information.
Data Overload
A UC San Diego study reported on by the Huffington Post article states that “The researchers calculated that we consumed, on average, 10, 845 trillion words in 2008, or about 100,000 words per American, per day.”  And it is not just words, there are images, audio, games and more giving the average American consumption of 34 gigabyte per person, per day.

So you will have to note the word is “consume,” but one may want to argue that only some consumption really has value.  Meaning just because it was streamed in a person’s direction was meaningful information transfered from the broadcast media to the person.  And that answer is that very little of that data really becomes information and knowledge for the person who experiences it.

This is where the study and practice of Data Visualization and Interaction becomes important.  How can developers and designers make there information the easiest, quickest and most intuitive to comprehend?  Those that are good and great at reducing the interface and letting people work with the data will be the winners.

A number of web sites and applications are investing and exploring how data visualization can help organize their content.    Digg Labs has 6 different visualizations to navigate and uncover interesting news and content.

Digg 365 has a number of visualizations they use to help shoppers find what they are looking for… even if the shoppers don’t know it (The mind behind a lot of the Etsy visualizations is Jared Tarbell who is know for some great computer generate art using flash and processing).Etsy Shop by ColorAnother site known for its great traditional graphs is (disclosure: I work for Intuit which recently acquired Mint).  Mint is excelling at helping people understand there finances and budgeting trends.

While the above examples are diverse there is a common theme of helping the users of the sites better navigate content and data.

The capacity for humans to consume information cannot increase as rapidly as our systems are making it available to us.  People will focus on the information that is important and easy to consume.  Good data design can add tremendous value to sites and business that get it, making them more usable and engaging to their users.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Microsoft Vedea comes after Processing

4 12 2009

Microsoft Visualization Language The Vedea Project Create. See. Understand.

“Vedea is a prototype of a new experimental language for creating interactive infographics, data visualizations and computational art.”

Microsoft has noticed what the guys at MIT have been up to with Processing and is preparing to launch Vedea, which they describe as “a new visualization language.”  Just knowing Microsoft many of us may have a little skepticism… not that the tool won’t be good or exciting, but will it be open, and free?  Being a strong believer in competition this entry can only make the space better, with more minds working to improve the creation of data visualization.

On the Microsoft Research Blog there is a write up with some detail, including some code snippets.  In reviewing the code it looks like the language will offer some predefined GUI Components and Data Visualizations built in.  This could actually be very valuable including these in the core (as long as it is extensible with external libraries).  Processing today is open and there are libraries that cover these areas, but integration can be  cumbersome.

It looks like launch is planned for early 2010.

Update: 12/5/09

Here is a blog post detailing a  demo of Vedea with the data, code and an image of the data visualization it created.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter

My Data Visualization Holiday Wish List

1 12 2009

As I have been writing this blog I have come across a number of great minds in the Data Visualization space and some of their books.  My Amazon wishlist has actually gotten quite long, but I narrowed it down to 3 books I want to add to my Data Visualization library:

Beautiful Data by Jeff Hammerbacher and Toby Segaran has caught my eye for a while, but it was not until I saw it in Barnes and Noble that it made my list.  There are 39 contributors that share some of their greatest data visualization with a large number of color pages showcasing their work.  This is the kind of book that can get you out of a mental block and inspire you to create.

Running the Numbers: An American Self-portrait by Chris Jordan made my list because of his Ted talk.  If you have not seen Chris Jordan pictures some shocking stats please do.  It is an inspiring video demonstrating how Art and Visualization can help the human mind make sense of the biggest issues facing society today.  I came aware motivated to make the world a better place and inspired that data visualization can play a role in creating change.  I am really excited to all of the “portraits” that are included in the book.

The Visual Miscellaneum by David McCandless proposes to be a collection of great data visualisations, diagrams and infographics.  I have seen the book promoted on the well designed site of David’s Information is Beautiful.   You can just tell from the site that this book will be a good one.  I recently used one of the infographics he contributed to for a political conversation with my wife, regarding the traits of the left vs the right.

So there are the 3… and yes, my order is in and they are on their way.  Lots of good reading and sources for inspiration.

Features of 13 Data Visualization and Chart Libraries

30 11 2009

The great news is that there are a large number of terrific libraries and tool kits available for visualizing data on the web.  Some of the best of them are even free.  In my post providing a list of data visualization tools, I briefly covered about 30 of these tools, but there was something more to do here.  Each of these libraries have different charts, graphs and diagrams that they focus on and the implementation and language often differ.  To provide something for myself and the community to keep track I have prepared a cheat sheet (grid).

Included are the broader libraries that cover a lot of visualization types.  I may not have done justice to all of them, as the type of charts are those that there were demos for.  There may be cases where other types of charts are possible with a little work.  Also provided the language the library is designed to work with\built with.  There maybe a few cases where implementation can actually be done in a number of different languages.  For example the Open Flash Charts can be implemented in PHP, Perl, Python, Ruby, .NET, Google Web Toolkit and JAVA.

For a larger clickable image go to Perlita Labs.

Comparison of Graph and Chart Libraries in PHP, Java, ActionScript and AJAX

Thumbnail of Comparison Grid for Data Visualization Tools


Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Flickr Kaleidoscope built with Processing

17 11 2009

I remember getting my TRS-80 when I was about 10.  I flipped through the manual that came with it and was entranced at the kaleidoscope program at the end of the book.  I was amazed to see that a computer could reproduce these patterns and colors in beautiful synchronization.  This is my first real memory of programing and computer generated art.

I decided to revisit that memory and create my own kaleidoscope. It allows you to search Flickr titles and tags to return a set of images. You can then flip through the images and adjust the number of mirrored slices.  If you are interested in how I built it please read on.

Flickr Kaleidoscope Examples

I have been developing with Processing for a couple of years and wanted to see what could be done to make a Kaleidoscope. The technology stack that I came up with was to using Processing to access a dynamic php page that looked up images on Flickr via a REST call to YQL. So let me explain what that looks like…

Let’s start with the PHP:

$response = file_get_contents($request);
$parsed_xml = simplexml_load_string($response);
foreach($parsed_xml->results->photo as $current){ //stopped here need to start inserting
$farm = $current['farm'];
$id= $current['id'];
$imageURL = ”http://farm”.$farm.””.$server.”/”.$id.”_”.$secret.”.jpg”;
echo $title.”|”.$imageURL.”n”;

As you can see it is pretty straight forward.  I use YQL (there may be a # of call per day limit on this) to conduct a search based on a term passed to the php page.  I then parse the results into variable that are then used to build urls.  The generated urls are then output as text.
While the program is running I call this page from processing by:

public void imageLoader(String term){
loading =0;
String[] lines;
lines = loadStrings(“”+term);
text(“.”, 50+(3*i), 20);
String[] pieces = split(lines[i], ‘|’);
loadedImages[i]= loadImage(pieces[1]);
a=loadedImages[int(random(0,lineCount))]; }

You can see the code to the entire app at

And that is pretty much it.  Sounds easy, but it did take some time to get it to work right.  I want to work to add some features around saving images and possibly a gallery, but since I have a working v1 I had better get it out (perfection is the enemy of good enough).

I have posted some of the created images to flickr.  Also worth checking out is the Kaleidoscope Krazy Dad made.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Parallel Coordinate Visualization with Protovis

12 11 2009

The Protovis Toolkit includes a very powerful visualization technique call Parallel Coordinates.  This technique is not available in any of the other graphing and charting libraries that I have reviewed (see list of Data Visualization Tools), but it should be.  It is an extremely powerful way to filter through data and see associations of values.

The example in the demo covers 8 dimensions of automobiles.  Let’s say you would like a quick car that is also good on gas.  Using the sliders you select the ranges that are relevant.  You can quickly see that 2 cars meet your criteria.  Additionally, you will notice that both of these selections are late model with relatively few cylinders and low displacement.  Pretty cool insights.

A screenshot of the Parallel Coordinate demo on the Protovis site.

Since this is a toolkit, I imagine there are all sorts of approaches to add some customization. I know in this example I would like to see the actual values of the dimension, a dynamic table of the results, and some details when hovering over the lines.

The Wikipedia page on Parallel Coordinates has links to pre-built apps that you can load different data sets into.  They also have some of the nice features that I mention above.  These seem ideally suited to analysis of data sets, but may not be a great alternative to deploy on the web for an interactive navigation or selection tool.

The Protovis Parallel Coordinate tool seems to be light enough and customizable enough that it could be a great interface for an online data set.  There are also a good number of other techniques included in the toolkit.  It is definitely worth checking out.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to StumbleUponAdd to TechnoratiAdd to Twitter

List of Data Visualization Tools for Designers and Developers

4 11 2009

Below is a long list of tools, website, etc that I have used or found on the web. They can be used to help build data visualizations, charts, graphs, etc. Some require no programing and others can be complex. As with most things the more complex the tool the more possibilities for customization exist.

I originally created this list as a Google Square and it can be found here: Data Visualization Tools . Feel free to go there and make updates or add others (I was hoping to just embed the Square, but it actually took a bit of the massaging). You may notice the descriptions are listed as Google Squared provided them. I may go back at a latter time and add to them if there is interest.

There are a vast number of solutions out there in this area with some really interesting approaches and great technology.

UPDATE: I have created a quick reference for which tools have which Visualization Types.

Name Image Google Description
Cartographer.js Cartographer.js. “Thematic
mapping for Google Maps”—which means an easy way of
adding heat maps (aka chloropleths), pie charts and point clusters as a
layer …
Flare Flare visualization toolkit. Flare is a collection of ActionScript 3
classes for building a wide variety of interactive …
Flot Flot is a pure Javascript plotting
library for jQuery. It produces graphical plots of arbitrary datasets
on-the-fly client-side. …
Google Chart API The Google Chart API lets you
dynamically generate charts. To see the Chart API in action, open up a
browser window and copy the following URL into the …
Google Maps API The Google Maps API lets you embed
Google Maps in your own web pages with JavaScript. The API provides a
number of utilities for manipulating maps (just …
Visualization API
The Google Visualization API lets you
access multiple sources of structured data that you can display,
choosing from a large selection of visualizations. …
GraphViz Graphviz is open source graph
visualization software. It has several main graph layout programs. See
the gallery for some sample layouts. …
JFree JFreeChart is a free 100% Java chart
library that makes it easy for developers to display professional
quality charts in their applications. …
JGraph JGraph and mxGraph are leading edge
graph visualization component product families. They enable software
developers to rapidly add complex and professional …
JSViz I gave in and finally integrated
support into JSViz, and just in time for the Safari 3 Beta (which I’m
really digging so far)! …
JUNG As a library, JUNG can be used both
to build network-oriented tools, and to provide network … Analysis
and Visualization of Network Data using JUNG …
InfoVis Toolkit
The JavaScript InfoVis Toolkit
provides tools for creating Interactive … You may use the JIT with
your favorite DOM manipulation framework; Extensible …
Many Eyes quick start ·
visualization types · about Many Eyes · blog.
Throbber_home. visualizations, data sets, people, comments …
MooWheel MooWheel is a mootools based script
to create unique and elegant visualize data using JavaScript and the
object. Using MooWheel is very simple and …
Flash Chart
Info: Open Flash Chart 2 is out.
Version 1.x and these pages will never disappear and the charts will
continue working forever, but further development on …
OpenLayers OpenLayers makes it easy to put a
dynamic map in any web page. It can display map tiles and markers
loaded from any source. …
PlotKit PlotKit is a Javascript graph
plotting library. It is aimed at web applications that require plotting
series of data in modern web browsers. …
Prefuse Prefuse is a set of software tools
for creating rich interactive data visualizations. The original prefuse
toolkit provides a visualization framework for …
Processing.js Processing.js is an open programming
language for people who want to program images, animation, and
interactions for the web without using Flash or Java …
Protovis Now researchers at Stanford are
offering a suite of tools called Protovis that streamline the process
of building data visualizations. …
Raphaël is a small
JavaScript library that should simplify your work with vector graphics
on the web. If you want to create your own specific chart or image …
SIMILE Exhibit The Exhibit project has
graduated and moved on with its life. Visit the new home page for more
information on how to join the new mailing lists, …
SIMILE Runway SIMILE Widgets; Runway. Runway.
This widget lets you display images in a rich interactive visualization
similar to that of Apple iTunes known as Cover Flow. …
This software was originally
sponsored by The Andrew W. Mellon Foundation as part of the SIMILE
project. Its original author is David François Huynh. …
SMILE TimePlot Ingo Muschenetz, Area Charts in
Timeplot, 2007-08-13. Andrew Plotkin, Use Smile Timelin in a
stand-alone Java application? 2007-08-13 …
TufteGraph Tags: Design Tactics, edward
tufte, graph, information visualization, mint, mint .com, moma,
newsmap, tufte, Web 2.0, widget. Much has been made of, …
Ubigraph for visualizing both 1-mode and
2-mode social network data; Ubigraph, in 3D, requires coding skills and
runs on Linux and Mac; TouchGraph and TouchGraph …
jQ Chart J Q Adams Elementary – TAKS
Test Scores – 6th Grade – Reading … About the charts. This graph
shows two data columns for the “% met standard” of
the Texas …
jQuery Google
jQuery Google Charts. DEMO
SITE. Basic usage: var api = new jGCharts.Api(); jQuery(‘‘)
.attr(‘src’, api.make({data : [[153, 60, 52], [113, 70, 60], …
I gave a quick 5 minute demo at
the Splunk Developers Boot Camp on using the Splunk PHP SDK with
jquery.sparkline.js to chart the traffic this page received …
This is an example from the
Filament Group Lab Article: jQuery Visualize Plugin: Accessible Charts
& Graphs from Table Elements using HTML 5 Canvas …
pChart pChart | a PHP Charting library. Sunday, September 20, 2009. opensource: del. tag/opensource · PHP graphics image graph visualization charts …
Style Chart a free chart engine and API that is available as both a hosted JavaScript service and a downloadable Java library
Visualize Free a free web-based tool that allows you to build sophisticated interactive dashboards using your own data in a Flex GUI in your browser

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter

New Java Script Mapping Library – Cartographer.js

21 10 2009

This morning I came across a very useful looking javascript libray to work with Google maps called Cartographer.js.  It is based on the Raphael.js libraries and they are well thought out and extremely simple to use.  Looking at the code examples and demos it looks like a quick and easy way to create some great looking mash-ups of geographical data.

A cluster map built using Cartographer.js

A cluster map built using Cartographer.js

What’s New… Used, and Made?

3 08 2009

I have been heads down building a couple apps. I have launched my first one and thought I had better post something on what I came up with and how the experience was.

It was really just some refinement to my New-Used-Made idea I discussed in an earlier post.  You can see the site at:  My effort consisted of:

  1. Adding some image resizing JavaScript.
  2. Adding some JavaScript to give No Image messages.
  3. Getting a URL.
  4. Adding some Google Analytics tracking.  (the trickest part was setting up analytics on the exit links clicked)
  5. Trying to monetize (an on going process)

The last step may bother some.  I love trying to figure out technology for tech sake, but the same is true for business.  How can you build something that people will like, and use… even if it means parting with some of their hard earned cash.  With this site it is not such a direct call to action.  I am hoping the mash-up of Amazon, Ebay and Etsy shopping will help people find items that they never would have before.

new-used-made shopping image

I will keep you posted on my learnings and progress… I also have another site coming up in the near future.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter