Line 2: | Line 2: | ||
{ | { | ||
"width": 400, | "width": 400, | ||
"height": | "height": 400, | ||
"data": [ | "data": [ | ||
{ | { | ||
"name": " | "name": "table", | ||
"values": [ | "values": [12, 23, 47, 6, 52, 19], | ||
"transform": [{"type": "pie", "field": "data"}] | |||
} | } | ||
], | ], | ||
"scales": [ | "scales": [ | ||
{ | { | ||
"name": " | "name": "r", | ||
"type": " | "type": "sqrt", | ||
"domain": {"data": "table", "field": "data"}, | |||
"domain": {"data": " | "range": [20, 100] | ||
"range": [100 | |||
} | } | ||
], | ], | ||
"marks": [ | "marks": [ | ||
{ | { | ||
"type": " | "type": "arc", | ||
"from": {"data": " | "from": {"data": "table"}, | ||
"properties": { | "properties": { | ||
"enter": { | "enter": { | ||
"x": {" | "x": {"field": {"group": "width"}, "mult": 0.5}, | ||
"y": {" | "y": {"field": {"group": "height"}, "mult": 0.5}, | ||
" | "startAngle": {"field": "layout_start"}, | ||
" | "endAngle": {"field": "layout_end"}, | ||
" | "innerRadius": {"value": 20}, | ||
" | "outerRadius": {"scale": "r", "field": "data"}, | ||
" | "stroke": {"value": "#fff"} | ||
}, | |||
"update": { | |||
"fill": {"value": "#ccc"} | |||
}, | |||
"hover": { | |||
"fill": {"value": "pink"} | |||
} | } | ||
} | } | ||
}, | }, | ||
{ | { | ||
"type": " | "type": "text", | ||
"from": {"data": " | "from": {"data": "table"}, | ||
"properties": { | "properties": { | ||
"enter": { | "enter": { | ||
"x": { | "x": {"field": {"group": "width"}, "mult": 0.5}, | ||
"y": {"field": {"group": "height"}, "mult": 0.5}, | |||
"y": {" | "radius": {"scale": "r", "field": "data", "offset": 8}, | ||
" | "theta": {"field": "layout_mid"}, | ||
"fill": {"value": "#000"}, | |||
"align": {"value": "center"}, | |||
"baseline": {"value": "middle"}, | |||
"text": {"field": "data"} | |||
" | |||
" | |||
" | |||
" | |||
} | } | ||
} | } |