<html>
 <body>
  <div id="myVizzu">
  </div>
 </body>
</html>

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

import {
    data_14
} from 'https://lib.vizzuhq.com/0.7/assets/data/chart_types_eu.js'
 
let chart = new Vizzu('myVizzu')
 
chart.initializing
 
chart.animate({
    data: Object.assign(data_14, 
      {filter: record => (record.Country == 'Austria' ||
                record.Country == 'Belgium' ||
                record.Country == 'Cyprus' ||
                record.Country == 'Denmark' ||
                record.Country == 'Greece' ||
                record.Country == 'Germany') &&
                (record.Year >=15)}),
})

chart.animate({
        config: {
            channels: {
                x: null,
                y: null,
                color: 'Country',
                lightness: 'Value 3 (+)',
                size: ['Value 2 (+)'],
                label: 'Country_code',
                noop: null
            },
            geometry: 'circle'
        },
        style: {
            plot: {
                marker: {
                    colorPalette: null
                }
            }
        }
    }
),

chart.animate({
  config: {
    channels: {
      x: 'Value 3 (+)',
      y: 'Value 2 (+)',
      color: 'Joy factors',
      lightness: null,
      size: null,
      label: 'Country_code',
      noop: 'Country'
    },
    geometry: 'circle'
  },
  style: {
    plot: {
      marker: {
        colorPalette: '#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF'
      }
    }
  }
}),

chart.animate({
        config: {
            channels: {
                x: 'Country',
                y: ['Joy factors', 'Value 2 (+)'],
                color: 'Joy factors',
                lightness: null,
                size: null,
                label: null,
                noop: null
            },
            geometry: 'rectangle'
        },
        style: {
            plot: {
                marker: {
                    colorPalette: '#ef675aFF #6d8cccFF #e6cf99FF #9c50abFF'
                }
            }
        }
    }
);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.