Why I can't add legend to my chart in vega?
1
this is my vega code, and I do write code to add legend to my pie chart, but it can't work. Could you please help me?
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 300,
"height": 300,
"autosize": "none", //put in my data
"signals": [
"name": "startAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "endAngle",
"value": 6.29,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "padAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 0.1
,
"name": "innerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 90, "step": 1
,
"name": "cornerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 10, "step": 0.5
,
"name": "sort", "value": false, "bind": "input": "checkbox"
], //set the control bar
"data": [
"name": "table",
"values": [
"id": "BenCarsonNumber", "field": 564553,
"id": "BernieSanders", "field": 11958297,
"id": "CarlyFiorina", "field": 15191,
"id": "ChrisChristie", "field": 24353,
"id": "DonaldTrump", "field": 13301237,
"id": "HillaryClinton", "field": 15691617,
"id": "JebBush", "field": 94411,
"id": "JohnKasich", "field": 4159528,
"id": "MarcoRubio", "field": 3320810,
"id": "Malley", "field": 752,
"id": "MikeHuckabee", "field": 3345,
"id": "NoPreference", "field": 8152,
"id": "RandPaul", "field": 8479,
"id": "RickSantorum", "field": 1782,
"id": "TedCruz", "field": 7602299,
"id": "Uncommitted", "field": 43 //this is my data
],
"transform": [ //try to make a pie chart
"type": "pie",
"field": "field",
"startAngle": "signal": "startAngle",
"endAngle": "signal": "endAngle",
"sort": "signal": "sort"
]
],
"scales": [
"name": "color",
"type": "ordinal",
"domain": "data": "table", "field": "id",
"range": "scheme": "category20"
],
"legends": [ //there is my legend code
"stroke": "color",
"title": "Origin",
"encode":
"symbols":
"update":
"fill": "value": "",
"strokeWidth": "value": 2,
"size": "value": 64
],
"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": "innerRadius",
"outerRadius": "signal": "width / 2",
"cornerRadius": "signal": "cornerRadius"
]
everything works fine, expect there is no legend for the chart.
or If there is a better way to write a pie chart like this? but I can't come out with anything new. Please help me!
Thank you so much for helping!
vega
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
asked Nov 12 '18 at 22:15
dian chendian chen
61
add a comment |
1
this is my vega code, and I do write code to add legend to my pie chart, but it can't work. Could you please help me?
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 300,
"height": 300,
"autosize": "none", //put in my data
"signals": [
"name": "startAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "endAngle",
"value": 6.29,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "padAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 0.1
,
"name": "innerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 90, "step": 1
,
"name": "cornerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 10, "step": 0.5
,
"name": "sort", "value": false, "bind": "input": "checkbox"
], //set the control bar
"data": [
"name": "table",
"values": [
"id": "BenCarsonNumber", "field": 564553,
"id": "BernieSanders", "field": 11958297,
"id": "CarlyFiorina", "field": 15191,
"id": "ChrisChristie", "field": 24353,
"id": "DonaldTrump", "field": 13301237,
"id": "HillaryClinton", "field": 15691617,
"id": "JebBush", "field": 94411,
"id": "JohnKasich", "field": 4159528,
"id": "MarcoRubio", "field": 3320810,
"id": "Malley", "field": 752,
"id": "MikeHuckabee", "field": 3345,
"id": "NoPreference", "field": 8152,
"id": "RandPaul", "field": 8479,
"id": "RickSantorum", "field": 1782,
"id": "TedCruz", "field": 7602299,
"id": "Uncommitted", "field": 43 //this is my data
],
"transform": [ //try to make a pie chart
"type": "pie",
"field": "field",
"startAngle": "signal": "startAngle",
"endAngle": "signal": "endAngle",
"sort": "signal": "sort"
]
],
"scales": [
"name": "color",
"type": "ordinal",
"domain": "data": "table", "field": "id",
"range": "scheme": "category20"
],
"legends": [ //there is my legend code
"stroke": "color",
"title": "Origin",
"encode":
"symbols":
"update":
"fill": "value": "",
"strokeWidth": "value": 2,
"size": "value": 64
],
"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": "innerRadius",
"outerRadius": "signal": "width / 2",
"cornerRadius": "signal": "cornerRadius"
]
everything works fine, expect there is no legend for the chart.
or If there is a better way to write a pie chart like this? but I can't come out with anything new. Please help me!
Thank you so much for helping!
vega
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
asked Nov 12 '18 at 22:15
dian chendian chen
61
add a comment |
1
1
1
this is my vega code, and I do write code to add legend to my pie chart, but it can't work. Could you please help me?
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 300,
"height": 300,
"autosize": "none", //put in my data
"signals": [
"name": "startAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "endAngle",
"value": 6.29,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "padAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 0.1
,
"name": "innerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 90, "step": 1
,
"name": "cornerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 10, "step": 0.5
,
"name": "sort", "value": false, "bind": "input": "checkbox"
], //set the control bar
"data": [
"name": "table",
"values": [
"id": "BenCarsonNumber", "field": 564553,
"id": "BernieSanders", "field": 11958297,
"id": "CarlyFiorina", "field": 15191,
"id": "ChrisChristie", "field": 24353,
"id": "DonaldTrump", "field": 13301237,
"id": "HillaryClinton", "field": 15691617,
"id": "JebBush", "field": 94411,
"id": "JohnKasich", "field": 4159528,
"id": "MarcoRubio", "field": 3320810,
"id": "Malley", "field": 752,
"id": "MikeHuckabee", "field": 3345,
"id": "NoPreference", "field": 8152,
"id": "RandPaul", "field": 8479,
"id": "RickSantorum", "field": 1782,
"id": "TedCruz", "field": 7602299,
"id": "Uncommitted", "field": 43 //this is my data
],
"transform": [ //try to make a pie chart
"type": "pie",
"field": "field",
"startAngle": "signal": "startAngle",
"endAngle": "signal": "endAngle",
"sort": "signal": "sort"
]
],
"scales": [
"name": "color",
"type": "ordinal",
"domain": "data": "table", "field": "id",
"range": "scheme": "category20"
],
"legends": [ //there is my legend code
"stroke": "color",
"title": "Origin",
"encode":
"symbols":
"update":
"fill": "value": "",
"strokeWidth": "value": 2,
"size": "value": 64
],
"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": "innerRadius",
"outerRadius": "signal": "width / 2",
"cornerRadius": "signal": "cornerRadius"
]
everything works fine, expect there is no legend for the chart.
or If there is a better way to write a pie chart like this? but I can't come out with anything new. Please help me!
Thank you so much for helping!
vega
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
asked Nov 12 '18 at 22:15
dian chendian chen
61
this is my vega code, and I do write code to add legend to my pie chart, but it can't work. Could you please help me?
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 300,
"height": 300,
"autosize": "none", //put in my data
"signals": [
"name": "startAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "endAngle",
"value": 6.29,
"bind": "input": "range", "min": 0, "max": 6.29, "step": 0.01
,
"name": "padAngle",
"value": 0,
"bind": "input": "range", "min": 0, "max": 0.1
,
"name": "innerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 90, "step": 1
,
"name": "cornerRadius",
"value": 0,
"bind": "input": "range", "min": 0, "max": 10, "step": 0.5
,
"name": "sort", "value": false, "bind": "input": "checkbox"
], //set the control bar
"data": [
"name": "table",
"values": [
"id": "BenCarsonNumber", "field": 564553,
"id": "BernieSanders", "field": 11958297,
"id": "CarlyFiorina", "field": 15191,
"id": "ChrisChristie", "field": 24353,
"id": "DonaldTrump", "field": 13301237,
"id": "HillaryClinton", "field": 15691617,
"id": "JebBush", "field": 94411,
"id": "JohnKasich", "field": 4159528,
"id": "MarcoRubio", "field": 3320810,
"id": "Malley", "field": 752,
"id": "MikeHuckabee", "field": 3345,
"id": "NoPreference", "field": 8152,
"id": "RandPaul", "field": 8479,
"id": "RickSantorum", "field": 1782,
"id": "TedCruz", "field": 7602299,
"id": "Uncommitted", "field": 43 //this is my data
],
"transform": [ //try to make a pie chart
"type": "pie",
"field": "field",
"startAngle": "signal": "startAngle",
"endAngle": "signal": "endAngle",
"sort": "signal": "sort"
]
],
"scales": [
"name": "color",
"type": "ordinal",
"domain": "data": "table", "field": "id",
"range": "scheme": "category20"
],
"legends": [ //there is my legend code
"stroke": "color",
"title": "Origin",
"encode":
"symbols":
"update":
"fill": "value": "",
"strokeWidth": "value": 2,
"size": "value": 64
],
"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": "innerRadius",
"outerRadius": "signal": "width / 2",
"cornerRadius": "signal": "cornerRadius"
]
everything works fine, expect there is no legend for the chart.
or If there is a better way to write a pie chart like this? but I can't come out with anything new. Please help me!
Thank you so much for helping!
vega
vega
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
asked Nov 12 '18 at 22:15
dian chendian chen
61
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
asked Nov 12 '18 at 22:15
dian chendian chen
61
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
edited Nov 13 '18 at 22:05
jakevdp
18.2k33250
18.2k33250
asked Nov 12 '18 at 22:15
dian chendian chen
61
asked Nov 12 '18 at 22:15
dian chendian chen
61
asked Nov 12 '18 at 22:15
dian chendian chen
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You would need to update your legends section with "orient": "top-right".
Here's vega editor full spec
...
"legends": [
....
"orient": "top-right",
....
],
...
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
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
);
);
draft saved
draft discarded
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%2f53270877%2fwhy-i-cant-add-legend-to-my-chart-in-vega%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
0
You would need to update your legends section with "orient": "top-right".
Here's vega editor full spec
...
"legends": [
....
"orient": "top-right",
....
],
...
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
add a comment |
0
You would need to update your legends section with "orient": "top-right".
Here's vega editor full spec
...
"legends": [
....
"orient": "top-right",
....
],
...
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
add a comment |
0
0
0
You would need to update your legends section with "orient": "top-right".
Here's vega editor full spec
...
"legends": [
....
"orient": "top-right",
....
],
...
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
You would need to update your legends section with "orient": "top-right".
Here's vega editor full spec
...
"legends": [
....
"orient": "top-right",
....
],
...
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
answered Nov 19 '18 at 7:11
ZeroZero
39k86490
39k86490
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53270877%2fwhy-i-cant-add-legend-to-my-chart-in-vega%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
