transitions.Rmd

# Transitions <i class="far fa-paper-plane"></i>

<script src="https://d3js.org/d3.v7.js"></script>

Read *IDVW2*, Chapter 9: transitions section (pp. 158-178)

<svg width="300" height="200">
	<rect x="0" y="0" width="300" height="200" fill="lightblue"></rect>
	<circle cx="150" cy="40" r="15" fill="red"></circle>
	<circle cx="150" cy="80" r="15" fill="red"></circle>
	<circle id="henry" cx="150" cy="120" r="15" fill="red"></circle>
	<circle class="apple" cx="150" cy="160" r="15" fill="red"></circle>
</svg>

## Examples

Open Developer Tools and try in the Console:

``` js
d3.select("svg")
  .selectAll("circle")
  .transition()
  .duration(2000)
  .attr("cx", "275");
```  

``` js
d3.select("svg")
  .selectAll("circle")
  .transition()
  .duration(2000)
  .attr("cx", "25")
  .attr("fill", "green");
```  
  
## Do this

Run simultaneous transitions on *different* selections:

``` js
d3.select("svg").selectAll("circle#henry").transition()
    .duration(2000).attr("cx", "275");
d3.select("svg").selectAll("circle.apple").transition()
    .duration(2000).attr("cx", "25");
```

Run sequential transitions on the same selection in one chain:

``` js
d3.select("svg").selectAll("circle")
  .transition().duration(2000).attr("cx", "275")
  .transition().duration(2000).attr("cx", "25");
```

Transition from *something* to *something*:

``` js
d3.select("svg").append("circle")
    .attr("cx", "200")
    .attr("cy", "100")
    .attr("r", "5")
    .attr("fill", "lightblue")
    .transition()
    .duration(4000)
    .attr("r", "25")
    .attr("fill", "blue");
```    

## Not this

DO NOT run two transitions on the same selection at the same time (see p. 172).

(What works in the Console *will not work* in a script.)

``` js
d3.select("svg").selectAll("circle").transition()
    .duration(2000).attr("cx", "250");
d3.select("svg").selectAll("circle").transition()
    .duration(2000).attr("cx", "75");
```

DO NOT transition from *nothing* to something:

``` js
d3.select("svg").append("circle")
    .transition()
    .duration(2000)
    .attr("cx", "200")
    .attr("cy", "100")
    .attr("r", "25")
    .attr("fill", "red");
```    

DO NOT store a selection with a transition (it's no longer a selection with the transition):

Try this:

``` js
const circ = d3.select("svg")
  .selectAll("circle")
  .data([50, 95, 100, 200, 50, 150, 250])
  .enter()
  .append("circle")
    .attr("cx", d => d)
    .attr("cy", "100")
    .attr("fill", "blue")
    .attr("r", "0")
    .transition()
    .duration(2000)
    .attr("r", "25");
```    

And then this:

``` js
circ.attr("fill", "green");
```

DO NOT put a transition before a merge:

``` js
d3.select("svg")
  .selectAll("circle")
  .transition()
  .duration(2000)
    .attr("cx", "300")
  .merge("oldcirc")
    .attr("fill", "green");
```

BE AWARE that not everything transitions (for example, text doesn't.)


## Strategy

**Example 1**

Think carefully about what you want to happen, and then decide what goes before and after the transition.

<svg id="transitions"></svg>
<p></p>
<button type="button" onclick="add()">Add bar</button>
<button type="button" onclick="remove()">Remove bar</button>
<script src="scripts/bar_transition.js"></script>

Plan what you want to happen:

1. new bars appear on the right side with orange fill  

2. new bars slide into place from the right as old bars are repositioned  
3. new bars transition to blue  

4. removed bars transition to right before disappearing

## Exercise <i class="fas fa-dumbbell"></i>: Bar chart with transitions

Download and make changes to [bar_transition.html](https://raw.githubusercontent.com/jtr13/d3book/main/code/bar_transition.html){target="_blank"} in a text editor so the transitions work as shown below. 


**Solution**

[code for download](https://raw.githubusercontent.com/jtr13/d3book/main/solutions/bar_transition_solution.html){target="_blank"}

[rendered version](solutions/bar_transition_solution.html){target="_blank"}




Further reading: [Working with Transitions](https://bost.ocks.org/mike/transition/){target="_blank"}.