Saturday, January 12, 2008

 

Searching, sorting, filtering... all client side with Exhibit

Sometimes you just run into a piece of technology that is so cool, that you wish you could make up a way to use it in a professional setting. Exhibit from the Simile project at MIT is such a technology. It brings a certain class of web application to the masses. Displaying data in compelling user interfaces that allow for searching, sorting, filtering, etc. used to be the domain of database backed web applications. Not anymore.

Exhibit is basically a very nice javascript library. It can be used to create pages on the client based on data files and templates (nicely separated from each other). The UI is created by coding up templates in HTML.

The sample

The sample I made: last summer, I went on a bicycling tour with my girlfriend visiting all prehistoric dolmens in the Netherlands. There are 53 of them and then a small number of fakes. At each dolmen we made picture and we logged the location with our GPS receiver. Back home, I created a data file (this is JSON formatted) of all dolmens and whipped up an Exhibit view page for the set. Compared with the time this took (of course I spent some time reading docs), the results are very impressive.

Noteworthy details

  • This page is pure flat html and javascript. No server-side code, no database. No prgramming done by me.
  • Note that when you create a filter in the thumbnail view (say: show only dolmens rated ** or ***), and then you switch from the thumbnail view to the Google Maps view, you selection remains active.
  • Some properties cancontain multiple values. You don't have to specify this in advance, Exhibit just gracefully deals with the fact that multiple values are found in the data. For example: the dolmen D26 is near two villages, Borger and Drouwen. In the filter list, you'll see Drouwen listed as having 3 nearby dolmens and Borger as having 2. If you select them both, the view will display only 4 hits (because one is near both). In the 'Photos' view, you will see the property rendered as 'Drouwen and Borger'.
  • When a filter is applied on one property (i.e. 'Number of Stars'), you will see the available options and subtotals in the other filters (i.e. 'Close to')

    • Other demos

    On the Simile site, a load of other demos (some extremely nice, showing graphical plots of data) can be viewed. Go check them out and read the documentation and tutorials.


    # posted by Teun @ 7:34 PM
    Comments: Post a Comment

    Links to this post:

    Create a Link



    << Home

    This page is powered by Blogger. Isn't yours?