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>

https://cdn.jsdelivr.net/npm/vega@3

https://cdn.jsdelivr.net/npm/vega-lite@2

https://cdn.jsdelivr.net/npm/vega-embed@3

https://cdn.jsdelivr.net/npm/vega-tooltip@0