Skip to content

Instantly share code, notes, and snippets.

@ijlyttle
Created September 15, 2018 14:06
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/eefe50ee76b75f0246f0369bee8d9ae2 to your computer and use it in GitHub Desktop.
Save ijlyttle/eefe50ee76b75f0246f0369bee8d9ae2 to your computer and use it in GitHub Desktop.
Vega Radial-Tree-Layout with (non-appearing) Legend
license: mit
height: 500
scrolling: yes
border: yes

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

"legends": [
  {"fill": "color", "type": "symbol", "title": "depth"}
]

Unfortunately, the legend does not appear. I'd like to know how to encourage it to appear.

<!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>
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 720,
"height": 720,
"padding": 5,
"autosize": "none",
"signals": [
{
"name": "labels",
"value": true,
"bind": {
"input": "checkbox"
}
},
{
"name": "radius",
"value": 280,
"bind": {
"input": "range",
"min": 20,
"max": 600
}
},
{
"name": "extent",
"value": 360,
"bind": {
"input": "range",
"min": 0,
"max": 360,
"step": 1
}
},
{
"name": "rotate",
"value": 0,
"bind": {
"input": "range",
"min": 0,
"max": 360,
"step": 1
}
},
{
"name": "layout",
"value": "tidy",
"bind": {
"input": "radio",
"options": [
"tidy",
"cluster"
]
}
},
{
"name": "links",
"value": "line",
"bind": {
"input": "select",
"options": [
"line",
"curve",
"diagonal",
"orthogonal"
]
}
},
{
"name": "originX",
"update": "width / 2"
},
{
"name": "originY",
"update": "height / 2"
}
],
"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": [
1,
{
"signal": "radius"
}
],
"as": [
"alpha",
"radius",
"depth",
"children"
]
},
{
"type": "formula",
"expr": "(rotate + extent * datum.alpha + 270) % 360",
"as": "angle"
},
{
"type": "formula",
"expr": "PI * datum.angle / 180",
"as": "radians"
},
{
"type": "formula",
"expr": "inrange(datum.angle, [90, 270])",
"as": "leftside"
},
{
"type": "formula",
"expr": "originX + datum.radius * cos(datum.radians)",
"as": "x"
},
{
"type": "formula",
"expr": "originY + datum.radius * sin(datum.radians)",
"as": "y"
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{
"type": "treelinks"
},
{
"type": "linkpath",
"shape": {
"signal": "links"
},
"orient": "radial",
"sourceX": "source.radians",
"sourceY": "source.radius",
"targetX": "target.radians",
"targetY": "target.radius"
}
]
}
],
"scales": [
{
"name": "color",
"type": "sequential",
"range": {
"scheme": "magma"
},
"domain": {
"data": "tree",
"field": "depth"
},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {
"data": "links"
},
"encode": {
"update": {
"x": {
"signal": "originX"
},
"y": {
"signal": "originY"
},
"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.leftside ? -1 : 1) * 6"
},
"angle": {
"signal": "datum.leftside ? datum.angle - 180 : datum.angle"
},
"align": {
"signal": "datum.leftside ? '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