JavaScript

I’ve been working with ElasticSearch off and on for the past year, and recently I’ve done a lot of work using Backbone.js to build interactive elements for web pages. Time to combine them together into a modular library: es-backbone.js.

Faceted search is one of the more powerful aspects of ElasticSearch. For es-backbone I was inspired by Karel Minarik’s very cool data visualization example. Initially I started from his implementation, then veered away from Protovis to use jQuery Flot for the charting when I realized my Javascript graphics abilities were not up to making use of Protovis. Flot makes it very fast to build and customize charts.

But managing all the data that comes back with your faceted search results, displaying it for the user, and allowing them to interact with the data and filter it further is also a bit of a headache. Using Backbone to keep a model of the current query the user is doing and another model of the search results helps keep the data well-organized and easy to update. By creating highly modular Backbone Views I can quickly customize a search page depending on what fields the data contains and how we want to display it.

I don’t have any public ElasticSearch data for a good demo, so a screenshot will have to do:

Each part of the page is a separate Backbone View, which allows you to customize the page very quickly based on what data you have. Think that pie chart of authors is too busy, replacing it with a list of the top sites (similar to the tags list) is only a few lines of code. Currently the library has Views for displaying facets as:

• A pie chart of terms or ranges
• A list of terms (with counts and percentages)
• A timeline of dates (which auto switches scales between months, weeks, and days )

All of these views will re-filter your results when you click on the pie/chart/list so you can drill down into your search results. And I used Select2.js in tagging mode to make it easy to add and remove filters. I think the interaction is pretty cool, and wish I had some live public data to show it off on.

The library definitely allows new sites to be built very fast. Once the data is indexed, you can build a site in less than an hour (my last one took 35 min). I’ve released it on github in the hopes that others will find it useful (patches welcome). I’ve included a simple example which you can grep through for “TODO” to find the parts you need to edit to customize for your own application.