generated vega-lite and vega specs not working

espinielli commented 9 years ago

Here is my work scenario:

define custom csv data in Polestar:

Entity,Year,Days,Flights,Daily,change_pc
SES AREA RP1,2008,366,9714049,26.541,0
SES AREA RP1,2009,365,9032982,24.748,-6.8
SES AREA RP1,2010,365,9053168,24.803,0.2
SES AREA RP1,2011,365,9301162,25.483,2.7
SES AREA RP1,2012,366,9050691,24.729,-3.0
SES AREA RP1,2013,365,8910640,24.413,-1.3
SES AREA RP1,2014,365,9080883,24.879,1.9

properly define marks & co. to get a visualization:

click the debug tool link to get access to the vega-lite and vega specs Vega spec is as follows

{
"width": 400,
"height": 400,
"padding": "auto",
"data": [
 {
   "name": "raw",
   "format": {"parse": {"Year": "number","Daily": "number"}},
   "values": [
     {
       "Entity": "SES AREA RP1",
       "Year": 2008,
       "Days": 366,
       "Flights": 9714049,
       "Daily": 26.541,
       "change_pc": 0
     },
     {
       "Entity": "SES AREA RP1",
       "Year": 2009,
       "Days": 365,
       "Flights": 9032982,
       "Daily": 24.748,
       "change_pc": -6.8
     },
     {
       "Entity": "SES AREA RP1",
       "Year": 2010,
       "Days": 365,
       "Flights": 9053168,
       "Daily": 24.803,
       "change_pc": 0.2
     },
     {
       "Entity": "SES AREA RP1",
       "Year": 2011,
       "Days": 365,
       "Flights": 9301162,
       "Daily": 25.483,
       "change_pc": 2.7
     },
     {
       "Entity": "SES AREA RP1",
       "Year": 2012,
       "Days": 366,
       "Flights": 9050691,
       "Daily": 24.729,
       "change_pc": -3
     },
     {
       "Entity": "SES AREA RP1",
       "Year": 2013,
       "Days": 365,
       "Flights": 8910640,
       "Daily": 24.413,
       "change_pc": -1.3
     },
     {
       "Entity": "SES AREA RP1",
       "Year": 2014,
       "Days": 365,
       "Flights": 9080883,
       "Daily": 24.879,
       "change_pc": 1.9
     }
   ],
   "transform": [
     {"type": "filter","test": "d.data.Year!==null"},
     {"type": "filter","test": "d.data.Daily!==null"}
   ]
 },
 {"name": "table","source": "raw","transform": []}
],
"marks": [
 {
   "_name": "cell",
   "type": "group",
   "properties": {"enter": {"width": {"value": 400},"height": {"value": 400}}},
   "scales": [
     {
       "name": "x",
       "type": "linear",
       "domain": {"data": "table","field": "data.Year"},
       "range": [0,400],
       "zero": false,
       "reverse": false,
       "round": true,
       "nice": true
     },
     {
       "name": "y",
       "type": "linear",
       "domain": {"data": "table","field": "data.Daily"},
       "range": [400,0],
       "zero": false,
       "reverse": false,
       "round": true,
       "nice": true
     }
   ],
   "axes": [
     {
       "type": "x",
       "scale": "x",
       "grid": true,
       "layer": "back",
       "properties": {"grid": {"stroke": {"value": "black"},"opacity": {"value": 0.08}}},
       "title": "Year",
       "titleOffset": 38,
       "ticks": 5,
       "format": "4d"
     },
     {
       "type": "y",
       "scale": "y",
       "grid": true,
       "layer": "back",
       "properties": {
         "grid": {"stroke": {"value": "black"},"opacity": {"value": 0.08}},
         "labels": {"text": {"template": "{{data | number:'.3s'}}"}}
       },
       "title": "Daily",
       "titleOffset": 62
     }
   ],
   "marks": [
     {
       "type": "symbol",
       "from": {"data": "table"},
       "properties": {
         "enter": {
           "x": {"scale": "x","field": "data.Year"},
           "y": {"scale": "y","field": "data.Daily"},
           "size": {"value": 30},
           "shape": {"value": "circle"},
           "stroke": {"value": "steelblue"},
           "opacity": {"value": 1},
           "strokeWidth": {"value": 2}
         },
         "update": {
           "x": {"scale": "x","field": "data.Year"},
           "y": {"scale": "y","field": "data.Daily"},
           "size": {"value": 30},
           "shape": {"value": "circle"},
           "stroke": {"value": "steelblue"},
           "opacity": {"value": 1},
           "strokeWidth": {"value": 2}
         }
       }
     }
   ],
   "legends": []
 }
],
"scales": []
}

paste the vega spec in the on-line UI (I chose SVG as renderer but Canvas fails as well) and press Format then Parse. I do not get any visualization and in the Javascript console I get:

Uncaught SyntaxError: Unexpected token u                                   vega.github.io/:1
 ved.format @ editor.js:47
 (anonymous function) @ d3.min.js:1
Uncaught TypeError: Cannot read property 'addListener' of undefined        Graph.js:216
 (anonymous function) @ Graph.js:216
 (anonymous function) @ Graph.js:216
 forEachNode @ Graph.js:196
 33.prototype.connect @ Graph.js:203
 31.prototype.pipeline @ DataSource.js:204
 33.prototype.data @ Graph.js:37
 83.prototype.data @ Model.js:74
 89.parseData.datasource @ data.js:43
 (anonymous function) @ data.js:29
 parseData @ data.js:24
 parse @ spec.js:36
 parseSpec @ spec.js:41
 ved.parse @ editor.js:63
 (anonymous function) @ d3.min.js:1

My aim is to get a starting point for a runtime visualization. With

a local CSV file IFR_YY.csv with the contents above (not yet done)
a simple HTML index.html

<html>
  <head>
    <title>Vega Experiment</title>
    <script src="d3.min.js"></script>
    <script src="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("spec.json");
</script>
</html>

a file spec.json with the vega spec as above
D3.js library version 3.5.6 and vega version 2.0.0

The error I see in the Javascript console is the following (I do not use a separate CSV file but just the spec as above):

[Vega Err] INVALID SPECIFICATION: Must be a valid JSON object. TypeError: Cannot read property 'addListener' of undefined     vega.min.js:2

Note: I tried to lint the schema/spec here and got signalled about a problem on the data field.

kanitw commented 9 years ago

Current Vega-lite is still using Vega 1 but the Vega online editor is now using Vega 2.

We plan to finish the migration in about 2 months.

domoritz commented 9 years ago

The editor for Vega 1.5 is at https://trifacta.github.io/vega/editor/ and the spec you generated works. As @kanitw said, we are working on the upgrade.

kanitw commented 9 years ago

@domoritz Thanks for mentioning that.

@espinielli -- I'll close this issue then. (We already have a vega-lite issue for migrating to vega2.)

vega / polestar

generated vega-lite and vega specs not working #308