Downloading Crossfilter.js

- [Instructor] We can download Crossfilter from GitHub and if we look, we can see there are two likely candidates here, one is called crossfilter.js and the other one is crossfilter.min.js. They actually contain exactly the same code. One of them is sort of legible and laid out like normal Javascript and the other one is compressed and all the whitespace has been removed. We're going to use the standard one so that we can have a little look inside it and see what it does.

So we're going to copy and paste into Atom and save into the root of your crossfilter folder and we'll call it crossfilter.js. Let's take a quick look at the code. You can see it's 1400 lines long, so it's a fairly small file. Unlike other Javascript libraries, like D3 and dc, Crossfilter is no longer actively developed. The latest version was a year ago now, so you should be able to use this file for a pretty long time.

The file as a whole is basically full of functions and taken together, the functions define new terms, a bit like a new language. For example, this function defines a crossfilter object with five properties: add, remove, dimension, groupAll, and size. We're going to be looking at these commands shortly. So this file defines what the crossfilter() command does, and then, say, the groupAll command as well, and various other terminology we're going to use.

The file also places all of the commands subordinate to the term Crossfilter to prevent any confusion. To phrase that formally, as the Crossfilter API does, you can say that everything in Crossfilter is scoped under the crossfilter namespace, and it just prevents confusion. So if you were to create a groupAll command in pure Javascript, it wouldn't conflict with Crossfilter's groupAll function. Now that we have Crossfilter downloaded, we need to make a template.html file and pull the Crossfilter file into our HTML.

The template.html file should look just like the one we saw in the earlier chapter. It should have a DOCTYPE declaration, html tags, head and body tags. The body tags can be empty. The head tags should contain a character set and title. And once you've done that, we're going to add script tags to pull in our Crossfilter file. So we say type is Javascript, because the Crossfilter file has an extension of .js, it's just a Javascript file.

And then we give it the location with the source property, src. And because we've saved crossfilter.js into the root, we have to go up a couple of levels before we can reach the file. And now we're good to go.