run javascript on altair plot clicks











up vote
0
down vote

favorite












I can generate altair plots consisting of multiple linked subplots, as can be seen in the famous car data visualization: https://altair-viz.github.io/gallery/selection_histogram.html



Clicks/Selections in one subplot can have an effect on the other subplot(s), mainly via filtering of the data.



However, I do not have a plot on its own, but it is embedded in a bigger web portal (think car dealership page). So my portal is driven by Flask serving pages embedding the altair plots. An example for this can be seen here: https://github.com/lemoncyb/flasked-altair



Functionally, I want to click on one car in the plot and then show some information about this car outside the scope of the plot (e.g. navigate to another page in the portal).



Technically, I want to run custom Javascript code upon clicks/selections.



How is this possible? How does one build bigger sites/applications around an altair plot that require interactions between the plot and the rest of the site?










share|improve this question


























    up vote
    0
    down vote

    favorite












    I can generate altair plots consisting of multiple linked subplots, as can be seen in the famous car data visualization: https://altair-viz.github.io/gallery/selection_histogram.html



    Clicks/Selections in one subplot can have an effect on the other subplot(s), mainly via filtering of the data.



    However, I do not have a plot on its own, but it is embedded in a bigger web portal (think car dealership page). So my portal is driven by Flask serving pages embedding the altair plots. An example for this can be seen here: https://github.com/lemoncyb/flasked-altair



    Functionally, I want to click on one car in the plot and then show some information about this car outside the scope of the plot (e.g. navigate to another page in the portal).



    Technically, I want to run custom Javascript code upon clicks/selections.



    How is this possible? How does one build bigger sites/applications around an altair plot that require interactions between the plot and the rest of the site?










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I can generate altair plots consisting of multiple linked subplots, as can be seen in the famous car data visualization: https://altair-viz.github.io/gallery/selection_histogram.html



      Clicks/Selections in one subplot can have an effect on the other subplot(s), mainly via filtering of the data.



      However, I do not have a plot on its own, but it is embedded in a bigger web portal (think car dealership page). So my portal is driven by Flask serving pages embedding the altair plots. An example for this can be seen here: https://github.com/lemoncyb/flasked-altair



      Functionally, I want to click on one car in the plot and then show some information about this car outside the scope of the plot (e.g. navigate to another page in the portal).



      Technically, I want to run custom Javascript code upon clicks/selections.



      How is this possible? How does one build bigger sites/applications around an altair plot that require interactions between the plot and the rest of the site?










      share|improve this question













      I can generate altair plots consisting of multiple linked subplots, as can be seen in the famous car data visualization: https://altair-viz.github.io/gallery/selection_histogram.html



      Clicks/Selections in one subplot can have an effect on the other subplot(s), mainly via filtering of the data.



      However, I do not have a plot on its own, but it is embedded in a bigger web portal (think car dealership page). So my portal is driven by Flask serving pages embedding the altair plots. An example for this can be seen here: https://github.com/lemoncyb/flasked-altair



      Functionally, I want to click on one car in the plot and then show some information about this car outside the scope of the plot (e.g. navigate to another page in the portal).



      Technically, I want to run custom Javascript code upon clicks/selections.



      How is this possible? How does one build bigger sites/applications around an altair plot that require interactions between the plot and the rest of the site?







      javascript interaction vega vega-lite altair






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 17 at 10:50









      mnagel

      4,38231650




      4,38231650
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          This cannot be done via Altair itself, but Altair renders its plots via Vega-Lite, which itself is compiled down to Vega. Vega's View API provides a Javascript API for handling events and callbacks in the way you're asking about. You can read more in Vega's Event Handling documentation.






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53350489%2frun-javascript-on-altair-plot-clicks%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote













            This cannot be done via Altair itself, but Altair renders its plots via Vega-Lite, which itself is compiled down to Vega. Vega's View API provides a Javascript API for handling events and callbacks in the way you're asking about. You can read more in Vega's Event Handling documentation.






            share|improve this answer

























              up vote
              0
              down vote













              This cannot be done via Altair itself, but Altair renders its plots via Vega-Lite, which itself is compiled down to Vega. Vega's View API provides a Javascript API for handling events and callbacks in the way you're asking about. You can read more in Vega's Event Handling documentation.






              share|improve this answer























                up vote
                0
                down vote










                up vote
                0
                down vote









                This cannot be done via Altair itself, but Altair renders its plots via Vega-Lite, which itself is compiled down to Vega. Vega's View API provides a Javascript API for handling events and callbacks in the way you're asking about. You can read more in Vega's Event Handling documentation.






                share|improve this answer












                This cannot be done via Altair itself, but Altair renders its plots via Vega-Lite, which itself is compiled down to Vega. Vega's View API provides a Javascript API for handling events and callbacks in the way you're asking about. You can read more in Vega's Event Handling documentation.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 18 at 3:19









                jakevdp

                17.1k33049




                17.1k33049






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53350489%2frun-javascript-on-altair-plot-clicks%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

                    Alcedinidae

                    Origin of the phrase “under your belt”?