{ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A simple pie chart with embedded data.", "background": "white", "padding": 5, "height": 200, "data": [ {"name": "source_0", "values": [{}]}, { "name": "source_1", "values": [ {"category": 1, "value": 4}, {"category": 2, "value": 6}, {"category": 3, "value": 10}, {"category": 4, "value": 3}, {"category": 5, "value": 7}, {"category": 6, "value": 8} ] }, { "name": "data_0", "source": "source_1", "transform": [ { "type": "stack", "groupby": [], "field": "value", "sort": {"field": ["category"], "order": ["ascending"]}, "as": ["value_start", "value_end"], "offset": "zero" }, { "type": "filter", "expr": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])" } ] } ], "signals": [ {"name": "childWidth", "value": 200}, { "name": "radius", "value": 0, "bind": {"input": "range", "min": 0, "max": 100, "step": 1} }, { "name": "radius2", "value": 50, "bind": {"input": "range", "min": 0, "max": 100, "step": 1} }, { "name": "theta_single_arc", "value": -0.73, "bind": {"input": "range", "min": -6.28, "max": 6.28} }, { "name": "theta2_single_arc", "value": 0.73, "bind": {"input": "range", "min": -6.28, "max": 6.28} }, { "name": "cornerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 50, "step": 1} }, { "name": "padAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 1.57} }, { "name": "strokeWidth", "value": 4, "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5} } ], "layout": {"padding": 20, "bounds": "full", "align": "each"}, "marks": [ { "type": "group", "name": "concat_0_group", "title": {"text": "Single Arc", "frame": "group"}, "style": "cell", "encode": { "update": { "width": {"signal": "childWidth"}, "height": {"signal": "height"} } }, "marks": [ { "name": "concat_0_marks", "type": "arc", "style": ["arc"], "from": {"data": "source_0"}, "encode": { "update": { "strokeWidth": {"signal": "strokeWidth"}, "padAngle": {"signal": "padAngle"}, "radius": {"signal": "radius"}, "cornerRadius": {"signal": "cornerRadius"}, "fill": {"value": "#4c78a8"}, "x": {"signal": "childWidth", "mult": 0.5}, "y": {"signal": "height", "mult": 0.5}, "outerRadius": {"signal": "radius"}, "innerRadius": {"signal": "radius2"}, "startAngle": {"signal": "theta_single_arc"}, "endAngle": {"signal": "theta2_single_arc"} } } } ] }, { "type": "group", "name": "concat_1_group", "title": {"text": "Stacked Arcs", "frame": "group"}, "style": "cell", "encode": { "update": { "width": {"signal": "childWidth"}, "height": {"signal": "height"} } }, "marks": [ { "name": "concat_1_marks", "type": "arc", "style": ["arc"], "from": {"data": "data_0"}, "encode": { "update": { "strokeWidth": {"signal": "strokeWidth"}, "padAngle": {"signal": "padAngle"}, "radius": {"signal": "radius"}, "cornerRadius": {"signal": "cornerRadius"}, "fill": {"scale": "color", "field": "category"}, "description": { "signal": "\"value: \" + (format(datum[\"value\"], \"\")) + \"; category: \" + (isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"])" }, "x": {"signal": "childWidth", "mult": 0.5}, "y": {"signal": "height", "mult": 0.5}, "outerRadius": {"signal": "radius"}, "innerRadius": {"signal": "radius2"}, "startAngle": {"scale": "theta", "field": "value_end"}, "endAngle": {"scale": "theta", "field": "value_start"} } } } ] } ], "scales": [ { "name": "theta", "type": "linear", "domain": {"data": "data_0", "fields": ["value_start", "value_end"]}, "range": [0, 6.283185307179586], "zero": true }, { "name": "color", "type": "ordinal", "domain": {"data": "data_0", "field": "category", "sort": true}, "range": "category" } ], "legends": [{"fill": "color", "symbolType": "circle", "title": "category"}], "config": {"style": {"cell": {"stroke": null}}}}