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.