Slider not in sync with animation and only work on certain values


#1

Hello,
I’m new to using plotly. I animated scattermapbox that contains restaurants in Toronto according to the ratings given (1, 1.5, 2, 2.5, …, 5). I have also made a slider to correspond to the rating it was given. My scattermapbox (9 frames in total) is animating correctly incrementing every 0.5 starting from 1. However, when I drag my slider manually, the scattermapbox only redraws at 2.5,3.5,4.5. I would want the scattermapbox to redraw at every 0.5 increment from 1 to 5. I have looked through the resources online and followed the gapminder example @ https://plot.ly/python/gapminder-example/
but cannot get it to work.

Attached is the link to my notebook
https://plot.ly/~DesciuitV/61

Please note that the slider bar appears to be fine on my jupyter notebook, however on the plotly link above, it doesn’t show it properly. You can slide it around to see that it works only at 2.5, 3.5, 4.5.

Any help on this will be greatly appreciated! Thank you!


#2

Hi @Des,

Thanks for sharing the example notebook. Could you update it slightly to include a public reference to the 'toronto.csv' file? You can upload the CSV to your chart studio account and then read that directly into pandas with something like pd.read_csv('https://plot.ly/~jon.mease/488.csv')

Thanks!
-Jon


#4

Hello @jmmease,

Thank you for your reply! As the file exceeds 564kb (it’s 1.21mb) as allowed by a free plotly account, I uploaded the toronto.csv file on my google drive. Let me know if you’d like to me to still upload to my plotly account. If so, I can downsample my current dataset to meet the 564kb requirement!

The link to the drive is as follows: https://drive.google.com/file/d/1B1iM0Lks3dPtOfbYLMudQMYTk8EJ9B4L/view?usp=sharing


#5

Hello @jmmease,

Due to the 524kb restriction, I have resampled the original 'toronto.csv' to accomodate that and kept the 'star' distributions proportianally the same as the original csv. I have also uploaded an updated notebook that uses the new 'toronto_resampled.csv'.

'toronto_resampled.csv' can be found at https://plot.ly/~DesciuitV/67
'toronto_resampled.ipynb' can be found at https://plot.ly/~DesciuitV/71

As for reading the csv file from plotly, I am having trouble reading the csv from my plotly chart studio. Specifically, I cannot get the link to work as like 'https://plot.ly/~DescicuitV/toronto_resampled.csv'. Sorry for any inconvenience caused and am still having the same problem with the slider. Thank you so much for your help!


#6

Hi @Des,

Thanks for adding the data, here’s a full working notebook that I came up with: https://plot.ly/~jon.mease/515/note-how-the-longitude-columns-have-le/.

Here are some highlights of what I updated:

  1. The original figure['data'] list and each of the figure['frames']['data'] lists should contain only a single trace. Rather than all of the traces across all stars.
  2. I wrapped all of the uses of star in str to manually cast it to a string on the Python side. The reason the .5 increments were responding and the .0 increments were not was because when the JavaScript side got an integer value like 1.0, it was treating that as the string '1', rather than '1.0' (JavaScript doens’t have sepearate float and integer datatypes). I found this out by checking the JavaScript console errors, where plotly.js was complaining about not being able to find frames named '1', '2', etc.
  3. In the dataframe produced by pandas.read_csv, the longitude column for rows with >=3.5 stars all have a leading ' character. This is why none of the restaurants with >= 3.5 start were being displayed. Also, what I meant by reading the csv directly from chart studio was to do t = pd.read_csv('https://plot.ly/~DesciuitV/67.csv'). You can find this link by clicking the download button, and then right clicking on .csv and copying the url.

Hope that helps and makes sense. This is a fun example!
-Jon


#7

@jmmease,

Thank you very much for taking the effort and time for making this example work as I hoped as it will! I learned something along the way from this and thank you for that. I didn’t notice the leading ' character. I must have screwed it up while cleaning the data and subsetting it. Sorry for that! Thank you for also taking the time to reply to the posts in this community!

Cheers,
Matt


#8

You’re welcome! Glad it helped and thanks for the kind words :slightly_smiling_face:

-Jon