Transition is weirdly broken. Refresh works.

Community Help
1

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

This is a video showing it: 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.

2

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!

ps: Olá! Eu fiz algo parecido usando dados do https://covid.saude.gov.br/ state level. Where did you get your city level data?

3

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

Edit: I tried a smaller version and worked flawlessly! So it seems there is something wrong in scaling…

4

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.

  return mutableArray.map(e=> e.sort((a,b) => `${a.state}${a.city}`.localeCompare(`${b.state}${b.city}`)));

Thanks for the data source.

5

I just made a smaller version and worked flawlessly… So it is really weird the bigger version doesn’t work.

I’m going to try what you did.

1 Like
6

HEY, I’m not sure if it was your code or something else, but it is really working now!!! Thanks!!!

7

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:

      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));
        });
2 Likes
8

Thanks @mbostock!!!