Vega - A visualization grammar

About

With vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate:

• raster graphics with HTML5 canvas
• or vector graphics with svg.

Vega require verbose specifications:

• control flow is handled by the model,
• but the logic of event and data processing must be explicitly provided.

As a result, Vega is not an ideal language to quickly analyze data. Vega Lite focuses on rapid creation of common statistical graphics by compiling to Vega.

Articles Related

Example

• https://vega.github.io/editor/
• https://www.mediawiki.org/wiki/Extension:Graph - Vega extension in Wikipedia !

Software

From vega/voyager, you can copy a vega graphic definition. See Voyager online

Example

var vlSpec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "data": {
      "values": [
        {"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
        {"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
        {"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
      ]
    },
    "mark": "bar",
    "encoding": {
      "y": {"field": "a", "type": "nominal"},
      "x": {
        "aggregate": "average", "field": "b", "type": "quantitative",
        "axis": {
          "title": "Average of b"
        }
      }
    }
  };

// https://github.com/vega/vega-embed
var opt = {
   actions: false,
   renderer: "svg"
   };
vegaEmbed("#vis", vlSpec, opt);

<!-- Container for the visualization -->
<div id="vis"></div>  

/* Add space between Vega-Embed links  */
.vega-actions a {
    margin-right: 5px;
}

Documentation / Reference

• Vega Lite: A Grammar of Interactive Graphics - Wongsuphasawat, Moritz, and Satyanarayan