I'm creating a donut chart using Vega and the legend overlaps the chart despite everything I've tried.
Using orient: bottom-right: https://imgur.com/RZ2msqF
I've also tried to finagle the image into the empty space using legendX, legendY but the text cuts off.
Increasing width of the specification would work except it auto-centers the visualization, and I'm trying to avoid any more empty space than necessary.
I'm looking for a way to align the chart to the left instead of auto-centering, or anything else you guys can think of. Thanks!
You can set the outerRadius of each arc "slice of pie" in the marks section of the spec.json file, it is divided by width so increasing the default to 2.5 or 3 worked for me.
"marks": [
{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "id"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
}
},
"update": {
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"padAngle": {
"signal": "padAngle"
},
"innerRadius": {
"signal": "width / 4"
},
"outerRadius": {
"signal": "width / 2.5"
},
"cornerRadius": {
"signal": "cornerRadius"
}
}
}
}
]
Related
To get to know how events work in VEGA, I gave myself the simple exercice to render a dot and a text positioned on the cursors coordinates in a given view.
I managed to make a symbol follow the mouse coordinates, yet when I try to make two types of marks ( text and symbol) follow the mouse , it doesn't render them both but the first one appearing in the marks [ ] array.
Any ideas ?
Following specification is used in the exercice :
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 600,
"height": 600,
"signals": [
{
"name": "position",
"on": [
{
"events": {
"type": "mousemove"
},
"update": "xy()"
}
]
},
{
"name": "positionDot",
"on": [
{
"events": {
"type": "mousemove"
},
"update": "xy()"
}
]
}
],
"marks": [
{
"type": "text",
"encode": {
"enter": {
"fill": {
"value": "#000"
},
"text": {
"value": "Text Label"
}
},
"update": {
"opacity": {
"value": 1
},
"x": {
"signal": "position[0]+20"
},
"y": {
"signal": "position[1]+20"
},
"fontSize": {
"value": 50
}
}
}
},
{
"name": "dot",
"type": "symbol",
"encode": {
"enter": {
"fill": {
"value": "#939597"
},
"stroke": {
"value": "#652c90"
},
"x": {
"value": 0
},
"y": {
"value": 0
}
},
"update": {
"x": {
"signal": "positionDot[0]"
},
"y": {
"signal": "position[1]"
},
"size": {
"value": 550
},
"opacity": {
"value": 1
}
},
"hover": {
"opacity": {
"value": 0.5
}
}
}
}
]
}
https://vega.github.io/editor/#/gist/1dcd1034a1d8139b3de49f041ed1ed4b/spec.json
Your example works as expected if an initial value (using "init" or "value") is included in signal position:
"signals": [
{
"name": "position",
"init": [0, 0],
"on": [
{
"events": {
"type": "mousemove"
},
"update": "xy()"
}
]
},
View in Vega online editor
I'm trying to format values as currency in the Vega-Lite editor. I'm attempting to copy the docs but I'm getting a weird error. The Y axis is a numerical value. Passing in a formatting string gives "value expected".
Here's the json:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Protocol Chart",
"width": 500,
"height": 225,
"data": {
"values": [
{
"asset": "eth",
"time": "2021-06-15T00:00:00Z",
"ReferenceRateUSD": "2577.04473863238"
},
{
"asset": "eth",
"time": "2021-06-16T00:00:00Z",
"ReferenceRateUSD": "2552.74103641146"
},
{
"asset": "eth",
"time": "2021-06-17T00:00:00Z",
"ReferenceRateUSD": "2360.99938690824"
}
]
},
"config": {
"view": {
"stroke": "transparent"
}
},
"mark": "line",
"encoding": {
"x": {
"axis": {
"domainColor": "#DDD",
"grid": false,
"labelColor": "#AEAEAE",
"ticks": false,
"labelPadding": 10
},
"field": "time",
"type": "temporal",
"title": ""
},
"y": {
"axis": {
"labelOffset": 2,
"domainColor": "white",
"labelColor": "#AEAEAE",
"ticks": false,
"labelPadding": 10,
"format": '$.2f'
},
"field": "ReferenceRateUSD",
"type": "quantitative",
"title": "",
"scale": {
"zero": false
}
},
"color": {
"field": "doesntmatter",
"type": "nominal",
"legend": null,
"scale": {
"range": ["#91DB97"]
}
}
}
}
What am I missing here? How do I get it to accept my formatting string?
"$.2f" looks like a the correct d3-format string for currency, but note that this is only valid if the associated formatType is "number" (see axis label docs).
Since you did not include a full reproducible example of the problem you're seeing, I can only venture a guess that your data type is not numeric, and this is why the formatting is failing. If that's not the case, I'd suggest editing your question to provide a complete example of the error you're seeing.
Edit: your full example appears to work correctly with the current version of vega/vega-lite (view in editor):
Perhaps you need to update your vega/vega-lite libraries?
I'm somewhat lost. I try to realize zoom in a circle packing chart but I don't know how to do it. There are two examples zoomable-scatter-plot zoomable-world-map but both approaches doesn't seem too fit for my chart type.
Any pointers/examples would be greatly appreciated.
Disclaimer: I still haven't had much time to get into Vega but I found a solution for this particular problem. I guess it is still not technical mature but it works.
The basic idea is to scale the circles and then move them into the middle of the graphic. To achieve this I added these signals:
"signals": [
{
"name": "scaleX",
"value": 1,
"on": [{"events": "click", "update": "(width/2)/datum.r"}]
},
{
"name": "scaleY",
"value": 1,
"on": [{"events": "click", "update": "(height/2)/datum.r"}]
},
{
"name": "xTranslation",
"value": 0,
"on": [{"events": "click", "update": "(width/2) - datum.x * scaleX"}]
},
{
"name": "yTranslation",
"value": 0,
"on": [{"events": "click", "update": "(height/2) - datum.y * scaleY"}]
}
]
and use them inside the mark encoding:
"update": {
"x": {"signal": "datum.x * scaleX + xTranslation"},
"y": {"signal": "datum.y * scaleY + yTranslation"},
"size": {"signal": "4 * datum.r * datum.r * scaleX * scaleY"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 0.5}
}
Full example in Vega-Editor
I'm creating a legend and would like to customize the symbol + label that is created for each entry using the encode -> entries custom mark property.
I can create custom symbols and labels independently via the respective symbols and labels properties. However, I haven't been able to figure out the format that is expected in the entries property; the documentation at https://vega.github.io/vega/docs/legends/ describes the expected value as a pair of symbol + label marks.
I tried the following:
{
"encode": {
"entries": {
"update": {
"marks": [
{
"type": "symbol",
"encode": {
"enter": {
"width": {
"value": 10
},
"fillOpacity": {
"value": 1
},
"shape": {
"value": "square"
},
"height": {
"value": 10
}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"text": {
"value": "Hi"
}
}
}
}
]
}
}
}
}
I'm trying to add a text mark to the nodes in the force-directed-layout example on the github page of vega.
I converted the symbol mark to a group mark and moved the "encode" part to a child "symbol" mark. In this new group-mark I now also add a text mark which I give the name of the node.
This is the nodes mark, the "on" and "transform" parts are left out because these are unchanged.
{
"name": "nodes",
"type": "group",
"zindex": 1,
"from": {
"data": "node-data"
},
"marks": [
{
"type": "symbol",
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "group"
},
"stroke": {
"value": "white"
}
},
"update": {
"size": {
"signal": "2 * nodeRadius * nodeRadius"
},
"cursor": {
"value": "pointer"
}
}
}
},
{
"type": "text",
"interactive": false,
"encode": {
"enter": {
"fill": {
"value": "black"
},
"fontSize": {
"value": 12
},
"align": {
"value": "center"
},
"text": {
"field": "name"
},
"y": {
"value": -5
}
}
}
}
],
"on": [...],
"transform": [...]
}
Expected was to see the name of the node above each node, but the text AND the symbol become invisible.
Steps to Reproduce
Make the type "group", add a "marks" array, add a mark object with type "symbol" to this marks array
-> the nodes still show
Move the encode part to the nested symbol group
-> the nodes dissapear
Adding the text mark also does nothing
I have a hunch that its the "field" property that borks when you try to nest it while keeping the data in the parent because the text mark does show in the group when I give it a fixed value, but I can't seem to figured out how to get it working.
(I thought this was the way because the docs say that a child mark gets the parent data automatically when ommiting a data field)
Within a group, you have to use {"parent": <field_name>} to refer to a field. For example, to refer to the field "group" in the parent use:
"field": {"parent": "group"}}
See an example here.
Adding the following mark also works, without breaking dragging (example link):
{
"type": "text",
"from": {"data": "nodes"},
"interactive": false,
"enter": {
"fill": {"value": "black"},
"fontSize": {"value": 10}
},
"encode": {
"update": {
"y": {"field": "y", "offset": {"signal": "nodeRadius * -0.9"}},
"x": {"field": "x"},
"text": {"field": "datum.name"},
"align": {"value": "center"}
}
}
}
This text mark uses the symbol mark (called nodes) as its backing data source. See https://vega.github.io/vega/docs/marks/#reactive-geometry.