Skip to content

Instantly share code, notes, and snippets.

@maartenzam

maartenzam/group.json

Last active June 1, 2017 12:07
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/da4daf6dde62c0cdb4d0822cf45a574a to your computer and use it in GitHub Desktop.
Save maartenzam/da4daf6dde62c0cdb4d0822cf45a574a to your computer and use it in GitHub Desktop.
Download ZIP
Scale markers in a Vega group marker
Raw
group.json
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 600,
"height": 400,
"padding": 5,
"signals": [
{ "name": "x", "value": 200,
"bind": {"input": "range", "min": 0, "max": 400, "step": 1} },
{ "name": "y", "value": 25,
"bind": {"input": "range", "min": 0, "max": 200, "step": 1} },
{ "name": "w", "value": 150,
"bind": {"input": "range", "min": 0, "max": 200, "step": 1} },
{ "name": "h", "value": 50,
"bind": {"input": "range", "min": 0, "max": 200, "step": 1} },
{ "name": "size", "value": 500,
"bind": {"input": "range", "min": 0, "max": 5000, "step": 1} }
],
"marks": [
{
"type": "group",
"encode": {
"enter": {
"fill": {"value": "#ffffff"},
"stroke": {"value": "#ffffff"}
},
"update": {
"x": {"signal": "x"},
"y": {"signal": "y"},
"width": {"signal": "w"},
"height": {"signal": "h"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.5}
}
},
"data": [
{
"name": "table",
"values": [
{"x": 30, "y": 30, "w": 30, "h": 100},
{"x": -5, "y": 70, "w": 40, "h": 40},
{"x": 60, "y": 120, "w": 100, "h": 20}
]
}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"interactive": false,
"encode": {
"enter": {
"x": {"field": "x"},
"y": {"field": "y"},
"width": {"field": "w"},
"height": {"field": "h"},
"fill": {"value": "blue"},
"fillOpacity": {"value": 0.7}
},
"update": {
"width": {"signal": "w" },
"height": {"signal": "h"}
}
}
},
{
"type": "symbol",
"encode": {
"enter": {
"shape": {"value": "diamond"},
"x": {"value": 100},
"y": {"value": 200},
"fill": {"value": "red"},
"opacity": {"value": 0.5 }
},
"update": {
"size": {"signal": "size"}
}
}
}
]
}
]
}
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vega scale markers in group</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', 'group.json', opt);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment