Skip to content

Instantly share code, notes, and snippets.

@maartenzam

maartenzam/image.json

Created June 1, 2017 13:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maartenzam/5a0465f75c18c275b1aac80aecb4e548 to your computer and use it in GitHub Desktop.
Save maartenzam/5a0465f75c18c275b1aac80aecb4e548 to your computer and use it in GitHub Desktop.
Download ZIP
Scale an svg image marker in Vega
Raw
image.json
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 600,
"height": 400,
"padding": 5,
"signals": [
{ "name": "x", "value": 75,
"bind": {"input": "range", "min": 0, "max": 100, "step": 1} },
{ "name": "y", "value": 75,
"bind": {"input": "range", "min": 0, "max": 100, "step": 1} },
{ "name": "w", "value": 200,
"bind": {"input": "range", "min": 0, "max": 600, "step": 1} },
{ "name": "h", "value": 200,
"bind": {"input": "range", "min": 0, "max": 600, "step": 1} },
{ "name": "aspect", "value": false,
"bind": {"input": "checkbox"} },
{ "name": "align", "value": "left",
"bind": {"input": "select", "options": ["left", "center", "right"]} },
{ "name": "baseline", "value": "top",
"bind": {"input": "select", "options": ["top", "middle", "bottom"]} }
],
"marks": [
{
"type": "image",
"encode": {
"enter": {
"url": {"value": "https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"}
},
"update": {
"opacity": {"value": 1},
"x": {"signal": "x"},
"y": {"signal": "y"},
"width": {"signal": "w"},
"height": {"signal": "h"},
"aspect": {"signal": "aspect"},
"align": {"signal": "align"},
"baseline": {"signal": "baseline"}
},
"hover": {
"opacity": {"value": 0.5}
}
}
}
]
}
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vega scale image marker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.32/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.3/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.14/vega-embed.js"></script>
</head>
<body>
<div id="vis"></div>
<script>
var opt = {
"renderer" : "svg",
"actions" : {export: true, source: false, editor: false},
}
vega.embed('#vis', 'image.json', opt);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment