Copy
You're receiving this email because you wisely signed up at webanimationweekly.com.
View this email in your browser

Hi! My name is Nadieh Bremer and I've been given the honor to be the editor for this Animation At Work 🙂 I call myself a "Data Visualization Designer" (that acronym though...ಥ_ಥ) and I work as a freelancer under the name of Visual Cinnamon. I focus on artful, unique, but still effective visualizations of data— on teasing out the story and insights from one particular dataset and revealing them to the audience in novel ways.

This reveal often makes use of animation. I can start by only revealing one interesting datapoint, contextualize it, then show the rest. I can go from one view of the data to another, by switching up the position of that data. I've found that animation in data visualization comes down to 2 main "triggers":

1. Interaction: The animation happens when the user interacts with the data. A button pressed to make a selection, or a hover to change a colour. Changing data's visual characteristics through animation and interaction instead of changing it instantly makes it easier on the eye and more intuitive to follow.
2. Scrolling: There can also be animation because the user scrolled down: the "Scrollytelling" technique. Although highly interactive charts used to be the craze a few years ago, there is now a focus on a more linear story format where the user triggers the next "scene" by scrolling down the page. 
3. On load: Okay, so there's also animation that happens even without any input from the viewer, starting on page load and looping. I guess that could be seen as similar to a video or (data) gif. These work wonders for social media sharing. 

Hopefully the links below will give you a broader view of what's possible in data visualization, and how to learn it yourself. I can definitely say that animation and dataviz on the web are the perfect partners!

Nadieh Bremer, Guest Editor

Quite an amazing piece on the many trips that the spacecraft Cassini made around Saturn. Using WebGL and subtle animations and movements of the "camera" make this a joy to watch and scroll through (although you have to be patient and wait for the "animation step" to end). And it even works amazingly on a mobile screen!
[Inspiration] A visual that slowly builds up and really drives home how many people were killed in the US in 2013 through guns. Even five years later, this visual is still one of the best out there. 

[SVG] [Canvas] [Scrollytelling] This visual explanation of Decision Trees uses exact scrolling coordinates to update its visuals. I  like how stopping to scroll doesn't mean a full stop of the visual; it slows gently instead.
 

[SVG] [Inspiration] [Scrollytelling]  Bussed Out: How America Moves it's Homeless is the biggest piece that I've ever worked on, with the amazing Shirley Wu and the team at the Guardian. Through data and personal stories, we show what happens to those homeless that take a "one-way" bus ticket
 

[Canvas] [Scrollytelling] [Journalism] The Pudding are consistently creating some of the best data journalism, visualized in wonderfully inventive ways. Here's one about your favourite band's chances of making it big

[Library] [Scrollytelling] Scrollama.js is a very handy library that the people behind The Pudding made to help you in creating scroll-based triggers for your data visualization stories.
 

[Library] [D3.js] [Tutorial] Interactive Data Visualization for the Web is one of my favourite books from which to learn how to make unique, effective, and interactive visualizations using d3.js. There are many online tutorials as well, such as DashingD3 or this Frontend Masters course

[Tutorial] [SVG] [D3.js] One of the wonders of d3.js is that it makes it so easy to animate your data to a new state (change its position, color, size, etc.) And this can be done in a myriad of different easings, which you can check out here or here

[Inspiration] [D3.js]  Blocks is CodePen for the dataviz community; a place where small pieces of code are shared. There are so many wonderful, wacky, animated examples out there: wavy bars, the n-body problem, circle waves, randomly packing a field with circles, creating sand spiral art, and moving gooey blobs, to name a few! 
 

[Conference] [Videos] OpenVisConf just happened in Paris. This data visualization conference is packed with talks meant to teach and inspire. Their videos can be found on the main page! 
 

[Inspiration] [Gallery] If you want to make a dataviz, you don't have to reinvent the wheel. Look at what other people have done and use something that you like/think will work with your data as the base. For this I curate specific Pinterest boards that I go through at the start of a new project. And many other dataviz professionals do the same, such as Jan Willem Tulp, Santiago Ortiz, Lynn Cherny and Sonja Kuijpers.
Love the newsletter? Your support keeps us going!

Contribute to our Patreon,
submit a link, or simply forward it to your friends
Copyright © 2018 Tin Magpie, All rights reserved.


unsubscribe from this list    update subscription preferences