DEV Community: Simon László

Customizing Vizzu Charts - Real-time data model

Simon László — Thu, 27 Apr 2023 12:50:10 +0000

Have you ever wondered how to make your charts come to life with real-time data updates? Well, good news! Connecting a real-time data model to a Vizzu chart is easier than you might think. Vizzu is a data visualization tool you can easily use in web applications. Its simple API lets you update your charts in real time as your data changes.

This how-to guide will have two parts. The first part will show you how to connect an arbitrary real-time data source to a Vizzu chart. In the second part, we will build a real-time mechanical model of bouncing balls. We will then visualize the movements of these balls in real time on the Vizzu chart.

So, let's dive into how you can connect your real-time data model to a Vizzu chart!

Part 1: Creating a Vizzu Chart and Connecting it to a Realtime Data Source

The first step is to import the Vizzu library into your Javascript file. We will use the latest version from CDN:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';

The next step is to create a Vizzu chart. You can do this by creating a new instance of the Vizzu class and passing in the ID of the container element placed in your HTML file where you want to display the chart:

<div id="vizzu-container" style="width: 500px; height: 350px"></div>

let vizzu = new Vizzu('vizzu-container');

You need to define an update function to update the chart with real-time data. This function will be called repeatedly to update the chart with new data:

function update(model, chart) 
{
  const timeStep = 0.01;
  model.update(timeStep);
  return chart.animate({ 
    data: getDataFromModel(model),
    config: getChartConfig() 
  }, timeStep)
  .then(chart => update(model, chart));
}

This update function takes two parameters: the real-time data model and the Vizzu chart. It uses the model.update function to update the data model and then uses the chart.animate method to update the chart with the new data.

Before updating the chart, you have to wait for the chart to initialize. This can be done using the initializing property of the Vizzu instance:

vizzu.initializing.then(chart => {
  let model = new Model(chart);
  return update(model, chart);
});

Now we have a template for an infinitely updating chart. What we have to do in the next part is to implement the data model
and the 'getDataFromModel()' and 'getChartConfig()' functions which will get the data from the model in the Vizzu required format and describe the chart we want to show the data.

Part 2: Building the Data Source, a Mechanical Model of Bouncing Balls

For the model, we define three classes:

Vector - a simple 2D vector class to help with vector arithmetics,
BouncingBall - representing the mechanical model of a ball, and
Model - which will contain a set of balls bouncing around.

The Vector class

class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static Random() {
    return new Vector(Math.random(), Math.random());
  }

  mul(multiplier) {
    return new Vector(
      this.x * (multiplier?.x || multiplier), 
      this.y * (multiplier?.y || multiplier));
  }

  add(other) {
    return new Vector(this.x + other.x, this.y + other.y);
  }
}

We will need addition and scalar multiplication of 2D vectors, and we added a factory method to
create vectors with random coordinates.

The BouncingBall class

class BouncingBall {

  static lastIndex = 0;

  constructor(massToSize) {
    this.index = BouncingBall.lastIndex++;
    this.position = Vector.Random();
    this.speed = (Vector.Random()).mul(new Vector(3, 5));
    this.mass = Math.random();
    this.radius = Math.sqrt(this.mass)*massToSize;
  }

In the constructor, we give each instance a random position, speed, and mass and assign a unique index for each. We also calculate a radius with a factor that we extract from the chart to be able to bounce the balls back from the walls when
their side touches the walls.

  update(timeStep) {
    const g = 9.81;
    const friction = 0.5;
    let acceleration = this.speed.mul(-friction * this.mass).add(new Vector(0, -g));
    this.speed = this.speed.add(acceleration.mul(timeStep));
    this.position = this.position.add(this.speed.mul(timeStep));
    this.collision('y', v => v);
    this.collision('x', v => v);
    this.collision('x', v => 1 - v);
  }

Next, we calculate the ball's position for the next time point. We will assume a gravitational field and air friction.
We also check in each cycle if the balls collide with the side walls or the bottom, and we bounce them back if so.

  collision(coordinate, conversion) {
    const collisionDumping = 0.6;
    let side = conversion(this.position[coordinate]) - this.radius;
    if (side < 0) { 
      this.position[coordinate] = conversion(- side + this.radius);
      this.speed[coordinate] *= -collisionDumping;
    }
  }
}

In the collision detection method, we check if the ball went "outside" and if so, we switch the direction of its speed with a dumping factor, and move it back to the "right side" of the wall.

The Model class

class Model {
  constructor(chart, ballCount = 150) {
    let massToSize = chart.getComputedStyle().plot.marker.circleMaxRadius;
    this.time = 0;
    this.balls = [];
    for (let i = 0; i < ballCount; i++)
      this.balls.push(new BouncingBall(massToSize));
  }

The model class is simply containing the specified number of balls independently, which we initialize in the constructor, then in the update method, we go through them and update
their positions:

  update(timeStep) 
  {
    for (let ball of this.balls) ball.update(timeStep);
    this.time += timeStep;
  }
}

Connecting the Model to the Chart

First, we need to write a function that will convert the data from the model to the format required by the Vizzu chart:

function getDataFromModel(model) {
  return {
    series: [
      { name: 'index', type: 'dimension', values: model.balls.map(ball => `${ball.index}`) },
      { name: 'x', type: 'measure', values: model.balls.map(ball => ball.position.x) },
      { name: 'y', type: 'measure', values: model.balls.map(ball => ball.position.y) },
      { name: 'size', type: 'measure', values: model.balls.map(ball => ball.mass) }
    ]
  };
}

We will need their coordinates and mass to visualize the balls, which we will use as size. We also include their index and convert it to string to have a categorical data series
to distinguish between the balls.

Now that we have the data, we can connect its data series to the chart configuration:

function getChartConfig() {
  return {
    x: { set: 'x', range: { min: 0, max: 1} },
    y: { set: 'y', range: { min: 0, max: 1} },
    color: 'index',
    size: 'size',
    geometry: 'circle',
    legend: null
  };
}

Here we define a scatterplot by setting the geometry to circle and linking the coordinates and size to the x and y axis and size channel, respectively. Of course, we must add the categorical index series to have a separate marker for all the balls. For that, we use the color channel. We also switched off the legend as it would not add meaningful information to our visualization.

Now that we put together the whole code, we can run it and watch the balls bouncing around the chart!

Customizing Vizzu Charts - Mouse-wheel zooming

Simon László — Thu, 20 Apr 2023 07:33:43 +0000

Adding mouse-wheel zooming to a Vizzu chart in JavaScript can be useful for users who want to zoom in and out of a dense chart. In this how-to, we will create a Zoomer class that will handle the zooming functionality and then add event listeners to the Vizzu chart to connect the events to our Zoomer instance. And then, we will improve its performance by adding throttle to the zoom event calls.

Here are the steps to add mouse-wheel zooming over a Vizzu chart in JavaScript:

Step 1: Import Vizzu and data

First, we need to import the Vizzu library and an example data set as well, which we will visualize:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
import { data } from 'https://lib.vizzuhq.com/0.7/assets/data/chart_types_eu.js'

Step 2: Create the chart

We can create the chart using the following code:

let chart = await (new Vizzu('vizzu-container', { data })).initializing;

This creates a new Vizzu chart instance with the provided data.

Step 3: Initialize the Chart with Zoom Range

Next, we create a line chart with an initial x-axis range.

chart.animate({
  config: {
    x: {
      set: 'Year',
      range: {
        min: 0.5,
        max: 20.5
      }
    },
    y: 'Value 5 (+/-)',
    geometry: 'line'
  }
}, 0);

Now that we have a static chart, we can add the zoom functionality.

Step 4: Create the Zoomer class and instance

The Zoomer class will be used to track the zoom level of the chart:

class Zoomer {
  constructor(min, max) {
    this.min = min;
    this.max = max;
    this.finalMin = min;
    this.finalMax = max;
    this.pos = null;
  }

  trackPos(pos) {
    this.pos = pos;
  }

  zoom(factor) {
    let ref = this.min + this.pos * (this.max - this.min);
    this.min = ref - (1 + factor) * (ref - this.min);
    this.max = ref + (1 + factor) * (this.max - ref);
    if (this.min < this.finalMin) this.min = this.finalMin;
    if (this.max > this.finalMax) this.max = this.finalMax;
  }
};

The constructor takes the initial minimum and maximum value of the x-axis range. The trackPos method is used to track the mouse position, and the zoom method is used to zoom in or out based on the mouse wheel delta.

Now, we can create a new Zoomer instance with an initial zoom range of 0.5 to 20.5:

let zoomer = new Zoomer(0.5, 20.5);

Step 5: Add event listeners to the chart

We need to add event listeners to the chart to detect mouse-wheel and mouse-move events and prevent the default scroll event on the container element:

let container = document.getElementById('vizzu-container');

container.addEventListener('wheel', event => {
  event.preventDefault();
})

chart.on('wheel', event => {
  // Zoom event handling
});

chart.on('mousemove', event => {
  // Mouse move event handling
});

Step 6: Handle the Zoom Event

When a zoom event is triggered, we update the zoom level using the Zoomer object and trigger an animation to update the chart with the new zoom range.

chart.on('wheel', event => {
  zoomer.zoom(- event.data.delta / 200);
  chart.animate(
    { x: { range: {
      min: zoomer.min,
      max: zoomer.max
    } } },
    { duration: '50ms', easing: 'linear' });
});

Step 7: Handle the Mouse Move Event

When a mouse move event is triggered, we update the position of the Zoomer object to reflect the current mouse position.

chart.on('mousemove', event => {
  zoomer.trackPos(event.data.coords.x);
});

With these steps in place, your Vizzu chart should now be able to handle mouse-wheel zooming events. However, you will notice that zooming events can be called before the chart animation can finish, delaying the zoom effect. To prevent this behavior, we will need to throttle the zoom call.

Step 8: Create the Throttle class

The Throttle class will be used to limit the number of zoom events that are processed at any given time.

class Throttle {
  constructor() {
    this.finished = true;
    this.next = null;
  }
  call(func) {
    if (!this.finished) {
      this.next = func;
      return;
    }
    else {
      this.finished = false;
      func().then(() => {
        this.finished = true;
        if (this.next !== null) {
          let f = this.next;
          this.next = null;
          this.call(f);
        }
      })
    }
  }
}

let throttle = new Throttle();

The call method takes a promise-returning function as an argument and calls it if the promise returned by the previous function has resolved. Otherwise, it stores the function and waits for the current function's promise to finish.

Step 9: Adding the throttle to the Zoom Event

We can now modify the zoom event to call the zoom method via our new throttle instance:

chart.on('wheel', event => {
  zoomer.zoom(- event.data.delta / 200);
  throttle.call(() =>
    chart.animate(
      { x: { range: {
        min: zoomer.min,
        max: zoomer.max
      } } },
      { duration: '50ms', easing: 'linear' })
  );
});

With these additional steps, your Vizzu chart can handle mouse-wheel zooming events flawlessly.

Working example:

Customizing Vizzu Charts - GIF export using gif.js

Simon László — Tue, 11 Apr 2023 07:32:47 +0000

Vizzu is a JavaScript library that allows you to create interactive and animated charts. In this tutorial, we'll show you how to create a Vizzu chart and export it as a GIF using the gif.js library that you can use in your presentations, reports, or any other project.

In the first part of the article, we will show how to import GIF.js from CDN, and then in the second part, we will connect it to our Vizzu chart.

Prerequisites

Before you start this tutorial, it's best that you have a basic understanding of JavaScript, Vizzu, and GIF.js. You can find the corresponding documentation here:

Step 0: Getting Started

To get started, create a new HTML file and include the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vizzu Chart to GIF</title>
  </head>
  <body>
    <div id="vizzu-container" style="width:500px; height:350px;"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>

This new HTML file contains an empty div element that will be used to render the Vizzu chart. You can set the div's width and height style parameters to control the size of the exported GIF. We also include the JavaScript file called 'index.js' that we'll create next.

You'll need to have Vizzu and GIF.js imported into your project. You can do this by adding the following code to your JavaScript file:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
import 'https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js';

Step 1: Set up the GIF.js instance.

Get the container element that will hold your visualizations.

let container = document.getElementById("vizzu-container");

Now we need to fetch the worker script manually from the CDN because modern web browsers have security restrictions that require the worker script to be loaded from the same origin as the web page. So, we fetch the worker script and use URL.createObjectURL to create a Blob URL, which ensures that the worker script is loaded from the same origin as the web page.

let gifLoading = fetch('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.worker.js')
  .then((response) => {
    if (!response.ok)
      throw new Error("Network response was not OK");
    return response.blob();
  })

Create a new GIF instance and configure it.

  .then(workerBlob => {
    let gif = new GIF({
      workers: 4,
      workerScript: URL.createObjectURL(workerBlob),
      quality: 10,
      width: container.clientWidth,
      height: container.clientHeight
    });

Set up the 'finished' event listener for the GIF.js instance. This will open the GIF in a new tab when the GIF is completed.

    gif.on('finished', function(blob) {
      window.open(URL.createObjectURL(blob));
    });

    return gif;
  });

Step 2: Create the Vizzu Chart

First, you will need some data to visualize:

let data = {
  series: [
    { name: 'Foo', values: ['Alice', 'Bob', 'Ted'] },
    { name: 'Bar', values: [15, 32, 12] },
    { name: 'Baz', values: [5, 3, 2] }
  ]
};

Next, you need to initialize the Vizzu chart and wait for it along with GIF renderer to finish loading. You can do this using the following code:

let vizzu = new Vizzu(container, { data });

Promise.all([vizzu.initializing, gifLoading])
.then(([chart, gif]) => {
  // ...
});

Once the Vizzu chart and GIF renderer are loaded, you can add content to your chart. We will use a simple example chart shown in the README of Vizzu.

But first. You have to set up rendering the chart frames as GIF frames. You can do this by adding a callback function to the logo-draw event of the chart, which is fired every time the chart is redrawn. The callback function adds the current rendering context of the chart as a new frame to the GIF renderer with a delay of 25 milliseconds between frames.

chart.on('logo-draw', event => {
  gif.addFrame(event.renderingContext, {copy: true, delay: 25});
});

Finally, you need to create and animate the Vizzu chart and render the GIF. In this example, we'll create a simple bar chart with two series, 'Foo' and 'Bar':

chart.animate({
  x: 'Foo',
  y: 'Bar'
})

Then we will animate the chart to a scatterplot:

.then(chart => chart.animate({
  color: 'Foo',
  x: 'Baz',
  geometry: 'circle'
}))

Finally, when the Vizzu chart has finished animating, we call the gif.render() method to create the final GIF animation.

.then(() => { gif.render(); });

Experience a live example by running this Pen! You're free to edit the code and rerun it as many times as you'd like. However, please keep in mind that it may take up to 25 seconds for the 'Download GIF' button to appear, as gif.js is actively generating the GIF during this time.

That's it! Now, when you load your web page, you should see a Vizzu chart animated as a GIF. You can customize the chart and the GIF options to fit your needs.

Customizing Vizzu Charts - Annotations using MarkerJS

Simon László — Thu, 06 Apr 2023 09:41:30 +0000

Adding annotations to a Vizzu chart can be a useful way to highlight specific data points and add additional information to your visualizations. We will do this in two steps. First, we add the Marker.js UI to the Vizzu chart to create the annotation visually and export them in JSON format, and second, using the exported JSON, we show them on the chart permanently, without the editor UI. By following these steps, you can create interactive and informative visualizations that make it easier to understand complex data.

Prerequisites

Before you start this tutorial, it's best that you have a basic understanding of JavaScript, Vizzu, and Marker.js. You can find the corresponding documentation here:

Part 1: Making the Annotations

Step 0: Getting Started

To get started, create a new HTML file and include the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vizzu Chart with Annotations</title>
  </head>
  <body>
    <div id="vizzu-container" style="width:500px; height:350px;"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>

This new HTML file contains an empty div element that will be used to render the Vizzu chart. We also include the JavaScript file called 'index.js' that we'll create next.

You'll need to have Vizzu and Marker.js imported into your project. You can do this by adding the following code to your JavaScript file:

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
import 'https://cdn.jsdelivr.net/npm/markerjs2@2.29.0/markerjs2.min.js';

Step 1: Create the Vizzu Chart

First, we will need a chart that we will annotate. We will use a simple example from the README of Vizzu.

We set up the data we want to visualize:

let data = {
  series: [
    { name: 'Foo', values: ['Alice', 'Bob', 'Ted'] },
    { name: 'Bar', values: [15, 32, 12] }
  ]
};

Next, we initialize the Vizzu chart:

let chart = new Vizzu('vizzu-container', { data });

Finally, we create a simple bar chart with two series, 'Foo' and 'Bar':

let animating = chart.animate({
    x: 'Foo',
    y: 'Bar'
});

Step 2: Add Marker.js UI over the Chart

Now, we need to create a new instance of the Marker.js MarkerArea class and pass the container div as its target element:

let markerArea = new markerjs2.MarkerArea(document.getElementById('vizzu-container'));

Next, you need to show the Marker.js UI by calling the show() method:

markerArea.show();

We also add an event listener to the MarkerArea object to capture the annotation data in JSON format when we finish annotating:

markerArea.addEventListener('render', event => {
    navigator.clipboard.writeText(JSON.stringify(event.state));
    alert("Annotation JSON object copied to clipboard!");
});

This code listens to the render event and copies the annotation data in JSON format to the clipboard when we finish annotating. We also display an alert message - just in case - that the annotation data has been copied to the clipboard.

With this code, we have successfully added the Marker.js annotation editor UI over the Vizzu chart. The next step is to open our project in a browser and add annotations to the chart.

Part 2: Displaying the annotations

Once we annotated the chart and saved the annotations to the clipboard by clicking the check mark button, we can add these annotations permanently to our chart.

First, we roll back the Marker.js-related code we added in the last step of the first part. Then, we add the following code instead:

import 'https://cdn.jsdelivr.net/npm/markerjs-live@1.1.0/markerjs-live.min.js';

This imports the Marker.js Live library instead of the Editor. Next, we create a new MarkerView object, which, uses the same container div as the Vizzu chart.

let markerView = new mjslive.MarkerView(document.getElementById('vizzu-container'));

Next, we paste the annotation data that we saved to the clipboard earlier into the config variable:

let config = /* Paste your JSON annotation object here! */;

Finally, after the chart animation has been completed, we show the annotations permanently on the chart.

animating.then(chart => {
    markerView.show(config);
});

With this code, we have successfully added the annotations made using the Marker.js UI to the Vizzu chart.

How to use gif.js from CDN

Simon László — Thu, 16 Mar 2023 16:44:14 +0000

If you want to use the GIF.js library from a CDN in your web project, you can follow these steps:

Step 1: Add the GIF.js library to your project.

Add the following code to the head section of your HTML file.

<script src="https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js"></script>

Alternatively, you can use ES6 import syntax to import the library.

import 'https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js';

Step 2: Set up a GIF instance.

Get the container element that will hold your visualizations.

let container = document.getElementById("my-container");

Now we need to fetch the worker script from the CDN because modern web browsers have security restrictions that require the worker script to be loaded from the same origin as the web page. So, we fetch the worker script and use URL.createObjectURL to create a Blob URL, which ensures that the worker script
is loaded from the same origin as the web page.

let gifLoading = fetch('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.worker.js')
  .then((response) => {
    if (!response.ok)
      throw new Error("Network response was not OK");
    return response.blob();
  })

Create a new instance of GIF and configure it.

  .then(workerBlob => {
    let gif = new GIF({
      workers: 4,
      workerScript: URL.createObjectURL(workerBlob),
      quality: 10,
      width: container.clientWidth,
      height: container.clientHeight
    });

Set up the 'finished' event listener for the GIF.js instance. This will open the GIF in a new tab when the GIF is completed.

    gif.on('finished', function(blob) {
      window.open(URL.createObjectURL(blob));
    });

    return gif;
  });

Step 3: Use the GIF.js instance.

Now you can use the GIF.js instance to create your GIF. First, add your visualizations to the container element and call the addFrame method for each frame.

gifLoading.then(gif => {

  // Add visualization frames to the container element
  // ...

  // Add frames to GIF
  gif.addFrame(container, { delay: 100 });

  // Repeat ...

  // Call the `render` method to generate the GIF
  gif.render();
});

That's it! You can now use GIF.js to create animated GIFs from your visualizations.

Product Hunt: Vizzu, an animated charting library

Simon László — Thu, 17 Feb 2022 01:18:10 +0000

Hey guys!

Today we launched Vizzu on Product Hunt. It's our open-source JavaScript library for building animated charts with ease.

We prepared some goodies for this event. We created a quick walk-through video showing how easy it is to create a morphing chart in Vizzu. You can also find some great video-based data stories, and an interactive explorer.

Come check us out, join the conversation on how animation brings dataviz to the next level, and show us some support. We'd love to get your feedback!

The PH page:

https://producthunt.com/posts/vizzu

Vizzu: Open source library for animated data visualizations and data stories

Simon László — Mon, 04 Oct 2021 12:16:40 +0000

Hello, dev.to community!

After four years of coding and navigating the rough waters of bootstrapping a startup and finding the right path forward, our small team of Vizzu is at the best place it can be: We finally have our first product: an open-source library. (I admit, I might be biased here as an open-source enthusiast developer.)

I’m proud to announce that we are releasing Vizzu’s first public beta (v0.3.1) into the world, and I’d like to say a few words about why we think it is unique among the dataviz libraries and why we hope that you will love to use it as much as we do.

About the project:

Vizzu is a free, open-source Javascript/C++ library utilizing a generic dataviz engine that generates many types of charts and seamlessly animates between them. It is designed for building animated data stories and interactive explorers as Vizzu enables showing different perspectives of the data that the viewers can easily follow due to the animation.

To learn more about the project, please visit our:
Project page on GitHub: https://github.com/vizzuhq/vizzu-lib
Tutorial: https://lib.vizzuhq.com/0.3.0/
Examples: https://lib.vizzuhq.com/0.3.0/#examples-1.1

To give a little taste of the API, here is a small snippet from the readme. After you set your data of three data series named ‘Foo’, ‘Bar’, ‘Baz’, creating a bar chart is as simple as this:

chart.animate({
  x: 'Foo',
  y: 'Bar'
});

Then you can transform it into a scatter plot by changing the data series governing different aspects of the chart:

chart.animate({
  color: 'Foo',
  x: 'Baz', 
  geometry: 'circle' 
});

So what is so special about Vizzu?

If you built animated data visualizations in the past, you had a big decision to make: You could go for a low-level library, most likely D3, which you could use to create stunning, highly customized animated dataviz, for the price of putting a lot of code and effort into your project. Or you could choose one of the high-level charting libraries, create static charts with considerably less code, and then animate a growing number (pun intended) of aspects of your chart.

High-level charting libraries are easier to use, because they implement the rules of data visualization (axes, legends, etc) and provide a high-level interface over this ruleset. Sometimes with a separate interface for each chart type, other times using the abstract interface of the 'Grammar of Graphics', like the Vega library.

We set out to build a dataviz tool, which offers you a third path. We think that the missing link for making animation a first-class citizen is to extend the data visualization ruleset into the time dimension, by working towards the Grammar of Animation.

As the first step, we created our engine that is inspired by the Grammar of Graphics, and provides a common interface for several different chart types. Then we looked at the parameter space of this engine and made each parameter interpolatable, turning our engine into a generic chart morpher, which can continuously interpolate between any chart types that can be described on its interface.

The second step on this road was to analyze these transitions and come up with rules that make them self-explanatory and easy to follow for the viewers. Finally, we built these rules into our engine to guide you through the mostly uncharted sea of dataviz animations.

We still have a lot to do, but we believe we are at a big milestone, as now we can give you a tool you can use to build highly animated data visualizations easily. Check out the examples and the tutorial, and decide for yourself.

If you want to learn more about our results on the path towards the Grammar of Animation, check out Peter's talk later this week at Crunch conf: https://crunchconf.com/speaker/P%C3%A9terVidzi and follow us on Twitter: http://twitter.com/VizzuHQ.