Introduction to Vizzu: Interactive Data Visualizations for Every Developer

Vizzu is a powerful library that helps you create animated data visualizations with ease. Ideal for adding interactivity and dynamic storytelling to your data, Vizzu comes with a host of APIs that are simple yet highly configurable. In this blog post, we’ll explore dozens of useful API methods, complete with code snippets to help you implement them.

Getting Started

To begin with Vizzu, you need to install it via npm:

npm install vizzu

Initial Setup

Here’s how to initialize a simple Vizzu chart:

 const Vizzu = require('vizzu');
let data = {
    series: [
      {name: 'Year', values: ['2000', '2005', '2010', '2015']},
      {name: 'Revenue', values: [123, 150, 180, 250]}
    ]
};
let chart = new Vizzu.Chart('vizzuCanvas', { data: data }); 

Adding Animations

You can easily add animations to your charts:

 chart.animate({
  config: {
    channels: {
      x: {'set': ['Year']},
      y: {'set': ['Revenue']},
      color: {'set': ['Year']}
    }
  },
  style: {
    plot: {
      marker: {
        label: {position: 'center'}
      }
    }
  }
}); 

Interactivity

Interactivity is one of the core features of Vizzu. You can enable tooltips and hover effects:

 chart.on('plot-marker-hover', (event) => {
    console.log('Marker hovered:', event.marker.data);
});
chart.animate({
  config: {
    channels: {
      tooltip: {set: ['Revenue']}
    }
  }
}); 

Transformations

Vizzu allows smooth transformations of data views:

 chart.animate({
  data: {
    series: [
      {name: 'Year', values: ['2000', '2005', '2010', '2015', '2020']},
      {name: 'Revenue', values: [123, 150, 180, 250, 300]},
      {name: 'Profit', values: [100, 120, 140, 160, 200]}
    ]
  },
  config: {
    channels: {
      x: {'set': ['Year']},
      y: {'set': ['Profit']},
      color: {'set': ['Year']}
    }
  }
}); 

Example App

Here’s a complete example of an application using Vizzu:

 const express = require('express'); const Vizzu = require('vizzu'); const path = require('path');
const app = express();
app.use('/vizzu', express.static(path.join(__dirname, 'node_modules', 'vizzu/dist')));
app.get('/', (req, res) => {
  res.send(`
    
    
      
        
      
      
        
        
      
    
  `);
});
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
}); 

This example demonstrates setting up an Express server that serves a simple HTML page with a Vizzu chart. Try running this code and opening http://localhost:3000 in a browser to see the chart in action.

Hash: d9ce11aff55cc8c7f064ae22698e16d601b59d78df5f5245d1ccc9041807f9b5