Skip to content

Instantly share code, notes, and snippets.

@ijlyttle

ijlyttle/.block

Created September 15, 2018 14:01
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 ijlyttle/7b392b833cc212c746894510ddb34e71 to your computer and use it in GitHub Desktop.
Save ijlyttle/7b392b833cc212c746894510ddb34e71 to your computer and use it in GitHub Desktop.
Download ZIP
Vega Tree-Layout with Legend
Raw
.block
license: mit
height: 500
scrolling: yes
border: yes
Raw
README.md

This is a variation of the Vega Tree-Layout Example, where I have introduced a "legends" element to the spec.

"legends": [
  {"fill": "color", "type": "symbol", "title": "depth"}
]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- uploaded using vegawidget -->
<script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.16.0"></script>
<link rel="stylesheet" type="text/css" href="vega-embed.css">
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
const spec = "spec.json";
const opt = {"defaultStyle":true,"renderer":"canvas"};
vegaEmbed('#vis', spec, opt).then(function(result) {
// access view as result.view
}).catch(console.error);
</script>
</body>
</html>
Raw
spec.json
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 600,
"height": 1600,
"padding": 5,
"signals": [
{
"name": "labels",
"value": true,
"bind": {
"input": "checkbox"
}
},
{
"name": "layout",
"value": "tidy",
"bind": {
"input": "radio",
"options": [
"tidy",
"cluster"
]
}
},
{
"name": "links",
"value": "diagonal",
"bind": {
"input": "select",
"options": [
"line",
"curve",
"diagonal",
"orthogonal"
]
}
}
],
"data": [
{
"name": "tree",
"url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {
"signal": "layout"
},
"size": [
{
"signal": "height"
},
{
"signal": "width - 100"
}
],
"as": [
"y",
"x",
"depth",
"children"
]
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{
"type": "treelinks"
},
{
"type": "linkpath",
"orient": "horizontal",
"shape": {
"signal": "links"
}
}
]
}
],
"scales": [
{
"name": "color",
"type": "sequential",
"range": {
"scheme": "magma"
},
"domain": {
"data": "tree",
"field": "depth"
},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {
"data": "links"
},
"encode": {
"update": {
"path": {
"field": "path"
},
"stroke": {
"value": "#ccc"
}
}
}
},
{
"type": "symbol",
"from": {
"data": "tree"
},
"encode": {
"enter": {
"size": {
"value": 100
},
"stroke": {
"value": "#fff"
}
},
"update": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"fill": {
"scale": "color",
"field": "depth"
}
}
}
},
{
"type": "text",
"from": {
"data": "tree"
},
"encode": {
"enter": {
"text": {
"field": "name"
},
"fontSize": {
"value": 9
},
"baseline": {
"value": "middle"
}
},
"update": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"dx": {
"signal": "datum.children ? -7 : 7"
},
"align": {
"signal": "datum.children ? 'right' : 'left'"
},
"opacity": {
"signal": "labels ? 1 : 0"
}
}
}
}
],
"legends": [
{
"fill": "color",
"type": "symbol",
"title": "depth"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment