Skip to content

Instantly share code, notes, and snippets.

@wch

wch/vega-gradient-base.html

Created August 28, 2014 19:42
Show Gist options
  • Save wch/5988f125a555fa618ccf to your computer and use it in GitHub Desktop.
Save wch/5988f125a555fa618ccf to your computer and use it in GitHub Desktop.
Download ZIP
Vega gradient with base URL
Raw
vega-gradient-base.html
<!DOCTYPE html>
<html>
<head>
<base href="foo/">
<script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
<script src="http://trifacta.github.io/vega/vega.js"></script>
</head>
<body>
<script type="text/javascript">
var iris_spec = {
"width": 200,
"height": 200,
"data": [
{
"name": "iris",
}
],
"scales": [
{
"name": "x",
"nice": true,
"range": "width",
"domain": {"data": "iris", "field": "data.sepalWidth"}
},
{
"name": "y",
"nice": true,
"range": "height",
"domain": {"data": "iris", "field": "data.petalLength"}
},
{
"name": "c",
"type": "linear",
"domain": {"data": "iris", "field": "data.sepalWidth"},
"range": ["red", "white"],
"domain": {"data": "iris", "field": "data.sepalWidth"}
}
],
"axes": [
{"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
{"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
],
"legends": [
{
"fill": "c",
"title": "sepal width",
"offset": 0
}
],
"marks": [
{
"type": "symbol",
"from": {"data": "iris"},
"properties": {
"enter": {
"x": {"scale": "x", "field": "data.sepalWidth"},
"y": {"scale": "y", "field": "data.petalLength"},
"fill": {"scale": "c", "field": "data.sepalWidth"},
"fillOpacity": {"value": 0.5}
},
"update": {
"x": {"scale": "x", "field": "data.sepalWidth"},
"y": {"scale": "y", "field": "data.petalLength"},
"fill": {"scale": "c", "field": "data.sepalWidth"},
"size": {"value": 100},
"stroke": {"value": "transparent"}
}
}
}
]
}
var iris_data = {
"iris" : [
{"sepalWidth": 1, "petalLength": 9, "species": "setosa"},
{"sepalWidth": 2, "petalLength": 8, "species": "setosa1"},
{"sepalWidth": 3, "petalLength": 7, "species": "setosa1"},
{"sepalWidth": 4, "petalLength": 6, "species": "versicolor"},
{"sepalWidth": 5, "petalLength": 5, "species": "versicolor"},
{"sepalWidth": 6, "petalLength": 4, "species": "versicolor1"},
{"sepalWidth": 7, "petalLength": 3, "species": "virginica"},
{"sepalWidth": 8, "petalLength": 2, "species": "virginica1"},
{"sepalWidth": 9, "petalLength": 1, "species": "virginica1"}
]
};
var vis;
function parseSpec(renderer) {
vg.parse.spec(iris_spec, function(chart) {
vis = chart({el:"#vis", renderer: renderer});
vis.data(iris_data);
vis.update();
});
}
parseSpec("svg");
</script>
<div>
The HEAD of page has a tag of the form <code>&lt;base href=&quot;foo/&quot;&gt;</code>.
When rendered with SVG, the gradient is black. When rendered with Canvas, it looks fine.
<br><br>
<a href="#" onclick="parseSpec('svg'); return false;">SVG</a>
<br><br>
<a href="#" onclick="parseSpec('canvas'); return false;">Canvas</a>
<br><br>
<div id="vis"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment