Archive for the ‘JQuery’ Category

Easy Hierarchical Faceting and display…

Saturday, February 15th, 2014

Easy Hierarchical Faceting and display with Solr and jQuery (and a tiny bit of Python) by Grant Ingersoll.

From the post:

Visiting two major clients in two days last week, each presented me with the same question: how do we better leverage hierarchical information like taxonomies, file paths, etc. in LucidWorks Search (LWS) (and Apache Solr) their applications, such that they could display something like the following image in their UI:


Since this is pretty straight forward (much of it is captured already on the Solr Wiki) and I have both the client-side and server side code for this already in a few demos we routinely give here at Lucid, I thought I would write it up as a blog instead of sending each of them a one-off answer. I am going to be showing this work in the context of the LWS Financial Demo, for those who wish to follow along at the code level. We’ll use it to show a little bit of hierarchical faceting that correlates the industry sector of an S&P 500 company with the state and city of the HQ of that company. In your particular use case, you may wish to use it for organizing content in filesystems, websites, taxonomies or pretty much anything that exhibits, as the name implies, hierarchical relationships.

Who knew? Hierarchies are just like graphs! They’re everywhere! 😉

Grant closes by suggesting Solr analysis capabilities for faceting would be a nice addition to Solr. Are you game?

Spatial Search With Apache Solr and Google Maps

Sunday, July 7th, 2013

Spatial Search With Apache Solr and Google Maps by Wern Ancheta.

From the post:

In this tutorial I’m going to show you how to setup spatial search in Apache Solr then were going to create an application which uses Spatial searching with the use of Google Maps.

You will also learn about geocoding and JQuery as part of this tutorial.

For the purposes of this tutorial were going to use Spatial search to find the locations which are near the place that we specify.

If you have a cellphone contract or geolocation you can find who lives nearby. 😉

Assuming you have that kind of data.


Saturday, June 8th, 2013


From the webpage:

JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

Whatever your source of data, cellphone location data, user observation, etc., rendering it to a geographic display may be useful.

MindMup MapJs

Tuesday, April 30th, 2013

MindMup MapJs

From the webpage:

MindMup is a zero-friction mind map canvas. Our aim is to create the most productive mind mapping environment out there, removing all the distractions and providing powerful editing shortcuts.

This git project is the JavaScript visualisation portion of MindMup. It provides a canvas for users to create and edit mind maps in a browser. You can see an example of this live on

This project is relatively stand alone and you can use it to create a nice mind map visualisation separate from the MindMup Server.

Do see the live demo at:

It may not fit your needs but it is a great demo of thoughful UI design. (At least to me.)

Could be quite useful if you like The Back of the Napkin : Solving Problems and Selling Ideas with Pictures by Dan Roam.

I recently started reading “The Back of the Napkin,” and will have more to report on it in a future post. So far, it has been quite a delight to read.

I first saw this at JQuery Rain under: MindMup MapJs : Zero Friction Mind Map Canvas with jQuery.

typeahead.js [Autocompletion Library]

Friday, February 22nd, 2013


From the webpage:

Inspired by‘s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library.


  • Displays suggestions to end-users as they type
  • Shows top suggestion as a hint (i.e. background text)
  • Works with hardcoded data as well as remote data
  • Rate-limits network requests to lighten the load
  • Allows for suggestions to be drawn from multiple datasets
  • Supports customized templates for suggestions
  • Plays nice with RTL languages and input method editors

Why not use X?

At the time Twitter was looking to implement a typeahead, there wasn’t a solution that allowed for prefetching data, searching that data on the client, and then falling back to the server. It’s optimized for quickly indexing and searching large datasets on the client. That allows for sites without datacenters on every continent to provide a consistent level of performance for all their users. It plays nicely with Right-To-Left (RTL) languages and Input Method Editors (IMEs). We also needed something instrumented for comprehensive analytics in order to optimize relevance through A/B testing. Although logging and analytics are not currently included, it’s something we may add in the future.

A bit on the practical side for me, ;-), but I can think of several ways that autocompletion could be useful with a topic map interface.

Not just the traditional completion of a search term or phrase but offering possible roles for subjects already in a map and other uses.

If experience with XML and OpenOffice is any guide, the easier authoring becomes (assuming the authoring outcome is useful), the greater the adoption of topic maps.

It really is that simple.

I first saw this at: typeahead.js : Fully-featured jQuery Autocomplete Library.

jQuery Rain

Monday, February 4th, 2013

jQuery Rain

I happened across jQuery Rain today and thought it worth passing on.

Other web interface sites that you would recommend?

Thinking if you can look at an interface and think, “topic map,” then the interface needs work.

The focus of any interface should be delivery of content and/or capabilities.

Including topic map interfaces.

Javascript Plugins To Handle Keyboard Events – 18 Items

Friday, January 11th, 2013

Javascript Plugins To Handle Keyboard Events – 18 Items by Bogdan Sandu.

From the post:

Users want to see pages really quickly and avoid scrolling a site too much or using the mouse for various events that can be done easier in another way. In order to increase the functionality of a site many web designers use keyboard events so that the users’ experience on the site is better and more enjoyable by navigating easier and seeing more content faster. Of course, this is not the only reason why a web designer would add a jQuery plugin to handle keyboard events on a site, there are other.

Eighteen plugins that can help you with keyboard events in a web interface.

I think the case is fairly compelling for keyboard shortcuts but I type in my sleep. 😉

Your mileage, and that of your users, may vary.

Test with users, deploy and listen to user feedback.

(The opposite of where insiders design, then deploy and user feedback is discarded.)

Neat jQuery Plugins…Customize the Search Box [Assisted TM Authoring?]

Tuesday, November 27th, 2012

Neat jQuery Plugins That Will Help You Customize The Search Box

From the post:

A search box is an important element of a site and for some websites it is the most used one. It is often neglected even though it is really useful for a visitor, but when it isn’t neglected, it is customized according to the site’s needs with visual elements and really good coding.

They can be simple with just design customizations, but with the help of jQuery plugins they can be quite complex and offer a lot of extra functionality that makes searching easier. Delivering to your visitor what he is searching is really important and you should make this function easier for them.

Useful for customizing a search box but shouldn’t autocomplete be useful for form based authoring as well?

Say you know a “name” but don’t remember the subject identifier for that subject. You type in the name and one or more subject identifiers are presented as a pick list for subject you may have in mind. Choosing a subject identifier displays what is known about that subject in map to allow you to self-proof your choice of subject identifier.

I am sure there are other uses for autocomplete in topic map authoring but that is the one that comes to mind.


Parsing Wikipedia Articles with Node.js and jQuery

Friday, August 31st, 2012

Parsing Wikipedia Articles with Node.js and jQuery by Ben Coe.

From the post:

For some NLP research I’m currently doing, I was interested in parsing structured information from Wikipedia articles. I did not want to use a full-featured MediaWiki parser. WikiFetch Crawls a Wikipedia article using Node.js and jQuery. It returns a structured JSON-representation of the page.

Harvesting of content (unless you are authoring all of it) is a major part of any topic map project.

Does this work for you?

Other small utilities or scripts you would recommend?

I first saw this at: DZone.


Wednesday, July 4th, 2012


From the post:

JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

I saw this at Pete Warden’s Five Links, along with the Plane Networks.

Top 50 JavaScript, jQuery Plugins and Tutorials From 2011

Thursday, December 29th, 2011

Top 50 JavaScript, jQuery Plugins and Tutorials From 2011

From the post:

jQuery is amazing as you can find plugins to accomplish almost anything you want. It makes your work easy and quick. And Javascript has always been a favorite of people. we have a list of top jQuery, Javascript plugins and tutorials that will help you a lot and will definitely make your life easier.

I hope you would find these apps useful. It includes apps that will let you create loading animation, which help make your website responsive to user interaction as they would know that the server is processing their request. Then we have apps that will help you optimize your website for mobile phones. We also have some awesome Javascript color picker plugins and JavaScript Games too. Not only that, we have some really cool Javascript Experiments and jQuery tutorials for you, which would help you learn tricks that you might not have known before. So what are you waiting for?! Check them out!

You will have to let me know about the optimizing the web interface for a topic map on a cell phone. Some of the others? I will try to report back to you. 😉

Subway Map Visualization jQuery Plugin

Sunday, December 18th, 2011

Subway Map Visualization jQuery Plugin by Nik Kalyani.

From the post:

I have always been fascinated by the visual clarity of the London Underground map. Given the number of cities that have adopted this mapping approach for their own subway systems, clearly this is a popular opinion. At a conference some years back, I saw a poster for the Yahoo! Developer Services. They had taken the concept of a subway map and applied it to create a YDN Metro Map. Once again, I was in awe of the visual clarity of this map in helping one understand the various Yahoo! services and how they inter-related with each other. I thought it would be awesome if there were a pseudo-programmatic way in which to render such maps to convey real-world ecosystems. A few examples I can think of:

  • University departments, offices, student groups
  • Government
  • Open Source projects
  • Internet startups by category

More examples on this blog: Ten Examples of the Subway Map Metaphor.

Fast-forward to now. Finally, with the advent of HTML5 <canvas> element and jQuery, I felt it was now possible to implement this in a way that with a little bit of effort, anyone who knows HTML can easily create a subway map. I felt a jQuery plugin was the way to go as I had never created one before and also it seemed like the most well-suited for the task.

A complete step-by-step example follows and is the sort of documentation that while difficult to write, saves every user of the software time further down the road.

The plug-in has any number of uses, a traditional public transportation map for your locale or as used by the author, a map that lays out a software project.

If you use this for a software project, you will need to make your own icons for derailment, track hazards and the causes of the same. 😉

Decoding jQuery

Saturday, December 17th, 2011

Decoding jQuery by Shi Chuan.

From the introduction:

Open source is not open enough. To open the open source, in the Decoding jQuery series, we will break down every single method in jQuery, to study the beauty of the framework, as an appreciation to the creative geniuses behind it.

What looks like a promising series on jQuery!

As you can tell from my recent posts on Nutch, I hope this coming year will see more implementation/application side posts.

jQuery UI Autocompletion with Elasticsearch Backend

Friday, September 30th, 2011

jQuery UI Autocompletion with Elasticsearch Backend by Gerhard Hipfinger.

From the post:

I recently discovered Elasticsearch is an incredible easy search engine solution for JSON documents. As we heavily use CouchDB in our product development Elasticsearch and CouchDB are a perfect match. Even more since Elasticsearch comes with a great out of the box connection for CouchDB! So the next step is to use Elasticsearch as backend for a jQuery UI autocompletion field.

Your users may like some form of autocompletion in their topic map interface. If nothing else, it is amusing how far they land from what the user is looking for.

BTW, read the comments on this post.

CouchDB jQuery Plugin Reference

Sunday, September 11th, 2011

CouchDB jQuery Plugin Reference by Bradley Holt.

I’ve had a difficult time finding documentation on the CouchDB jQuery plugin that ships with CouchDB. So, I’ve decided to create my own reference and share it with you. This should cover almost the entire CouchDB API that is available through the version of the plugin that ships with CouchDB 1.1.0.

What’s your “favorite” lack of documentation?


Saturday, June 4th, 2011


From the website:

A JQuery plugin to create google maps with advanced features (overlays, clusters, callbacks, events…)

Is this a pathway to marry topic and google maps?