Help get this topic noticed by sharing it on Twitter, Facebook, or email.

linear to logarithmic transition animation

Hi GAPMINDER,

Is there any possibility to animate a transition of grafic axis from linear scale to logarithmic?

We would like to highlight how the logarithmic scale cound maximize the details by going from linear to logarithmic and vice-versa.

Thanks a lot for your feedback.

Any suggestion would be much appreciated.

Sebastia Farras
Barcelona
1 person has
this question
+1
Reply
  • Hi Sebastia!

    It's not natively supported but if you feel a bit comfortable with going under the hood you can make it happen yourself:

    All you have to do is add an "transition" property to the css class used by the bubbles in our bubble chart, ".vzb-bc-entity", like so:

    .vzb-bc-entity { transition: cy 2s, cx 2s }

    You can do this for example in the webdeveloper toolbar of chrome when on our tools page. This will make the bubbles x and y position animate for 2 seconds when changing between linear and logarithmic scales.

    However, you can't really see it as the menu is open when switching. So you can give the command to switch in the console of the same web developer toolbar.

    For switching x axis to linear:
    Vizabi._instances["t1"].model.state.marker.axis_x.setScaleType("linear")
    Or to logarithmic:
    Vizabi._instances["t1"].model.state.marker.axis_x.setScaleType("log")

    See this video where I show how I did it:

    http://recordit.co/75rDnmGrlL

    The axis itself doesn't animate, but the bubbles are probably enough to show the idea : )
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned happy, confident, thankful, excited kidding, amused, unsure, silly

  • I’m thankful
    Dear Jasper,

    TAL for your quick answer!! It's been really helpful.

    Sebastian
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • I’m happily grateful
    Dear Jasper,

    First of all many thanks for your support.

    Maybe it's because I'm not experienced with this environment but:

    Is it possible to keep this configuration by exporting graphics or however?
    In fact, we would like to load the full charts data and config in order to avoid this procedure of customisation.

    I tried to export by savig charts or tabs but when i try to reload them in a new gapminder I only got a blank chart.

    Thanks a lot in advance.

    Sebastian
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned happy, confident, thankful, excited kidding, amused, unsure, silly

  • Hi Sebastia : ),

    I'm afraid you can't easily save this state in a bookmark.

    However, you could try making a screen recording using for example https://icecreamapps.com/Screen-Recor... or any other screen recording application.

    It won't be interactive, but you'll be able to save the animation in a video file : ).

    Let me know if that helps you!
    Jasper
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned happy, confident, thankful, excited kidding, amused, unsure, silly