Learn Vega-Lite

[miguelito34]

• [ ] Shorter Intro to vega-lite
• [ ] Lengthier UW Tutorials

[rsyoh-97]

@zstumgoren – I'm struggling a bit with understanding vega embed:

<script type="text/javascript">
  var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
  vegaEmbed('#vis', spec).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);
</script>

What is the url that var spec is storing?

It also looks different from this example, where the json is directly inserted into the HTML: https://vega.github.io/vega-lite/tutorials/getting_started.html#the-data

 <script>
      // Assign the specification to a local variable vlSpec.
      var vlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        data: {
          values: [
            {a: 'C', b: 2},
            {a: 'C', b: 7},
            {a: 'C', b: 4},
            {a: 'D', b: 1},
            {a: 'D', b: 2},
            {a: 'D', b: 6},
            {a: 'E', b: 8},
            {a: 'E', b: 4},
            {a: 'E', b: 7}
          ]
        },
        mark: 'bar',
        encoding: {
          y: {field: 'a', type: 'nominal'},
          x: {
            aggregate: 'average',
            field: 'b',
            type: 'quantitative',
            axis: {
              title: 'Average of b'
            }
          }
        }
      };

      // Embed the visualization in the container with id `vis`
      vegaEmbed('#vis', vlSpec);
    </script>

I wasn't sure which way we were supposed to follow.

I also tried to follow this stack overflow advice and changed my data url but it doesn't work, nor do I really understand why that's supposed to help: https://stackoverflow.com/questions/64336084/how-to-put-local-html-file-in-a-webpage

Thank you!!

[zstumgoren]

@miguelito34 Heads up that Rachel and I debugged this issue and have sent pull request #20 for integration into the master branch