{"id":10480,"date":"2018-01-23T08:40:21","date_gmt":"2018-01-23T07:40:21","guid":{"rendered":"https:\/\/chartmogul.com\/blog\/?p=10480"},"modified":"2023-08-10T17:11:38","modified_gmt":"2023-08-10T15:11:38","slug":"sweating-details-data-animation","status":"publish","type":"post","link":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/","title":{"rendered":"Sweating the details on data animation in ChartMogul"},"content":{"rendered":"

New chart transitions are here<\/h2>\n

Recently, we introduced transitions to charts in ChartMogul. This means that when you make a change to a chart\u2019s dataset, you\u2019ll see the chart animate the change.<\/p>\n

The project was started out of necessity — upcoming work on larger charting features such as dynamic updates (through an animation) mean that all of our charting front-end needs to have this capability.<\/p>\n

Although it might seem simple on the surface, there’s a lot of thought that needs to go into animating changes to data in the UI. What\u2019s the best way to demonstrate a change in a dataset? It\u2019s a simple question, but it\u2019s hard to answer.<\/p>\n

Take a simple bar chart, for example. Each rectangle on the chart represents two things: a date<\/strong> and a value<\/strong>. When the data changes, the chart needs to accommodate new data points in a way that’s not confusing. One solution we considered for this was zeroing each rectangle, and then bringing them back once they’ve been updated.<\/p>\n

Here\u2019s how that would look:<\/p>\n

\"quarterly<\/strong><\/p>\n

In practice, this is actually worse than changing the bars without a transition. It feels slower to complete, and it\u2019s hard to understand the change to the data — visually comparing the previous value with the new one is hard, because of the transition to zero.<\/p>\n

We also considered updating the bars without zeroing their Y values:<\/p>\n

\""Why
“Why is the bar for April now representing the data for Q4?”<\/figcaption><\/figure>\n

This does a better job of conveying the difference in the two datasets to users, but it\u2019s still confusing. The bars change what they represent (the bar that represented August represents the bar for July after the transition).<\/p>\n

Introducing object constancy<\/h2>\n

To solve this, we employed an approach called object constancy<\/a>. Mike Bostock, creator of the D3 visualization library frequently references the term, which means each chart element (like a bar) is “locked” to a specific time. In other words, the bar for August will always represent the bar for August.<\/p>\n

\u201cAnimated transitions are pretty, but they also serve a purpose: they make it easier to follow the data.\u201d<\/p>\n

Mike Bostock, creator of D3.js<\/p><\/blockquote>\n

Though object constancy is a new concept for me, it\u2019s quickly become the root of how we transition chart states.<\/p>\n

\"monthly-quarterly<\/strong><\/p>\n

This subtle change in our approach makes it possible for us to link a bar to specific data. When elements move around in complex ways it\u2019s still possible for users to follow what’s happening to the data — a fundamental goal of UI transitions.<\/p>\n

\"transitions-gif-2\"
With object constancy, it’s easier to follow the animation — even with dozens of elements transitioning at once<\/figcaption><\/figure>\n

Good transitions reduce cognitive load on the end user. They make it easier to understand what the data represents, even when the way it is represented changes in complex ways.<\/p>\n

Animations as a perceived performance boost<\/h2>\n

\u201cAnimations can be a good tool for making users perceive things as faster than they really are.\u201d<\/p>\n

– Micha\u00ebl Villar on Medium<\/a><\/p><\/blockquote>\n

This really interesting idea from Micha\u00ebl was in the back of my mind when working on this project. Everyone can see the value in making software feel faster, and this can be taken a step further when rendering graphical changes.<\/p>\n

D3 transitions can certainly make an update feel faster, but a good transition in a chart context can provide more information than is in the two datasets alone. A transition, in displaying the difference between the datasets, can almost display a third dataset.<\/p>\n

Animating a change to a chart isn\u2019t enough. A good transition must fit the change. For example shifting bars either right or left, depending on whether the time series of the data had gone forwards or backwards in time.<\/p>\n

\"Transitioning
Transitioning in tandem: The confusion here is eased by ensuring logical steps in the transition, e.g. exiting old rects before introducing new ones and also by transitioning items at the same pace. In this example, watch the lower line and the “$10k” in the Y axis — they move in tandem, which helps to keep track of the represented values.<\/figcaption><\/figure>\n

Heer and Robertson wrote in their 2007 paper<\/a> that animation can improve \u201cgraphical perception at both syntactic (object tracking) and semantic (change estimation) levels of analysis.\u201d In other words, as we\u2019ve found, transitioning charts with animations makes it easier to tell stories with data. It\u2019s easier for humans to understand complex differences and to spot patterns when you transition between two datasets (e.g., when filtering a view of your data).<\/p>\n

Plus an actual performance boost<\/h2>\n

While adding support for transitions in ChartMogul, we also took the opportunity to make speed improvements to the way we render charts. Previously, any change to a chart would cause the chart’s SVG to be deleted and recreated from scratch. This might sound dramatic, but it wasn\u2019t noticeable to the end user as it would happen almost instantly.<\/p>\n

However, as we wanted to display transitions between datasets we required a different approach. Now when you make a change to a chart, elements are updated rather than recreated. This is harder than deleting and recreating an SVG each time there’s a change —\u00a0 we now need to handle both the creation or “entering” of elements and also the update and exit (removal) of elements. The end result is that the rendering charts in ChartMogul is now far more efficient.<\/p>\n

These changes wouldn\u2019t have been possible without a huge amount of work being done on the back end of the ChartMogul platform. Animations delayed by long wait times for data would undoubtedly frustrate users. Due to recent back-end projects, new datasets are returned incredibly quickly (100x times faster than before). This allows us to begin an animation pretty much immediately once a change has been made by a user.<\/p>\n

I learned a lot about D3 and transitions during this project. Thanks go to Nick, Yuta and Dmitriy at ChartMogul for their support, and special thanks to Mike Bostock for D3.<\/p>\n

Thanks for reading! I hope these changes help ChartMogul users gain more insights from their data, in an altogether improved experience.<\/p>\n

If you have any feedback, I\u2019d love to hear your suggestions and\/or critiques in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"

A lot of thought goes into communicating the complex data you see in ChartMogul. As we’re rolling out improved transitions in our charts, let’s take a deep dive on the finer details of data animation and how this impacts the overall user experience.<\/p>\n","protected":false},"author":5,"featured_media":10511,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[25,258,84,282,47],"class_list":["post-10480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-chartmogul","tag-data-visualization","tag-design","tag-engineering","tag-product"],"yoast_head":"\nSweating the details on data animation | ChartMogul<\/title>\n<meta name=\"description\" content=\"As we're rolling out improved transitions in our charts, let's take a deep dive on the finer details of data animation in ChartMogul.\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<link rel=\"canonical\" href=\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sweating the details on data animation | ChartMogul\" \/>\n<meta property=\"og:description\" content=\"As we're rolling out improved transitions in our charts, let's take a deep dive on the finer details of data animation in ChartMogul.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"ChartMogul\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/chartmogul\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-23T07:40:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-10T15:11:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bill Franklin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@chartmogul\" \/>\n<meta name=\"twitter:site\" content=\"@chartmogul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill Franklin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\"},\"author\":{\"name\":\"Bill Franklin\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/b12d5b3898e11a6085be7f379fca66c3\"},\"headline\":\"Sweating the details on data animation in ChartMogul\",\"datePublished\":\"2018-01-23T07:40:21+00:00\",\"dateModified\":\"2023-08-10T15:11:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\"},\"wordCount\":1085,\"publisher\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png\",\"keywords\":[\"chartmogul\",\"data visualization\",\"design\",\"engineering\",\"product\"],\"articleSection\":[\"Product Updates\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\",\"url\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\",\"name\":\"Sweating the details on data animation | ChartMogul\",\"isPartOf\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png\",\"datePublished\":\"2018-01-23T07:40:21+00:00\",\"dateModified\":\"2023-08-10T15:11:38+00:00\",\"description\":\"As we're rolling out improved transitions in our charts, let's take a deep dive on the finer details of data animation in ChartMogul.\",\"breadcrumb\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage\",\"url\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png\",\"contentUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png\",\"width\":3000,\"height\":1250,\"caption\":\"transitions-header3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/chartmogul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sweating the details on data animation in ChartMogul\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#website\",\"url\":\"https:\/\/chartmogul.com\/blog\/\",\"name\":\"ChartMogul\",\"description\":\"Get all your SaaS & Subscription Metrics with a Single Click! MRR, churn, LTV and much more.\",\"publisher\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/chartmogul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#organization\",\"name\":\"ChartMogul\",\"url\":\"https:\/\/chartmogul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png\",\"contentUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png\",\"width\":278,\"height\":52,\"caption\":\"ChartMogul\"},\"image\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/chartmogul\",\"https:\/\/x.com\/chartmogul\",\"https:\/\/www.linkedin.com\/company\/chartmogul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/b12d5b3898e11a6085be7f379fca66c3\",\"name\":\"Bill Franklin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3115f8ce35d1c07cc658004b82a6233289c8942003668d1fd173f913ab519b08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3115f8ce35d1c07cc658004b82a6233289c8942003668d1fd173f913ab519b08?s=96&d=mm&r=g\",\"caption\":\"Bill Franklin\"},\"url\":\"https:\/\/chartmogul.com\/blog\/author\/billy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sweating the details on data animation | ChartMogul","description":"As we're rolling out improved transitions in our charts, let's take a deep dive on the finer details of data animation in ChartMogul.","robots":{"index":"index","follow":"follow"},"canonical":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/","og_locale":"en_US","og_type":"article","og_title":"Sweating the details on data animation | ChartMogul","og_description":"As we're rolling out improved transitions in our charts, let's take a deep dive on the finer details of data animation in ChartMogul.","og_url":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/","og_site_name":"ChartMogul","article_publisher":"https:\/\/www.facebook.com\/chartmogul","article_published_time":"2018-01-23T07:40:21+00:00","article_modified_time":"2023-08-10T15:11:38+00:00","og_image":[{"width":3000,"height":1250,"url":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png","type":"image\/png"}],"author":"Bill Franklin","twitter_card":"summary_large_image","twitter_creator":"@chartmogul","twitter_site":"@chartmogul","twitter_misc":{"Written by":"Bill Franklin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#article","isPartOf":{"@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/"},"author":{"name":"Bill Franklin","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/b12d5b3898e11a6085be7f379fca66c3"},"headline":"Sweating the details on data animation in ChartMogul","datePublished":"2018-01-23T07:40:21+00:00","dateModified":"2023-08-10T15:11:38+00:00","mainEntityOfPage":{"@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/"},"wordCount":1085,"publisher":{"@id":"https:\/\/chartmogul.com\/blog\/#organization"},"image":{"@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png","keywords":["chartmogul","data visualization","design","engineering","product"],"articleSection":["Product Updates"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/","url":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/","name":"Sweating the details on data animation | ChartMogul","isPartOf":{"@id":"https:\/\/chartmogul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage"},"image":{"@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png","datePublished":"2018-01-23T07:40:21+00:00","dateModified":"2023-08-10T15:11:38+00:00","description":"As we're rolling out improved transitions in our charts, let's take a deep dive on the finer details of data animation in ChartMogul.","breadcrumb":{"@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#primaryimage","url":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png","contentUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2018\/01\/transitions-header3.png","width":3000,"height":1250,"caption":"transitions-header3"},{"@type":"BreadcrumbList","@id":"https:\/\/chartmogul.com\/blog\/sweating-details-data-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/chartmogul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Sweating the details on data animation in ChartMogul"}]},{"@type":"WebSite","@id":"https:\/\/chartmogul.com\/blog\/#website","url":"https:\/\/chartmogul.com\/blog\/","name":"ChartMogul","description":"Get all your SaaS & Subscription Metrics with a Single Click! MRR, churn, LTV and much more.","publisher":{"@id":"https:\/\/chartmogul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/chartmogul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/chartmogul.com\/blog\/#organization","name":"ChartMogul","url":"https:\/\/chartmogul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png","contentUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png","width":278,"height":52,"caption":"ChartMogul"},"image":{"@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/chartmogul","https:\/\/x.com\/chartmogul","https:\/\/www.linkedin.com\/company\/chartmogul\/"]},{"@type":"Person","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/b12d5b3898e11a6085be7f379fca66c3","name":"Bill Franklin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3115f8ce35d1c07cc658004b82a6233289c8942003668d1fd173f913ab519b08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3115f8ce35d1c07cc658004b82a6233289c8942003668d1fd173f913ab519b08?s=96&d=mm&r=g","caption":"Bill Franklin"},"url":"https:\/\/chartmogul.com\/blog\/author\/billy\/"}]}},"_links":{"self":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts\/10480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/comments?post=10480"}],"version-history":[{"count":10,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts\/10480\/revisions"}],"predecessor-version":[{"id":19913,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts\/10480\/revisions\/19913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/media\/10511"}],"wp:attachment":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/media?parent=10480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/categories?post=10480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/tags?post=10480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}