Vega (+Lite)

What is the easiest and most open source way to create a chart and put it online?

I would say Python for the first part of this question. And obviously a javascript library for the 2nd part. D3 can create any chart, but it’s not that fast to deploy since it goes down to the basic elements. We need something higher level than that, like chartjs, plotly, or the many other variations on d3-discovery. Or, the topic of this post: vega(+lite).

let me just show you how it works. The process is taken from UW Data’s post on Observable

Here is the chart.

In an observable notebook, the following code will draw the above chart (after requiring d3 and vegalite)

{
var r=d3.range(51);
var data=r.map(d => ({ x:2*pi/50*d, y:Math.sin(2*pi/50*d) }) )
var chart= vl.markLine({color:'blue'})
  .data(data)
  .width(600)
  .height(350)
  .encode(
    vl.x().field("x"), 
    vl.y().fieldQ("y").scale({domain:d3.extent(data,d=>d.y)}),
       );
 return chart.render()
}

Return this chart object and do the following in a different cell

{
  return html`<pre>${JSON.stringify(chart.toJSON(), 0, 2)}</pre>`; // format JSON data
}

The above is good if you want to view/edit the vega output, which can be included directly as JS. It’s too many words though, and I prefer the simple API above. Below is how to generate the javascript with just the API, and this is the vega approach.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

  </head>
  <body>

    <div id="chart"></div>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.10.4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite-api@0.1.0"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>

   <script>
   vl.register(vega, vegaLite, {});
   const pi=Math.PI;
   var r=d3.range(51);
   var data=r.map(d => ({ x:2*pi/50*d, y:Math.sin(2*pi/50*d) }) )
   var chart= vl.markLine({color:'blue'})
  .data(data)
  .width(600)
  .height(350)
  .encode(
    vl.x().field("x"), 
    vl.y().fieldQ("y").scale({domain:d3.extent(data,d=>d.y)}),
       ).render().then(chart => {
          document
            .getElementById("chart")
            .appendChild(chart);
        });

</script>


  </body>
</html>

References