Learn what Crossfilter is, and how it can be used to power interactive web graphics.
- [Instructor] Crossfilter is a JavaScript library that allows you to filter and group data on the fly. It's particularly useful with web-based dashboards when you want interaction with one chart to update what's shown on all the other charts. In fact, Crossfilter powers another JavaScript library called dc.js which has been used to build this dashboard. And as you can see, clicking on one chart filters all of the others. This is the Crossfilter home page. And if we scroll down, it also shows web graphics.
But beware, Crossfilter doesn't draw graphs and charts for you, it only organizes the data behind the graphs. The charts shown here were made with another JavaScript library again, called D3, but the heavy lifting on the data was done by Crossfilter behind the scenes. Here we have a dataset showing all 231,000 flights, and the data here is taken from 2001. Each of these rows, by the way, is called a fact in Crossfilter terminology. We can see various aspects of the data in each of these charts, the time of the day, the date, how much delay there was on the flight, and the length of the flight in miles.
Each aspect is a dimension in Crossfilter speak. Now let's say we just want to look at flights that were significantly late. We could add a filter on arrival delay there, and then we could filter again for long distance flights only. And you can see that now that we only have eight rows returned of our original 230,000. The charts for time and date look a bit different now. They're only showing the dates and times of day for the flights that have been returned. So each chart here is a coordinated view of the same dataset.
One chart represents one aspect of the data, and filters applied to one chart affect the data shown on all the others. In practical terms, Crossfilter is a single file of code written in JavaScript. We can see it's about 1400 lines long. Web developers pull this file into their webpage, and they can then use a new set of commands that they couldn't use before. Most of what you can achieve with Crossfilter can be done with just JavaScript, but Crossfilter does it faster. Crossfilter was originally developed by Mike Bostock for a company called Square, and then open sourced under the Apache License.
The course assumes that you have access to a database of your work. This might be through a reporting system, or direct access. If you don't have access to a database or a server, you can still follow the course by downloading software and sample data.
Released
1/9/2017- Downloading Crossfilter
- Cross-filtering data
- Creating dimensions
- Grouping data
- Filtering by range and function
- Removing matching records
Share this video
Embed this video
Video: What is Crossfilter?