# Transition is weirdly broken. Refresh works.
**URL:** https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057
**Category:** Help
**Created:** [April 10, 2020, 6:45pm UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057 "2020-04-10T18:45:38Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@bernaferrari](https://talk.observablehq.com/u/bernaferrari)
#### Post date: [April 10, 2020, 6:45pm UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/1 "2020-04-10T18:45:38Z")
I’m trying to adapt the COVID-19 map for my country and state, but the transitions are completely broken and I don’t know why. My code seems similar to others, yet it isn’t working. Could someone please shed some light?
This is the URL: [https://observablehq.com/@bernaferrari/brazil-coronavirus-daily-cases-map-covid-19-not-working](https://observablehq.com/@bernaferrari/brazil-coronavirus-daily-cases-map-covid-19-not-working)
This is a video showing it: [https://twitter.com/bernaferrari/status/1248679074198958080](https://twitter.com/bernaferrari/status/1248679074198958080)
This is what I’ve tried:
1. Duplicate data from the previous day when there isn’t new data on the following day. The original csv only contains the changes.
2. Add zero confirmed values from all cities all the way back.
Nothing worked. Could someone help me? It is especially weird since tapping in the play button works, only the slider/transition is broken.
---
### Author:  [@radames](https://talk.observablehq.com/u/radames)
#### Post date: [April 10, 2020, 9:32pm UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/2 "2020-04-10T21:32:15Z")
Hi,
I had some similar problem,
Just make sure your data is sorted. Also avoid the mutables on your start cell. Otherwise for every new update Observable would regenerate everything. That the reason there is an update function that will take advantage of your selection.
It looks cool!
> **[Comparing ‘Brazil Coronavirus Daily Cases Map (COVID-19) (not working | need...](https://observablehq.com/compare/4285b2e858c4262e@1212...e8a0140ba7ad5f82@1224)**
>
> A comparison of two Observable notebooks.
ps: Olá! Eu fiz algo parecido usando dados do [https://covid.saude.gov.br/](https://covid.saude.gov.br/) state level. Where did you get your city level data?
> **[Brazil Daily Coronavirus Map (COVID-19)](https://observablehq.com/@radames/brazil-daily-coronavirus-map-covid-19)**
>
> An Observable notebook by Radamés Ajna.
---
### Author:  [@bernaferrari](https://talk.observablehq.com/u/bernaferrari)
#### Post date: [April 11, 2020, 12:09am UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/3 "2020-04-11T00:09:27Z")
I did what you told me to do, and it improved, but it is still wrong (before it was randomly wrong, now it is wrong in the same spots! Only in the last frame it is right!). Could you check my code (or how I’m sorting, in `data`) to see if there is anything weird?
Regarding data, it came from here: [https://brasil.io/dataset/covid19/caso?format=csv](https://brasil.io/dataset/covid19/caso?format=csv)
Edit: I tried a smaller version and worked flawlessly! So it seems there is something wrong in scaling…
---
### Author:  [@radames](https://talk.observablehq.com/u/radames)
#### Post date: [April 11, 2020, 3:46am UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/4 "2020-04-11T03:46:45Z")
I’m not sure what’s going on inside the for loop. But if you rather sort you array before returning seems to be working fine. Moving your sorting code outside the for loop.
```auto
return mutableArray.map(e=> e.sort((a,b) => `${a.state}${a.city}`.localeCompare(`${b.state}${b.city}`)));
```
Thanks for the data source.
---
### Author:  [@bernaferrari](https://talk.observablehq.com/u/bernaferrari)
#### Post date: [April 11, 2020, 3:47am UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/5 "2020-04-11T03:47:59Z")
I just made a smaller version and worked flawlessly… So it is really weird the bigger version doesn’t work.
> **[Paraná Coronavirus Daily Cases Map (COVID-19) / Bernardo Ferrari / Observable](https://observablehq.com/@bernaferrari/parana-coronavirus-daily-cases-map-covid-19)**
>
> The magic notebook for visualization.
I’m going to try what you did.
---
### Author:  [@bernaferrari](https://talk.observablehq.com/u/bernaferrari)
#### Post date: [April 11, 2020, 3:53am UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/6 "2020-04-11T03:53:45Z")
HEY, I’m not sure if it was your code or something else, but it is really working now!!! Thanks!!!
---
### Author:  [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [April 11, 2020, 3:55am UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/7 "2020-04-11T03:55:14Z")
It looks to me like the problem is that the data is reordered from day to day. You probably want to specify a key for your data join so that the data for a given city is assigned reliably to the same circle. For example:
```auto
bubble
.data(data[i], d => [d.city, d.state])
.call(b => {
b.transition(t)
.attr("fill", d => colorScale(+d.confirmed))
.attr("r", d => radius(+d.confirmed));
});
```
---
### Author:  [@bernaferrari](https://talk.observablehq.com/u/bernaferrari)
#### Post date: [April 11, 2020, 3:55am UTC](https://talk.observablehq.com/t/transition-is-weirdly-broken-refresh-works/3057/8 "2020-04-11T03:55:43Z")
Thanks @mbostock!!!