generated vega-lite and vega specs not working
Closed this issue · 3 comments
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
FormatthenParse.
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.csvwith 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>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.
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.
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.
@domoritz Thanks for mentioning that.
@espinielli -- I'll close this issue then. (We already have a vega-lite issue for migrating to vega2.)