Kasia Gasiewska-Holc walks us through her recent 'Dwight Schrute's Computer' viz and how she incorporated HTML animations in Tableau.
Kasia starts off with choosing a vector image to animate. In her viz she used a Dunder Mifflin logo for Dwight’s computer.
Kasia cleans the vector image using Adobe Illustrator. There are other tools to use such as, SVG Edit. It needs to be a tool that can work with vector and SVG images. Vector images are important as they are easily resized without a loss of quality.
While working in Illustrator Kasia mentions it is important to name all the layers as it becomes very helpful once it is converted to HTML.
Kasia saves the image as a SVG file and copies the SVG code from SVG Options. Next, she copies the SVG code to Visual Studio Code but any notepad tool would work. This is used to start writing the HTML code.
Using the templates Kasia provided below she copies each section and appropriately lays out the HTML code. This begins the animation process.
To define the path the logo moves, Kasia heads back to Illustrator to explain and draw this out. Using the SVG code of the path drawn out, she copies the coordinates into the ‘Animate Motion’ function into her Visual Studio Code.
After fine tuning the motion of the logo and teaching us some tricks we move on to changing the color of the logo through its path.
Kasia has provided the below templates for you to follow along with us.
<html>
<head>
<style>
/* CSS Styles */
</style>
</head>
<body>
<svg>
<!-- SVG Code -->
</svg>
</body>
</html>
<!---------- Animate Transform --------->
<style type="text/css">
body {
margin: 0px;
}
.container {
fill: #5b94d6;
width: 1000px;
height: 800px;
}
.st0{fill:#4168B0;}
/* ... *//* -------- Animate Transform ---------*/
<animateTransform
attributeName="transform"
type="translate"
from="0 0"
to="1000 800"
begin="0s"
dur="5s"
repeatCount="indefinite"
/>/* -------- Animate Motion ----------*/
<animateMotion
dur="15s"
repeatCount="indefinite"
path="M0,0l654,527.34L133.95,612L0,258.79L371.51,0l280.79,96.06L0,404.64L429.59,612L654,242.63">
</animateMotion>/* ---- Key Frames - Color Change ----*/
@keyframes colorChange {
0%{fill:#ffce00}
10%{fill:#ff6600}
20%{fill:#ff0000}
30%{fill:#9c0096}
40%{fill:#9a00cf}
50%{fill:#cd2c99}
60%{fill:#3500d1}
70%{fill:#665fff}
80%{fill:#00cbff}
90%{fill:#26ce22}
100%{fill:#ffce00}
}
.st1 {
animation: colorChange 25s infinite;
}Once the HTML code is complete it does need to be first published on a server.
The final step is bringing the URL link in as a web object into Tableau. And DONE! You now have an animated object incorporated in your Tableau visualization.
For more details, watch Kasia’s full Her Data Learns and check out her Tableau Public Profile.
Be sure to follow Kasia on Twitter.