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
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
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:
- 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.
Next, let’s walk through the code
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
- function Search(): 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