Why I can't add legend to my chart in vega?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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
20.3k33657
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
20.3k33657
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
20.3k33657
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
20.3k33657
asked Nov 12 '18 at 22:15
dian chendian chen
61
edited Nov 13 '18 at 22:05
jakevdp
20.3k33657
asked Nov 12 '18 at 22:15
dian chendian chen
61
edited Nov 13 '18 at 22:05
jakevdp
20.3k33657
edited Nov 13 '18 at 22:05
jakevdp
20.3k33657
edited Nov 13 '18 at 22:05
jakevdp
20.3k33657
20.3k33657
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
40.7k87493
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
40.7k87493
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
40.7k87493
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
40.7k87493
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
40.7k87493
answered Nov 19 '18 at 7:11
ZeroZero
40.7k87493
answered Nov 19 '18 at 7:11
ZeroZero
40.7k87493
answered Nov 19 '18 at 7:11
ZeroZero
40.7k87493
40.7k87493
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
