Data Visualization with D3 4.x Cookbook - Second Edition

Using transition filter

Under some circumstances, you might find it necessary to selectively apply transition to a subset of a certain selection. In this recipe, we will explore this effect using data-driven transition filtering techniques.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/filtering.html

How to do it...

In this recipe, we will move a set of div elements (or boxes) across the web page from right to left. After moving all the boxes to the left, we will selectively move only the boxes that are marked as Cat back, so they won't fight each other. Let's take a look at the following code:

<script type="text/javascript"> var data = ["Cat", "Dog", ...