How to embed vega-lite in svelte component?

Question

I tried to use the simple example to make a vega-lite embedded graph in a svelte component. I get vegaEmbed is not defined.

I have installed vega, vega-lite and vega-embed via npm before

<script>
    import { onMount } from 'svelte';
    import * as vega from "vega"
    import * as vega-lite from "vega-lite"
    import * as vegaEmbed  from "vega-embed";
    onMount(() => {
    let yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
        description: 'A simple bar chart with embedded data.',
        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'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);
        })
</script>
<div id="vis"></div>

I am looking to simply display a vegalite graph, next I want it to get its specs from parent component.

Answer 1

Your option will work if you import the scripts directly in your index.html or your specific HTML follows.

<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0/build/vega.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0/build/vega-lite.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0/build/vega-embed.js"></script>

As per the documentation in the https://github.com/vega/vega-embed/blob/v4.0.0/README.md the npm version exposes a different method namely embed . check the API Reference section in the README.

you can try something along the lines of

embed('#vis', yourVlSpec)

Note theat the spec argument considers string arguments as URL which should return a JSON. so if your spec is string it would be good to do a JSON.parse(yourSpec) before calling the embed function.

This is how I did it in my angular project. Note: Following is a specific sample using typescript.. :D

1. First import the the embed function from you node_modules. import {default as embed} from 'vega-embed ;
2. Then in a function inside my component I called the embed method.
3. In my case it was ngOnInit which is called during the component initialization.

ngOnInit() {

   // option 1: using a string spec.
   let spec = `{
     "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
     "description": "Simple bar chart",
     "data": {
         "values": [
             {"x": "A", "y": 28}, {"x": "y", "B": 55}, {"x": "C", "y": 43},
             {"x": "D", "y": 91}, {"x": "E", "y": 81}, {"x": "F", "y": 53},
             {"x": "G", "y": 19}, {"x": "H", "y": 87}, {"x": "I", "y": 52}
         ]
     },
     "mark": "bar",
     "encoding": {
         "x": {"field": "x", "type": "ordinal"},
         "y": {"field": "y", "type": "quantitative"}
     }
   }`;
   embed("#vis", "/assets/data/spec2.json", { actions: false }).catch(error =>
     console.log(error)
   );



   // option 2: where the spec is saved as a json file in my project assets.    
   embed("#vis2", JSON.parse(spec), { actions: false }).catch(error =>
     console.log(error)
   );
 }

Answer 2

I couldn't get it working with rollup, so as @theWebalyst suggested I switched to webpack. There is a template here: https://github.com/sveltejs/template-webpack

The something like

<script>
    import {default as vegaEmbed} from 'vega-embed';
    export let name;

    var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";

    vegaEmbed("#viz", spec, { actions: false }).catch(error => console.log(error) );

</script>

Answer 3

Install the official svelte-vega package. It supports both Vega and Vega-Lite components.

npm install svelte-vega

Follow instructions here: https://github.com/vega/svelte-vega .