How can I add a legend to this Vega visualization
I am trying to figure out how to add a legend to the example vega visualization here. Any example of how to do this would be appreciated. Preferably it would be interactive and highlight or show data on the visualization, but even just a simple legend would be a big improvement.
Thank you
visualization vega
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
add a comment |
I am trying to figure out how to add a legend to the example vega visualization here. Any example of how to do this would be appreciated. Preferably it would be interactive and highlight or show data on the visualization, but even just a simple legend would be a big improvement.
Thank you
visualization vega
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
add a comment |
I am trying to figure out how to add a legend to the example vega visualization here. Any example of how to do this would be appreciated. Preferably it would be interactive and highlight or show data on the visualization, but even just a simple legend would be a big improvement.
Thank you
visualization vega
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
I am trying to figure out how to add a legend to the example vega visualization here. Any example of how to do this would be appreciated. Preferably it would be interactive and highlight or show data on the visualization, but even just a simple legend would be a big improvement.
Thank you
visualization vega
visualization vega
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
edited Nov 15 '18 at 0:43
jakevdp
19.3k33454
19.3k33454
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
asked Nov 15 '18 at 0:10
NSANSA
1,71862334
1,71862334
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
For a simple starting point using legends in this Vega Donut Chart Demo:
Here's the same example Vega sandbox with my legends code from below added in after the marks section.
Here is the legend code I used:
"legends": [
"fill": "color",
"title": "This is the Title",
"orient": "top-left",
"encode":
"symbols": "enter": "fillOpacity": "value": 0.5,
"labels": "update": "text": "field": "value"
]
This should serve as a useful example starting point for you. Other properties of legends can be found here.
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310652%2fhow-can-i-add-a-legend-to-this-vega-visualization%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
For a simple starting point using legends in this Vega Donut Chart Demo:
Here's the same example Vega sandbox with my legends code from below added in after the marks section.
Here is the legend code I used:
"legends": [
"fill": "color",
"title": "This is the Title",
"orient": "top-left",
"encode":
"symbols": "enter": "fillOpacity": "value": 0.5,
"labels": "update": "text": "field": "value"
]
This should serve as a useful example starting point for you. Other properties of legends can be found here.
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
add a comment |
For a simple starting point using legends in this Vega Donut Chart Demo:
Here's the same example Vega sandbox with my legends code from below added in after the marks section.
Here is the legend code I used:
"legends": [
"fill": "color",
"title": "This is the Title",
"orient": "top-left",
"encode":
"symbols": "enter": "fillOpacity": "value": 0.5,
"labels": "update": "text": "field": "value"
]
This should serve as a useful example starting point for you. Other properties of legends can be found here.
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
add a comment |
For a simple starting point using legends in this Vega Donut Chart Demo:
Here's the same example Vega sandbox with my legends code from below added in after the marks section.
Here is the legend code I used:
"legends": [
"fill": "color",
"title": "This is the Title",
"orient": "top-left",
"encode":
"symbols": "enter": "fillOpacity": "value": 0.5,
"labels": "update": "text": "field": "value"
]
This should serve as a useful example starting point for you. Other properties of legends can be found here.
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
For a simple starting point using legends in this Vega Donut Chart Demo:
Here's the same example Vega sandbox with my legends code from below added in after the marks section.
Here is the legend code I used:
"legends": [
"fill": "color",
"title": "This is the Title",
"orient": "top-left",
"encode":
"symbols": "enter": "fillOpacity": "value": 0.5,
"labels": "update": "text": "field": "value"
]
This should serve as a useful example starting point for you. Other properties of legends can be found here.
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
answered Nov 15 '18 at 2:16
BWinterroseBWinterrose
286
286
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310652%2fhow-can-i-add-a-legend-to-this-vega-visualization%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
