forked from domoritz's block: Vega block example
forked from domoritz's block: Demo of config override bug
license: bsd-3-clause |
forked from domoritz's block: Vega block example
forked from domoritz's block: Demo of config override bug
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script> | |
var spec = { | |
"$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
"width": 200, | |
"height": 200, | |
"padding": 5, | |
"data": [ | |
{ | |
"name": "source", | |
"url": "data/cars.json", | |
"transform": [ | |
{ | |
"type": "filter", | |
"expr": "datum['Horsepower'] != null && datum['Miles_per_Gallon'] != null && datum['Acceleration'] != null" | |
} | |
] | |
} | |
], | |
"scales": [ | |
{ | |
"name": "x", | |
"type": "linear", | |
"round": true, | |
"nice": true, | |
"zero": true, | |
"domain": {"data": "source", "field": "Horsepower"}, | |
"range": "width" | |
}, | |
{ | |
"name": "y", | |
"type": "linear", | |
"round": true, | |
"nice": true, | |
"zero": true, | |
"domain": {"data": "source", "field": "Miles_per_Gallon"}, | |
"range": "height" | |
}, | |
{ | |
"name": "size", | |
"type": "linear", | |
"round": true, | |
"nice": false, | |
"zero": true, | |
"domain": {"data": "source", "field": "Acceleration"}, | |
"range": [4,361] | |
} | |
], | |
"axes": [ | |
{ | |
"scale": "x", | |
"grid": true, | |
"domain": false, | |
"orient": "bottom", | |
"tickCount": 5, | |
"title": "Horsepower" | |
}, | |
{ | |
"scale": "y", | |
"grid": true, | |
"domain": false, | |
"orient": "left", | |
"titlePadding": 5, | |
"title": "Miles_per_Gallon" | |
} | |
], | |
"legends": [ | |
{ | |
"size": "size", | |
"title": "Acceleration", | |
"format": "s", | |
"encode": { | |
"symbols": { | |
"update": { | |
"strokeWidth": {"value": 2}, | |
"opacity": {"value": 0.5}, | |
"stroke": {"value": "#4682b4"}, | |
"shape": {"value": "circle"} | |
} | |
} | |
} | |
} | |
], | |
"marks": [ | |
{ | |
"name": "marks", | |
"type": "symbol", | |
"from": {"data": "source"}, | |
"encode": { | |
"update": { | |
"x": {"scale": "x", "field": "Horsepower"}, | |
"y": {"scale": "y", "field": "Miles_per_Gallon"}, | |
"size": {"scale": "size", "field": "Acceleration"}, | |
"shape": {"value": "circle"}, | |
"strokeWidth": {"value": 2}, | |
"opacity": {"value": 0.5}, | |
"stroke": {"value": "#4682b4"}, | |
"fill": {"value": "transparent"} | |
} | |
} | |
} | |
] | |
} | |
var runtime = vega.parse(spec); | |
var loader = vega.loader({baseURL: 'https://vega.github.io/editor/'}); | |
// loader.load('data/cars.json').then(console.log).catch(console.warn); | |
// works (toggle between /* and //* to toggle code blocks) | |
/* | |
var view = new vega.View(runtime, {loader: loader}) | |
.logLevel(vega.Warn) | |
.initialize(document.querySelector('#vis')) | |
.run(); | |
/*/ | |
// does not work | |
var view = new vega.View(runtime) | |
.loader(loader) | |
.logLevel(vega.Warn) | |
.initialize(document.querySelector('#vis')) | |
.run(); | |
//*/ | |
</script> | |
</body> |