# Are animated transitions possible using D3's General Update Pattern?

**URL:** <https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812>\
**Category:** Help\
**Created:** [May 25, 2018, 8:25pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812 "2018-05-25T20:25:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![clhenrick](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/clhenrick/32/242_2.png) [@clhenrick](https://talk.observablehq.com/u/clhenrick)\
**Post date:** [May 25, 2018, 8:25pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812/1 "2018-05-25T20:25:11Z")

</div>

Hi, I’m attempting to achieve an animated transition with a beeswarm plot in Observable using D3’s general update pattern. I’ve [used this example as a starting point](https://beta.observablehq.com/@jashkenas/visualisation-of-contact-networks) but have so far been unsuccessful.

Here’s a link to my current code: [https://beta.observablehq.com/d/43c11a3ecf359efc](https://beta.observablehq.com/d/43c11a3ecf359efc)

---

<div class="post-metadata">

**Author:** ![magjac](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/magjac/32/525_2.png) [@magjac](https://talk.observablehq.com/u/magjac)\
**Post date:** [May 25, 2018, 9:41pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812/2 "2018-05-25T21:41:55Z")

</div>

Yes, but you’re missing a merge. See [https://beta.observablehq.com/d/bf2b4ae6a921e382](https://beta.observablehq.com/d/bf2b4ae6a921e382). The transitions work, but not always. Sometimes I get “TypeError: el.circles.data is not a function” which also happens with your unmodified code. Hopefully you can figure out why. My time’s up for today.

---

<div class="post-metadata">

**Author:** ![clhenrick](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/clhenrick/32/242_2.png) [@clhenrick](https://talk.observablehq.com/u/clhenrick)\
**Post date:** [May 25, 2018, 9:56pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812/3 "2018-05-25T21:56:02Z")

</div>

thanks I’ll take a look at your modification

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [May 28, 2018, 6:51pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812/4 "2018-05-28T18:51:00Z")

</div>

I’m still not sure exactly why your original didn’t work, but here is my shot at it:

> **[Observable](https://observablehq.com/d/36feaf97178ca1fd)**
>
> The magic notebook for visualization.

---

<div class="post-metadata">

**Author:** ![clhenrick](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/clhenrick/32/242_2.png) [@clhenrick](https://talk.observablehq.com/u/clhenrick)\
**Post date:** [May 29, 2018, 8:01pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812/5 "2018-05-29T20:01:49Z")

</div>

I’ll add that @Fil came up with this solution as well:

> **[Beeswarm Plot General Update Pattern test](https://observablehq.com/d/9c6b96d7b20dbdae)**
>
> An Observable notebook by Fil.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [May 29, 2018, 8:45pm UTC](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812/6 "2018-05-29T20:45:01Z")

</div>

You might want to use radio buttons / slider, instead of select menus.

> **[General Update Pattern in Observable](https://observablehq.com/d/8d458fd6d3dca0fa)**
>
> An Observable notebook by Jacob Rus.