Legend text formatting
564 views
Skip to first unread message
Yuri Astrakhan
Jun 19, 2017, 2:31:29 AM6/19/17
to vega-js
I tried to format the legend for the choropleth example, and it seems there is no way to add a signal expression, rather than a format.
By default, the legend shows values as "0.13–0.15". I would like to show them as "13% – 15%" (note the spaces). I can format individual value with the format param, but I cannot use a signal expression because the signal inside encode.labels.enter.text can only access the current datum.value, not the next one. I ended up doing string replace() hack. While it solves the immediate problem, is there a more "proper" way to do this?
{
"legends": [{
"fill": "color",
"orient": "bottom-right",
"format": "0%",
"encode": {
"labels": {
"enter": {
"text": {"signal": "replace(datum.label,'–',' – ')"}
}
}
}
}]
}Yuri Astrakhan
Jun 19, 2017, 2:58:57 AM6/19/17
to vega-js
P.S. A follow up from the above - a highly useful case would be to highlight ALL of the corresponding map's regions when the user clicks or hovers over a single legend item. But without the range values, there seems to be no straightforward way to do it... or is there?
Roy I
Jun 21, 2017, 3:28:30 PM6/21/17
to vega-js
Hi Yuri,
The Vega v3 expression scale functions can be used to access the legend category intervals:
In the Vega choropleth map example with scale named "color",
scale('color', datum.unemp.rate)
will return the color value (e.g. #0000ff) of the legend category, and
invert('color', scale('color', datum.value))
will return the legend interval as an array of 2 numbers (e.g. [0.012, 0.062]) -- the first value will be the same as datum.value.
The following is a modified version of the Vega choropleth map example that highlights all corresponding counties when hovering over a legend color symbol. Works in new Vega v3 on-line editor
but may take a couple of seconds after hovering over a legend symbol to see changes in map.
Vega spec (v3.0.0 beta 38)
----------------------------------------
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 960,
"height": 500,
"autosize": "none",
"signals": [
{
"name": "signal_select_data_color",
"value": null,
"on": [
{
"events": "@legendSymbol:mouseover",
"update": "scale('color', datum.value)"
},
{
"events": "@legendSymbol:mouseout",
"update": "null"
}
]
}
],
"data": [
{
"name": "unemp",
"url": "data/unemployment.tsv",
"format": {"type": "tsv", "parse": "auto"}
},
{
"name": "counties",
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "counties"},
"transform": [
{ "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "as": ["unemp"] },
{ "type": "filter", "expr": "datum.unemp != null" }
]
}
],
"projections": [
{
"name": "projection",
"type": "albersUsa"
}
],
"scales": [
{
"name": "color",
"type": "quantile",
"domain": {"data": "counties", "field": "unemp.rate"},
"range": {"scheme": "blues", "count": 5}
}
],
"legends": [
{
"fill": "color",
"orient": "bottom-right",
"title": "Unemployment",
"encode": {
"labels": {
"enter": {
"text": {"signal": "format(datum.value, '.0%') + ' - ' + format(invert('color', scale('color', datum.value))[1], '.0%')"
}
}
},
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
"shape": {"value": "square"},
"stroke": {"value": "#ccc"},
"strokeWidth": {"value": 0.2}
},
"hover": {
"shape": {"value": "circle"},
"fill": {"value": "orange"},
"cursor": {"value": "pointer"}
}
}
}
}
],
"marks": [
{
"type": "shape",
"from": {"data": "counties"},
"encode": {
"enter": { "tooltip": {"signal": "format(datum.unemp.rate, '0.1%')"}},
"update": {
"fill": {"signal": "signal_select_data_color == scale('color', datum.unemp.rate) ? 'orange' : scale('color', datum.unemp.rate)"}
},
"hover": { "fill": {"value": "red"} }
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
}
On Monday, June 19, 2017 at 2:31:29 AM UTC-4, Yuri Astrakhan wrote:
Reply all
Reply to author
Forward
0 new messages