How to use Azure Search with D3.js to Build Interactive Data Visualizations

Helping users visualize data can have a big impact on improving the overall user experience of a web or mobile application. With Azure Search, a primary goal is to help developers build amazing search experiences, but if your users are not able to visualize the results returned, then much of this experience can be lost.Today, I want to talk about one of my favorite visualization tools, called D3.js. This is an open source JavaScript library that makes it really easy to apply impressive views to your data.   Visualization can be as simple as a set of bar charts, all the way to mapping and complex interactive diagrams such as the map of US airports created by Mike Bostock, shown in the image to the right. Here are a few examples that I have used in the past that really show the extensive capabilities of this library.

D3 Azure Search Interactive Visualization Map

In this post, I’d like to show you how to leverage Azure Search along with D3, to let your users query Azure Search and then explore the results of their search queries visually. The goal will be to build a JavaScript web page that searches through an Azure Search Index based on data provided by data.gov, consisting of the count of 1.8M male and female baby names between the years 1880-2013. From this, you will be able to search for names, filtered by year and then see versions of that name within a D3.js word cloud based on the most popular names in that timeframe where a larger font indicates increased popularity (as shown below). You can see a live version of this page here where I am happy to see that “Liam” was one of the most popular names for 2013.

Azure Search D3.js Word Cloud

Getting Started Notes

Before I get started, there are a few things I would like to point out:

1. The source code for this sample can be found here on github, and an online running version of the sample can be found here. Please take a look through each of these to get an idea of how the sample works.
2. In order to allow a JavaScript application to call Azure Search directly, you will need to enable CORS for the index you are using to allow for cross domain calls. Details on this can be found here.

Building a JavaScript D3.JS Application using Azure Search

Next, let’s walk through the code.

JavaScript Libraries

Beyond the references to the JQuery and BootStrap libraries I want to highlight the following two files:

• d3.min.js: This is the core library used for all D3 visualizations
• d3.layout.cloud.js: This is a library created by Jason Davies that leverages the d3.min.js library to create the word cloud

JavaScript Code

In the JavaScript code, notice the following points.

• var apiKey: This variable defines a key that will be used to authenticate the queries to Azure Search. Since this is a JavaScript based application that runs purely client side and does not have a server side component as you would see with ASP.NET MVC or PHP, we need to store this key in this file. It is highly recommended that you use Query keys rather than Admin keys to limit the privileges of the user. Although, even with Query keys, the potential for Denial of Service attack exists, so make sure you’re only handing out the app to trusted users.
• functionSearch(): This is the function that makes the call to Azure Search via an Ajax cross domain call using the “text” and “year” parameters as specified by the user. The URL that is generated uses a number of parameters including:
  • $orderby=count+desc: This will return the results from Azure Search ordered by the most popular names to the least.
  • $top=100: This limits the search results to a maximum of 100 baby names.
  • $select=firstName,count: n This limits the results to only include the firstName and count fields.
  • &search=…*: This passes the full text string the user types in as part of the search and also appends an * to do a prefix style search. For example, if the user searches for John, we might also return the results Johnny.
  • $filter=year+eq…: This takes the year specified by the user and makes sure that only results where the year field equals (eq) this value.
• .done(function (response): Once the Ajax calls to Azure Search are complete, a JSON set of results is returned. Unfortunately, this JSON document is not in the exact format that D3 is expecting, so we need to iterate through the results and push the data into a new JSON variable called d3JSON that is expecting a “text” and “size” array of variables. Notice that the size is calculated by comparing the maximum and minimum number of names to come up with a value for the size of the font displayed in the word cloud.
• d3.layout.cloud().size([600, 600]): Finally after this new d3JSON variable is created, it is passed to d3 where the word cloud is generated.

This shows just one example of how to take results from Azure Search and display them in a D3 chart, however, the technique is virtually identical, regardless of the chart you wish you create.

If you end up creating a D3 visualization that you like and are open to sharing it, please let me know (Twitter: @liamca), as I would love to create a gallery of these for other people to see and leverage.

The source code for this sample can be found here on github, and an online running version of the sample can be found here.

Liam