Book Image

Data Visualization with D3 and AngularJS

By : Erik Hanchett, Christoph Körner
Book Image

Data Visualization with D3 and AngularJS

By: Erik Hanchett, Christoph Körner

Overview of this book

Table of Contents (16 chapters)
Data Visualization with D3 and AngularJS
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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()) ? input : input.filter(function(d){
      return d.x >= date;
    });
  };
})

.filter('lte_date', function(){
  return function(input, raw_date){
    var date = new Date(raw_date);
    return isNaN(date.getTime()) ? input...