Vega-Lite: Use a variable for filter condition (newbie question)

[Clare Churcher]

Hello - I am a newbie with Vega lite (loving it - thank you).

I want to be able to filter the data depending on a variable from outside the specification (will be the logged in user eventually)

Here is the outline of the code which is working fine for the hard coded <selectedperson>.  

(In vega I managed to use a select drop box but am unsure how to achieve a similar result in vega lite.)

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

    }

    <script>

       var vlSpec = {

       "data": {"url": "Filename"},

       "transform": { "filter": "datum.player == 'selectedPerson' " },

 ….rest of specification

        }

      

         var embedSpec = {

            mode: "vega-lite",

            spec: vlSpec

        };

        vg.embed("#vis", embedSpec, function (error, result) {

        });

   

     </script>

[Paul Hobson]

Hey Clare,

You need to use what's known as "string formatting" or "string interpolation".

The syntax is something like

var sound = 'meow';

var sentence = `the cat goes ${sound}`;

So your spec becomes:

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

    }

    <script>

       var player = 'Jane Doe'; 

       var vlSpec = {

       "data": {"url": "Filename"},

       "transform": { "filter": `datum.player == "${player}"` },

 ….rest of specification

        }

      

         var embedSpec = {

            mode: "vega-lite",

            spec: vlSpec

        };

        vg.embed("#vis", embedSpec, function (error, result) {

        });

   

     </script>

Hope that helps,

-Paul

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Clare Churcher]

Thanks for such a quick reply.  :-)

I'm still not sure how to get the value "Jane Doe" into the variable from outside the spec and what will trigger the filter to run again.

Cheers

[Paul Hobson]

Triggering a re-render is a separate issue -- one which well beyond my knowledge of vega and JS.

However, the modifications of your spec that I added will insert whatever value the `player` variable has into the filter string.

--

[Roy I]

A couple of suggestions:

Method 1. Use a javascript library to insert parameter values into Vega/Vega-Lite spec as "template", and re-parse the modified Vega spec.

Example: handlebars or underscore / lodash

      http://handlebarsjs.com/

      http://underscorejs.org/#template

      https://lodash.com/docs/4.17.4#template

Method 2. For Vega v2 or v3 beta, the preferred approach is to define signal(s) in Vega spec and simply modify the signal value(s) in javascript.

Vega 2.6

      https://github.com/vega/vega/wiki/Signals

      https://github.com/vega/vega/wiki/Runtime

Vega 3.0.0 beta 27

      https://vega.github.io/vega/docs/signals/

      https://vega.github.io/vega/docs/api/view/

 

Note: Vega-Lite 1.0 does not appear to support signals, but you can modify the Vega v2 spec source generated by Vega-Lite on-line editor:

      http://vega.github.io/vega-editor/?mode=vega-lite

[Kanit Wongsuphasawat]

 

Note: Vega-Lite 1.0 does not appear to support signals, but you can modify the Vega v2 spec source generated by Vega-Lite on-line editor:

      http://vega.github.io/vega-editor/?mode=vega-lite

You can similarly use Vega-lite 2 alpha to generate a Vega 3 spec and add your own signals. :) 

 

[Clare Churcher]

THank you.

I am unfamiliar with templates and still not sure how to "re-parse the modified Vega spec".   I'll try and see if I can figure it out.

I have managed to make this work in vega 2 using signals but I really like vega-lite (a lot)

[Clare Churcher]

Thanks.

Looks like I'll just go with vega2

Cheers