{
    "$schema": "https://vega.github.io/schema/vega/v4.json",
    "width": 600,
    "height": 600,
    "signals": [
        {
            "name": "startAngle",
            "value": 0
        },
        {
            "name": "endAngle",
            "value": 6.285
        },
        {
            "name": "padAngle",
            "value": 0
        },
        {
            "name": "innerRadius",
            "update": "width * 0.25"
        },
        {
            "name": "cornerRadius",
            "value": 0
        },
        {
            "name": "sort",
            "value": true
        },
        {
            "name": "radius",
            "update": "width / 2"
        }
    ],
    "data": [
        {
            "name": "data_table",
            "url": "<%= absolute_url %>data/donut-infographic.json",
            "transform": [
                {
                    "type": "pie",
                    "field": "field",
                    "startAngle": {
                        "signal": "startAngle"
                    },
                    "endAngle": {
                        "signal": "endAngle"
                    },
                    "sort": {
                        "signal": "sort"
                    }
                }
            ]
        },
        {
            "name": "data_min_max",
            "source": "data_table",
            "transform": [
                {
                    "type": "extent",
                    "field": "circle3_amount",
                    "signal": "extent"
                }
            ]
        }
    ],
    "scales": [
        {
            "name": "scales_color",
            "type": "ordinal",
            "domain": {
                "data": "data_table",
                "field": "id"
            },
            "range": {
                "scheme": "blueorange"
            }
        }
    ],
    "marks": [
        {
            "name": "marks_group_circle3",
            "type": "group",
            "encode": {
                "update": {
                    "x": {
                        "signal": "width / 2"
                    },
                    "y": {
                        "signal": "height / 2"
                    }
                }
            },
            "marks": [
                {
                    "name": "marks_circle3_arc",
                    "type": "arc",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fillOpacity": {
                                "value": 0
                            },
                            "stroke": {
                                "value": "#ccc"
                            }
                        },
                        "update": {
                            "startAngle": {
                                "signal": "datum.startAngle + ((datum.endAngle - datum.startAngle )/ 2)"
                            },
                            "endAngle": {
                                "signal": "datum.endAngle + ((datum.endAngle - datum.startAngle )/ 2)"
                            },
                            "padAngle": {
                                "signal": "padAngle"
                            },
                            "innerRadius": {
                                "signal": "innerRadius"
                            },
                            "outerRadius": {
                                "signal": "width * 0.75"
                            },
                            "cornerRadius": {
                                "signal": "cornerRadius"
                            }
                        }
                    }
                },
                {
                    "name": "marks_circle3_circle",
                    "type": "symbol",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fill": {
                                "value": "#c6648f"
                            },
                            "fillOpacity": {
                                "value": 0.9
                            },
                            "stroke": {
                                "value": "#e3bccb"
                            },
                            "shape": {
                                "value": "circle"
                            },
                            "strokeOpacity": {
                                "value": 0.9
                            }
                        },
                        "update": {
                            "x": {
                                "signal": "1.5 * radius * cos((datum.startAngle+datum.endAngle-3.14)/2)"
                            },
                            "y": {
                                "signal": "1.5 * radius * sin((datum.startAngle+datum.endAngle-3.14)/2)"
                            },
                            "strokeWidth": {
                                "signal": "width / 100"
                            },
                            "size": {
                                "signal": "(datum.circle3_amount/extent[1]) * (width/100) * width"
                            }
                        }
                    }
                },
                {
                    "name": "marks_circle3_text",
                    "type": "text",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fill": {
                                "value": "#fff"
                            },
                            "align": {
                                "value": "center"
                            },
                            "baseline": {
                                "value": "middle"
                            }
                        },
                        "update": {
                            "theta": {
                                "signal": "(datum.startAngle+datum.endAngle)/2"
                            },
                            "radius": {
                                "signal": "width * 0.75"
                            },
                            "text": {
                                "signal": "datum.circle3_amount"
                            },
                            "fontSize": {
                                "signal": "(width / 100) * 2"
                            },
                            "tooltip": {
                                "signal": "{'Category':datum.category,'Circle 3': datum.circle3_amount}"
                            }
                        }
                    }
                }
            ]
        },
        {
            "name": "marks_group_circle2",
            "type": "group",
            "encode": {
                "update": {
                    "x": {
                        "signal": "width / 2"
                    },
                    "y": {
                        "signal": "height / 2"
                    }
                }
            },
            "marks": [
                {
                    "name": "marks_circle2_arc",
                    "type": "arc",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fillOpacity": {
                                "value": 0
                            },
                            "stroke": {
                                "value": "#ccc"
                            }
                        },
                        "update": {
                            "startAngle": {
                                "signal": "datum.startAngle + ((datum.endAngle - datum.startAngle )/ 2)"
                            },
                            "endAngle": {
                                "signal": "datum.endAngle + ((datum.endAngle - datum.startAngle )/ 2)"
                            },
                            "padAngle": {
                                "signal": "padAngle"
                            },
                            "innerRadius": {
                                "signal": "innerRadius"
                            },
                            "outerRadius": {
                                "signal": "width * 0.66"
                            },
                            "cornerRadius": {
                                "signal": "cornerRadius"
                            }
                        }
                    }
                },
                {
                    "name": "marks_circle2_circle",
                    "type": "symbol",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fill": {
                                "value": "#52a8bb"
                            },
                            "fillOpacity": {
                                "value": 0.9
                            },
                            "stroke": {
                                "value": "#c9d9d9"
                            },
                            "shape": {
                                "value": "circle"
                            },
                            "strokeOpacity": {
                                "value": 0.9
                            }
                        },
                        "update": {
                            "x": {
                                "signal": "1.32 * radius * cos((datum.startAngle+datum.endAngle-3.14)/2)"
                            },
                            "y": {
                                "signal": "1.32 * radius * sin((datum.startAngle+datum.endAngle-3.14)/2)"
                            },
                            "strokeWidth": {
                                "signal": "width / 100"
                            },
                            "size": {
                                "signal": "(datum.circle2_amount/extent[1]) * (width/100) * width "
                            }
                        }
                    }
                },
                {
                    "name": "marks_circle2_text",
                    "type": "text",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "align": {
                                "value": "center"
                            },
                            "baseline": {
                                "value": "middle"
                            },
                            "fill": {
                                "value": "#fff"
                            }
                        },
                        "update": {
                            "theta": {
                                "signal": "(datum.startAngle+datum.endAngle)/2"
                            },
                            "radius": {
                                "signal": "width * 0.66"
                            },
                            "text": {
                                "signal": "datum.circle2_amount"
                            },
                            "fontSize": {
                                "signal": "(width/100) * 2"
                            },
                            "tooltip": {
                                "signal": "{'Category':datum.category,'Circle 2': datum.circle2_amount}"
                            }
                        }
                    }
                }
            ]
        },
        {
            "name": "marks_group_circle1",
            "type": "group",
            "encode": {
                "update": {
                    "x": {
                        "signal": "width / 2"
                    },
                    "y": {
                        "signal": "height / 2"
                    },
                    "zindex": {
                        "value": 10
                    }
                }
            },
            "marks": [
                {
                    "name": "marks_circle1_arc",
                    "type": "arc",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fillOpacity": {
                                "value": 1
                            },
                            "stroke": {
                                "value": "#ccc"
                            }
                        },
                        "update": {
                            "startAngle": {
                                "signal": "datum.startAngle + ((datum.endAngle - datum.startAngle )/ 2)"
                            },
                            "endAngle": {
                                "signal": "datum.endAngle + ((datum.endAngle - datum.startAngle )/ 2)"
                            },
                            "padAngle": {
                                "signal": "padAngle"
                            },
                            "innerRadius": {
                                "signal": "innerRadius"
                            },
                            "outerRadius": {
                                "signal": "width * 0.56"
                            },
                            "cornerRadius": {
                                "signal": "cornerRadius"
                            }
                        }
                    }
                },
                {
                    "name": "marks_circle1_circle",
                    "type": "symbol",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fill": {
                                "value": "#87ad39"
                            },
                            "fillOpacity": {
                                "value": 0.9
                            },
                            "stroke": {
                                "value": "#cadfab"
                            },
                            "shape": {
                                "value": "circle"
                            },
                            "strokeOpacity": {
                                "value": 0.9
                            }
                        },
                        "update": {
                            "x": {
                                "signal": "1.12 * radius * cos((datum.startAngle+datum.endAngle-3.14)/2)"
                            },
                            "y": {
                                "signal": "1.12 * radius * sin((datum.startAngle+datum.endAngle-3.14)/2)"
                            },
                            "strokeWidth": {
                                "signal": "width / 100"
                            },
                            "size": {
                                "signal": "(datum.circle1_amount/extent[1]) * (width/100) * width "
                            }
                        }
                    }
                },
                {
                    "name": "marks_circle1_text",
                    "type": "text",
                    "from": {
                        "data": "data_table"
                    },
                    "encode": {
                        "enter": {
                            "fill": {
                                "value": "#fff"
                            },
                            "align": {
                                "value": "center"
                            },
                            "baseline": {
                                "value": "middle"
                            }
                        },
                        "update": {
                            "theta": {
                                "signal": "(datum.startAngle+datum.endAngle)/2"
                            },
                            "radius": {
                                "signal": "width * 0.56"
                            },
                            "text": {
                                "signal": "datum.circle1_amount"
                            },
                            "fontSize": {
                                "signal": "(width/100) * 2"
                            },
                            "tooltip": {
                                "signal": "{'Category':datum.category,'Circle 1': datum.circle1_amount}"
                            }
                        }
                    }
                }
            ]
        },
        {
            "name": "marks_donut_arc",
            "type": "arc",
            "from": {
                "data": "data_table"
            },
            "encode": {
                "enter": {
                    "stroke": {
                        "value": "#fff"
                    }
                },
                "update": {
                    "x": {
                        "signal": "width / 2"
                    },
                    "y": {
                        "signal": "height / 2"
                    },
                    "fill": {
                        "scale": "scales_color",
                        "field": "id"
                    },
                    "startAngle": {
                        "field": "startAngle"
                    },
                    "endAngle": {
                        "field": "endAngle"
                    },
                    "padAngle": {
                        "signal": "padAngle"
                    },
                    "innerRadius": {
                        "signal": "innerRadius"
                    },
                    "outerRadius": {
                        "signal": "radius"
                    },
                    "cornerRadius": {
                        "signal": "cornerRadius"
                    },
                    "tooltip": {
                        "signal": "{'Category':datum.category,'Amount': datum.amount, 'Circle 1': datum.circle1_amount, 'Circle 2': datum.circle2_amount, 'Circle 3': datum.circle3_amount}"
                    }
                }
            }
        },
        {
            "name": "marks_category_name",
            "type": "text",
            "from": {
                "data": "data_table"
            },
            "encode": {
                "enter": {
                    "baseline": {
                        "value": "middle"
                    }
                },
                "update": {
                    "x": {
                        "signal": "width/2"
                    },
                    "y": {
                        "signal": "height/2"
                    },
                    "angle": {
                        "signal": "(datum.startAngle+datum.endAngle)*90/PI-90 > 90? (datum.startAngle+datum.endAngle)*90/PI-90 -180: (datum.startAngle+datum.endAngle)*90/PI-90"
                    },
                    "theta": {
                        "signal": "(datum.startAngle+datum.endAngle)/2"
                    },
                    "radius": {
                        "signal": "innerRadius * 1.5"
                    },
                    "text": {
                        "signal": "datum.category"
                    },
                    "align": {
                        "signal": "(datum.startAngle+datum.endAngle)*90/PI-90 > 90 ? 'left': 'right'"
                    },
                    "fill": {
                        "signal": "(datum.startAngle+datum.endAngle)*90/PI-90 < 45 ? 'white' : 'black' "
                    },
                    "fontSize": {
                        "signal": "(width/100) * 2"
                    }
                }
            }
        },
        {
            "name": "marks_cateogry_amount",
            "type": "text",
            "from": {
                "data": "data_table"
            },
            "encode": {
                "enter": {
                    "align": {
                        "value": "center"
                    },
                    "baseline": {
                        "value": "middle"
                    }
                },
                "update": {
                    "x": {
                        "signal": "width/2"
                    },
                    "y": {
                        "signal": "height/2"
                    },
                    "theta": {
                        "signal": "(datum.startAngle+datum.endAngle)/2"
                    },
                    "radius": {
                        "signal": "innerRadius * 1.9"
                    },
                    "text": {
                        "signal": "datum.amount"
                    },
                    "fill": {
                        "signal": "(datum.startAngle+datum.endAngle)*90/PI-90 < 45 ? 'white' : 'black' "
                    },
                    "fontSize": {
                        "signal": "(width/100) * 2"
                    }
                }
            }
        },
        {
            "name": "marks_infographic_text",
            "type": "text",
            "encode": {
                "enter": {
                    "fill": {
                        "value": "black"
                    },
                    "align": {
                        "value": "center"
                    },
                    "baseline": {
                        "value": "middle"
                    },
                    "text": {
                        "value": "Infographic Text"
                    }
                },
                "update": {
                    "x": {
                        "signal": "width / 2"
                    },
                    "y": {
                        "signal": "height / 2"
                    },
                    "fontSize": {
                        "signal": "(width/100) * 3"
                    }
                }
            }
        }
    ]
}