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://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;
}