Vega Tutorial

Vega is a declarative data visualization library. There is no programming involved. You can use it to convert a JSON declaration like this:

... into a visualization like this:

Setting up Vega

You can embed Vega in any HTML document. First, add a placeholder for the Vega chart:

    <div id="my-chart"></div>
  

Then, include the dependent libraries:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.2.5/vega.min.js"></script>
  

Finally, render the Vega specification into that chart:

    <script>
      var spec = {
        // Vega Spec in JSON comes here. Try the spec at the top of this page
      }
      vg.parse.spec(spec, function(chart) {
        chart({el: '#my-chart'}).update()
      })
    </script>
  

This tutorial teaches you how to create different types of charts, step-by-step.