Old school D3 from simpler times

All examples By author By category About

AlainRo

Full window Github gist

Vega-Lite

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <title>Vega Lite Bar Chart</title>
  <meta charset="utf-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js"></script>

<style media="screen">
    /* Add space between Vega-Embed links  */
    .vega-actions a {
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <h1>Template for Embedding Vega-Lite Visualization</h1>
  
  <div id="vis"></div>

<script>
  // Assign the specification to a local variable vlSpec.
  var vlSpec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
};

// Embed the visualization in the container with id `vis`
   const opt = {renderer: "svg"};
  vegaEmbed("#vis", vlSpec, opt);
  </script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js

https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js

https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js