index

In December 2024, I participated in an internal hackathon at Datadog and explored animating graphs directly inside Datadog dashboards using Vega-Lite.

At the time, Datadog had just rolled out support for Vega-Lite, an open-source visualization grammar that allows allows users to create graphs that are not available within the native Datadog widget and query system. I wasn’t familiar with Vega or Vega-Lite before, so this was the perfect opportunity to dive in and learn the grammar.

First animation: The rain drop scatterplot 💧

I started with a simple animated scatterplot of falling raindrops, which eventually inspired the rest of the dashboard (shown in the gif above).

Step 1: Get the data

This graph used a basic dataset with about 40 points:

x	y
12.3077	30.0541
21.0256	49.6695
21.0256	26.2079
30.7692	26.2079
33.5897	26.5925

Each point is represented with a 💧 emoji using Vega-Lite’s text mark.

"transform": [
    {
      "calculate": "'💧'",
      "as": "emoji"
    }
],
"mark": "text"
"encoding": {
    "x": {"type": "quantitative"},
    "y": {"type": "quantitative"},
    "size": {"value": 20},
    "text": {
      "field": "emoji",
      "type": "nominal"
    }
},

This gives us a static raindrop scatterplot.

Step 2: Animate the drops

To make the raindrops “fall, I added a timer. It updates every 10ms and is the time that passed since the visualization loaded.

{
  "name": "time", 
     "on": [{"events": {"type": "timer", "throttle": 10}, "update": "now()"}] 
}

Using this timer, I updated the Y position of each raindrop with a combination of modulo (%) and sine to create looping vertical movement with some variation in speed:

"transform": [
    {
      "calculate": "100 + (datum.y - time/100) % 100 + sin(datum.y * time/10000)",
      "as": "moveY"
    }
  ]

And voilà, animated rain. View code.

More animations

After the raindrops, I experimented with other animations, each using similar principles with different mathematical functions. I used Graphtoy to test and visualise the motion path. In the examples below, I created the motion that mimic balls being thrown and bouncing off the ground. Instead of just vertical motion, the points now move along parabolic paths.

Another animation using flower and leaf emojis. View code.

Happy accidents

As I was experimenting with making the butterflies move more naturally, I accidentally created this flickering effect. I’m not exactly sure what caused it, but I liked the result and chose to keep it. View code.

Graphs using Datadog data

Some more visualisations I created using real Datadog data.

Cross-graph animation

I also experimented with creating cross-graph animations. The idea was to split a single animation across multiple graphs in the same dashboard, so it looks like an object moves from one graph to another.

Initially, I tried to get the graphs within a dashboard to talk to each other, which is possible but requires more work. In the end, I opted for a simpler approach. Each graph renders a different segment of the animation’s X-axis. When loaded together, they appear as one continuous animation spread across panels.

Timing was critical as the effect only works if all graphs load simultaneously, which thankfully they did during my demo.

Final thoughts

This project was a creative exploration of what’s possible with Vega-Lite. From falling raindrops to animated butterflies, I had so much fun learning the grammar and seeing how far I could push animation in visualizations beyond the standard use cases. Thank you for reading!