Imagine you need to filter D3 selection based on the associated data elements so that you can hide or show different subdatasets based on the user's input. D3 selection provides a filter function to perform this kind of data-driven filtering. In this recipe, we will show you how this can be leveraged to filter visual elements in a data-driven fashion.
Open your local copy of the following file in your web browser:
https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/data-filter.html .
The following example code shows how data-based filtering can be leveraged to highlight different visual elements based on its categorization:
<script type="text/javascript"> var data = [ // <-A {expense: 10, category: "Retail"}, {expense: 15, category: "Gas"}, {expense: 30, category: "Retail"}, {expense: 50, category: "Dining"}, {expense: 80, category: "Gas"...