Data Visualization with D3 and AngularJS

Interactive filters

Let's switch back to AngularJS for a section. To be precise, let's take a look at filters. Let's implement two filters that compare Date objects and returns the elements of an array that are greater than or equal to a specific date (gte_date) and less than or equal to a specific date (lte_d). First, we need to add a filter via the .filter(name, filter_func) function to the AngularJS chart component. The filter_func argument needs to return a function in the shape of function(arg1, arg2, …), where arg1 is usually the input array that finally returns the filtered array. Okay, let's implement this:

/* src/chart.js */ .filter('gte_date', function(){ return function(input, raw_date){ var date = new Date(raw_date); return isNaN(date.getTime()) ...