Blldzr: What are they Building?

16 01 2010

I have written before about the power of applying mash-up and web 2.0 technologies to government data.  For me there was a bit of put up or shut-up to the whole effort as well.  What could I do to make my community better using my development, analytical and visualization knowledge.  I wanted to find something that I had an interest around and was relevant to my community (Tucson, AZ).

Blldzr

What I came up with was Blldzr.com (pronounced Bull-Dozer).  Blldzr is a wiki that allows members of a community to enter information about development and construction projects in their area.  In a addition to the factual information there are also comments to express opinions about the developments.

Blldzr:  Answering the Question... What are they building?

After being added each development has a page that can be updated and subscribed to.

Blldzr:  A page for each development

Being informed and having conversations about what is being built in your neighborhood is one way to create community.  My hope is that Blldzr can foster more of that.

There is still much to do.  The site needs content, activity, moderators and to be promoted.  If you are interested in any or all of this feel free to pitch in (e.g. add some entries for you city).  If you would just like to be kept up to date on progress feel free to follow Blldzr on Twitter.

I will post more in the future on progress and the technology that was used in building the site.

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

Advertisements




Interactive Resume using Simile Exhibit

11 01 2010

Simile Exhibit is a JavaScript framework that enable a data sets to be visualize, sliced and embedded into any web page.  It is fun and easy to quickly see your data brought to life with all of Exhibit’s features.  Some of the included views are a basic table, timeline, map, gallery and more.  It is a great solution for data with less that 1,000 rows.  The data can be integrated in a number of ways, including Google Spreadsheets, JSon files, etc.

In addition to plugging the same data set into multiple visualizations, Exhibit provides Facet filters.  These automatically provide multiple choice filter list that dynamically modify the visualizations.

With all of these features and easy data integration I plugged it into my resume which I set up in a Google Spreadsheet.  First I came up with a basic table view (I applied a little extra CSS):

Garys Resume in an Exhibit Table

Then I added the map view to see all of the locations that I have worked at:

Garys Resume as Exhibit Map

And lastly I added a timeline view:

Garys Resume in an Exhibit TimelineAs you will notice on each of the pages there are a list of filterable facet list on the left and right side (this is configurable as well).

For more examples check out this Exhibit Examples 1Exhibit Examples 2, and Exhibit Examples 3.

So far I have only identified 3 real downsides to the software.

  1. First since the content is published through Javascript you cannot tell what the page is about by looking at its source code.  This will impact some spiders and search engines, when crawling, who cannot call the Javascirpt.  There are work-arounds as the content can be output as html, xml, tab delimited, json, etc, but the dynamic data and filtering is lost.
  2. One of the reasons the software is so easy to deploy is that the server side of Simile is hosted at MIT.  So there is no need to host the library on your site.  This can be limiting since you become dependent on MIT’s uptime and it may not be possible to deploy on an intranet, or with sensitive internal data.  The good news is that is a way to set up your own server, so it can be done, but looks to be a bit of work.
  3. Exhibit is not for large data sets.  It works well for small list that can be managed in a text file or Google Spreadsheet, but it is not something you would want to plug into a data warehouse.

Overall, Exhibit is a great way to interact and visualize data and allows you to be up and running quickly.  Check out my resume, some examples and go build your own.

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:

<?php
$Limit=10;
$request=”http://query.yahooapis.com/v1/public/yql?q=select%20farm%2C%20server%2C%20id%2C%20secret%2C%20title%20from%20flickr.photos.search(0%2C”.$Limit.”)%20where%20text%3D%22″.$Term.”%22%20&format=xml”;
sleep(1);
$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'];
$secret=$current['secret'];
$server=$current['server'];
$title=$current['title'];
$imageURL = ”http://farm”.$farm.”.static.flickr.com/”.$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.
colorful
While the program is running I call this page from processing by:

public void imageLoader(String term){
loading =0;
String[] lines;
lines = loadStrings(“http://www.PerlitaLabs.com/Kaleidoscope/PicturePull.php?term=”+term);
lineCount=lines.length;
for(i=0;i<lineCount;i++){
text(“.”, 50+(3*i), 20);
String[] pieces = split(lines[i], ‘|’);
println(pieces[0]);
println(pieces[1]);
loadedImages[i]= loadImage(pieces[1]);
fileCount++;
a=loadedImages[int(random(0,lineCount))]; }

You can see the code to the entire app at http://www.perlitalabs.com/Kaleidoscope/index.html

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





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: www.NewUsedMade.com.  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





Raphaël TagCloud\WordCloud

7 07 2009

I have a couple of ideas where I could really use a slick tag cloud or word clould.  If you are not familar with tag cloud, the basic concept is to  display some of the most frequent words in your content, with the size of the word driven by how the frequency of the word occuring.  It sounds simple enough and there are actually quite a few solutions.

As I was starting my search I mainly came across examples that were text or html based.  They were  inline words that just had the font size adjusted.  Unfortunately, I was looking for something more along the lines of Wordle.net.  At Wordle the tag clouds are like art.  There are colors, different rotations, etc.

Wordle Example

I decided that if you can’t find it, build it.  This is what brought me to the Raphaël JavaScript Library.  This has the lightweight footprint, it is supported by all of the browsers and can create some great visualizations.

The most difficult part of putting this together was in figuring out how to layout the words so that they did not overlap.  I am sure there are some really smart people that could come up with an algorithm that would accurately place the words, but I have to admit I resorted to trial and error.  Basically my code places a word and then sprials around the central coordinates to find free space to place the next word.

Raphaël Tag Cloud

So as you can see by my progress to date, there is still some work to get to great look of Wordle.  I think it is possible, with a little more work.  What doesn’t show in the screenshot is the fact that Raphaël has enabled an interactive tag cloud (the large blue Joker is because the cursor is over the text).  The combination of a great visual and interactivity should get me to my goal of a slick tag cloud.

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





Flash Killer – Raphaël – JavaScript Library

7 07 2009

Raphaël LogoI have been having too much fun with the Raphaël Vector JavaScript Library.  Previously I have posted about Processing and ProcessingJS and I think they both are great for data visualization and art.  I have been a bit hesitant to use them for more standard web applications.  The original Processing Language is Java based, so it must load an applet.  The Processing JS has limiations on Internet Explorer (really Microsoft’s gap).  Similar arguments hold true for Flash and Silverlight technologies that require downloads, plug-ins, and load times.  Raphaël has no such limitations… no plugins, works on all browsers and to top it off it is quick.

Raphaël Demos

It is worthwhile to visit the Raphaël Project Home Page to understand what it’s creator Dmitry Baranovskiy has given the world in a 120kb package.  There is basic image movement, manipulation, lots of animation and more.  For simple projects it can really take the place of tools like Flash.  One of the more sophisticated examples I came across was Space Invaders.

There are some other options out there, and it may be worthwhile to check out how they compare.  A good starting list is at http://sixrevisions.com/javascript/10-impressive-javascript-animation-frameworks/

Now I am off to work on my Raphaël Tag Cloud.

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





Update to Social Bookmark Link Builder

24 06 2009

I have been working on the Social Bookmark Link Builder I built a couple of weeks back. I have made some key improvements to features and the back-end. Now you can select the services you want to use, as well as the size of icons, etc. Go check it out: Social Bookmark Link Builder.

Building Social Bookmark Links

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