Old school D3 from simpler times

All examples By author By category About

domoritz

Full window Github gist

Memory leak

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.12"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <div id="vis"></div>

<script>
    const spec1 = vegaLite.compile({
      $schema: "https://vega.github.io/schema/vega-lite/v4.json",
      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" },
        tooltip: { field: "b", type: "quantitative" }
      }
    }).spec;
    const spec2 = vegaLite.compile({
      $schema: "https://vega.github.io/schema/vega-lite/v4.json",
      description: "A simple bar chart with embedded data.",
      width: 500,
      data: {
        values: [
          { a: "A", b: 33 },
          { a: "B", b: 32 },
          { a: "C", b: 16 },
          { a: "D", b: 28 },
          { a: "E", b: 35 },
          { a: "F", b: 81 },
          { a: "G", b: 90 },
          { a: "H", b: 10 },
          { a: "I", b: 5 }
        ]
      },
      mark: "bar",
      encoding: {
        x: { field: "a", type: "ordinal" },
        y: { field: "b", type: "quantitative" },
        tooltip: { field: "b", type: "quantitative" }
      }
    }).spec;
    let spec = spec1;
    let view;

function myFunction() {
      setInterval(function() {
        if (spec === spec1) spec = spec2;
        else spec = spec1;
        
        if (view) {
           view.finalize();
        }
        
        view = new vega.View(vega.parse(spec), {
          container: '#vis'
        });
        view.runAsync()

//         vegaEmbed("#vis", spec)
//           .then(function(result) {
//           // save view so we can finalize it
//           	view = result.view;
//         	})
//           .catch(console.warn);
        
      }, 400);
    }
  </script>

<button onclick="myFunction()">Update</button>
</body>

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

https://cdn.jsdelivr.net/npm/vega-lite@4.0.0-beta.12

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