Vega-Lite Line Charts

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.3/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>
</head>

<body>
  <div id="line"></div>
  <div id="stacked"></div>
  <div id="multiples"></div>
  <div id="lasagna"></div>
  <div id="horizon"></div>
  <div id="joy"></div>
  
  <script>
    switch (window.location.hash) {
      case "#line":
        vegaEmbed('#line', "line.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#stacked":
        vegaEmbed('#stacked', "stacked.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#multiples":
        vegaEmbed('#multiples', "multiples.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#lasagna":
        vegaEmbed('#lasagna', "lasagna.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#horizon":
        vegaEmbed('#horizon', "horizon.vg.json", {actions: false, renderer: "svg"});
        break;
      case "#joy":
        vegaEmbed('#joy', "joy.vg.json", {actions: false, renderer: "svg"});
        break;
      default:
        vegaEmbed('#line', "line.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#stacked', "stacked.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#multiples', "multiples.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#lasagna', "lasagna.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#horizon', "horizon.vg.json", {actions: false, renderer: "svg"});
        vegaEmbed('#joy', "joy.vg.json", {actions: false, renderer: "svg"});
    }
  </script>
</body>

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

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

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