dynamic data binding

391 views
Skip to first unread message

Steve Felsheim

unread,
Sep 23, 2015, 6:16:19 PM9/23/15
to vega-js
Hello, 

I am evaluating vega and wanted to try out the dynamic data binding.  Its been a long time since I did any javascript, so ....

I stripped my test down to use the example.

If I do this:

<html>
<head>
    <title>Vega Scaffold</title>
    <script src="http://vega.github.io/vega/vega.min.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
    // parse a spec and create a visualization view
    function parse(spec) {
        vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
    }

    parse("viz.json");
</script>
</html>


With viz.json being this:

(see attached).  here is the data section.



  "data": [
    {
      "name": "table",
      "values":[
          {"category":"Warner Independent", "amount":63116006},
          {"category":"Buena Vista","amount":11215827077},
          {"category":"Polygram","amount":16682174},
          {"category":"Orion Pictures","amount":29636352},
          {"category":"Freestyle","amount":32596092},
          {"category":"Overture Films","amount":47580972},
          {"category":"MGM","amount":579428490},
          {"category":"Fine Line","amount":71784660},
          {"category":"Roadside Attractions","amount":38359509},
          {"category":"Dreamworks","amount":2003922292},
          {"category":"Artisan","amount":30582204},
          {"category":"Focus","amount":939913659}
      ]
    }
  ],

It renders the bar graph as I would expect (well, it renders it, but..)

Now i change my viz.json data section to look like this:

 "data": [
    {
      "name": "table"
    }
  ],

now I want to bind the data when the view is constructed, so I change to this.  (normally I would fetch the data from a REST call and then bind it)

<html>
<head>
    <title>Vega Scaffold</title>
    <script src="http://vega.github.io/vega/vega.min.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
    function parse(spec) {
        vg.parse.spec(spec, function(chart) {
        var dataJson = '{ "data": [ {' +
                       '   "name": "table", ' +
                       '   "values": [ ' +
                       '   {"category":"Warner Independent", "amount":63116006}, ' +
                       '   {"category":"Buena Vista","amount":11215827077}, ' +
                       '   {"category":"Polygram","amount":16682174}, ' +
                       '   {"category":"Orion Pictures","amount":29636352}, ' +
                       '   {"category":"Freestyle","amount":32596092}, ' +
                       '   {"category":"Overture Films","amount":47580972}, ' +
                       '   {"category":"MGM","amount":579428490}, ' +
                       '   {"category":"Fine Line","amount":71784660}, ' +
                       '   {"category":"Roadside Attractions","amount":38359509}, ' +
                       '   {"category":"Dreamworks","amount":2003922292}, ' +
                       '   {"category":"Artisan","amount":30582204}, ' +
                       '   {"category":"Focus","amount":939913659} ' +
                       '   ] } ]' +
                       '   }';

        var pdata = JSON.parse(dataJson);
        chart({el:"#vis", data:pdata}).update(); });
      }

    parse("viz_dynamic.json");
</script>
</html>

The dataJson parses fine, but when I get this error in Chrome at the highlighted line.

Uncaught TypeError: Cannot read property 'name' of undefined
i @ vega.min.js:5(anonymous function) @ vega.min.js:6o.87.g.data @ vega.min.js:6o.87.r.factory @ vega.min.js:6(anonymous function) @ vega_test.html:35(anonymous function) @ vega.min.js:7


What JSON structure does the data: expect?  I have tried several variations, but no luck.

Thanks!

Steve
viz.json

Arvind Satyanarayan

unread,
Sep 23, 2015, 7:23:19 PM9/23/15
to Steve Felsheim, vega-js
Hi Steve,

This page of the documentation explains how you'd supply the data at runtime: https://github.com/vega/vega/wiki/Streaming-Data

Essentially, if you capture the result of calling the chart constructor, you can then insert the data and then call update like so:

var view = chart({ el: '#vis' });
view.data('table').insert(pdata);
view.update();

Where pdata should be just the array of records you wish to insert into the "table" data source. 

Hope this helps!

-Arvind
-----
Arvind Satyanarayan <http://arvindsatya.com/>

--
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+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Steve Felsheim

unread,
Sep 24, 2015, 11:11:59 AM9/24/15
to Arvind Satyanarayan, vega-js
Thank you.

I was led astray with the ‘data’ argument on the view construction, here https://github.com/vega/vega/wiki/Runtime

I will dig into the streaming to see if I can get it to work.

Thanks again

Steve

Steve Felsheim

unread,
Sep 24, 2015, 12:16:57 PM9/24/15
to Arvind Satyanarayan, vega-js
This works perfectly.  Thanks!

<html>
<head>
    <title>Vega Scaffold</title>
    <script src="http://vega.github.io/vega-editor/vendor/d3.min.js"></script>
    <script src="http://vega.github.io/vega-editor/vendor/d3.geo.projection.min.js"></script>
    <script src="http://vega.github.io/vega-editor/vendor/topojson.js"></script>
    <script src="http://vega.github.io/vega-editor/vendor/d3.layout.cloud.js"></script>
    <script src="http://vega.github.io/vega/vega.min.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
    var xmlhttp;

    function init() {
        xmlhttp = new XMLHttpRequest();

    }

    // parse a spec and create a visualization view
    function parse(spec) {
        init();
        var url = "http://localhost:8080/palette?query=select+Studio+as+category%2C+sum%28RevenueDomestic%29+as+amount+from+movies+group+by+Studio&limit=10";
        xmlhttp.open('GET', url, true);
        xmlhttp.send(null);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var data = eval("(" + xmlhttp.responseText + ")");
                    vg.parse.spec(spec, function(chart) {

                        var view = chart({el:"#vis"});
                        view.data('table').insert(data);
                        view.update();

                        } );
                    }
                }
            }
        }

    parse("viz.json");
</script>
</html>
From:  Arvind Satyanarayan
Date:  Wednesday, September 23, 2015 at 6:22 PM
To:  Steve Felsheim
Cc:  vega-js
Subject:  Re: dynamic data binding

Reply all
Reply to author
Forward
0 new messages