Skip to content

Instantly share code, notes, and snippets.

@Eleonore9
Last active July 25, 2018 22:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Eleonore9/0a759cc56022e40930530f32a0d92525 to your computer and use it in GitHub Desktop.
Save Eleonore9/0a759cc56022e40930530f32a0d92525 to your computer and use it in GitHub Desktop.
Basic data viz with Vega

Viz playground - basic data viz with Vega

Link

bl.ocks.org/Eleonore9/0a759cc56022e40930530f32a0d92525

Content

Bar chart made with Vega-Lite for a blog post.

Vega-Lite is a simple JSON like grammar to create (interactive) data visualisations.

The data used is only testing data added to the script:

"data": {
            "values": [{"element": 1, "value": 4},
	               {"element": 2, "value": 8},
	               {"element": 3, "value": 15},
	               {"element": 4, "value": 16},
	               {"element": 5, "value": 23},
	               {"element": 6, "value": 42}]
	  }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vega(Lite)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vega-tooltip@0/build/vega-tooltip.min.css">
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0"></script>
<style>
.container {
padding: 3%;
}
.vega-actions {
margin-left: 4%;
}
.vega-actions a {
margin-left: 1.5%;
font-size: 12px;
}
h2, h3 {
margin-top: 2%;
}
</style>
</head>
<body>
<div class="container">
<h1>Let's make a bar chart!</h1>
<h2>Vega(-Lite)</h2>
<p>Here's classic <a href="https://vega.github.io/">Vega</a> bar chart using Vega-Lite grammar.</p>
<p>The user experience is improved using <a href="https://github.com/vega/vega-tooltip" target="_blank">Vega-Tooltip</a> to display data points info on mouseover.</p>
<div id="vis"></div>
<script>
var chart = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [{"element": 1, "value": 4},
{"element": 2, "value": 8},
{"element": 3, "value": 15},
{"element": 4, "value": 16},
{"element": 5, "value": 23},
{"element": 6, "value": 42}]
},
"mark": "bar",
"encoding": {
"y": { "field": "element", "type": "ordinal" },
"x": { "field": "value", "type": "quantitative" }
}
};
var opt = {
"mode": "vega-lite",
"renderer": "svg",
"width": 450,
"height": 450
};
vegaEmbed("#vis", chart, opt).then(function (result) {
vegaTooltip.vegaLite(result.view, chart);
}).catch(console.error);
</script>
</div>
</body>
</html>
@Eleonore9
Copy link
Author

Eleonore9 commented Feb 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment