Line 1: | Line 1: | ||
<graph> | <graph> | ||
{ | { | ||
"width": | "$schema": "https://vega.github.io/schema/vega/v4.json", | ||
"height": | "width": 200, | ||
"type": "pie", | "height": 200, | ||
" | "autosize": "fit", | ||
" | |||
"data": [ | |||
{ | |||
"name": "table", | |||
"values": [ | |||
{"id": "Biology", "field": 4}, | |||
{"id": "Chemistry", "field": 8}, | |||
{"id": "Computer Science", "field": 2}, | |||
{"id": "Programming", "field": 2}, | |||
{"id": "Sociology", "field": 8} | |||
], | |||
"transform": [ | |||
{"type": "formula", "expr": "datum.id + ': ' + datum.field", "as": "tooltip"}, | |||
{ | |||
"type": "pie", | |||
"field": "field", | |||
"startAngle": 0, | |||
"endAngle": 6.29, | |||
"sort": true | |||
} | |||
] | |||
} | |||
], | |||
"scales": [ | |||
{ | |||
"name": "color", | |||
"type": "ordinal", | |||
"domain": {"data": "table", "field": "id"}, | |||
"range": {"scheme": "category20c"} | |||
} | |||
], | |||
"marks": [ | |||
{ | |||
"type": "arc", | |||
"from": {"data": "table"}, | |||
"encode": { | |||
"enter": { | |||
"fill": {"scale": "color", "field": "id"}, | |||
"x": {"signal": "width / 2"}, | |||
"y": {"signal": "height / 2"}, | |||
"startAngle": {"field": "startAngle"}, | |||
"endAngle": {"field": "endAngle"}, | |||
"innerRadius": {"value": 60}, | |||
"outerRadius": {"signal": "width / 2"}, | |||
"cornerRadius": {"value": 0}, | |||
"tooltip": {"field": "tooltip"} | |||
} | |||
} | |||
} | |||
] | |||
} | } | ||
</graph> | </graph> |