{
  "$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",
          "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": "<%= data_mapper.column_1 %>"
      },
      "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['<%= data_mapper.column_6 %>']/extent[1]) * (width/100) * width"
              }
            }
          }
        },
        {
          "name": "marks_circle3_text",
          "type": "text",
          "from": {
            "data": "data_table"
          },
          "encode": {
            "enter": {
              "fill": {
                "value": "#ffffff"
              },
              "align": {
                "value": "center"
              },
              "baseline": {
                "value": "middle"
              }
            },
            "update": {
              "theta": {
                "signal": "(datum.startAngle+datum.endAngle)/2"
              },
              "radius": {
                "signal": "width * 0.75"
              },
              "text": {
                "signal": "datum['<%= data_mapper.column_6 %>']"
              },
              "fontSize": {
                "signal": "(width / 100) * 2"
              },
              "tooltip": {
                "signal": "{'Category':datum['<%= data_mapper.column_2 %>'],'Circle 3': datum['<%= data_mapper.column_6 %>']}"
              }
            }
          }
        }
      ]
    },
    {
      "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['<%= data_mapper.column_5 %>']/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['<%= data_mapper.column_5 %>']"
              },
              "fontSize": {
                "signal": "(width/100) * 2"
              },
              "tooltip": {
                "signal": "{'Category':datum['<%= data_mapper.column_2 %>'],'Circle 2': datum['<%= data_mapper.column_5 %>']}"
              }
            }
          }
        }
      ]
    },
    {
      "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['<%= data_mapper.column_3 %>']/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['<%= data_mapper.column_4 %>']"
              },
              "fontSize": {
                "signal": "(width/100) * 2"
              },
              "tooltip": {
                "signal": "{'Category':datum['<%= data_mapper.column_2 %>'],'Circle 1': datum['<%= data_mapper.column_3 %>']}"
              }
            }
          }
        }
      ]
    },
    {
      "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": "<%= data_mapper.column_1 %>"
          },
          "startAngle": {
            "field": "startAngle"
          },
          "endAngle": {
            "field": "endAngle"
          },
          "padAngle": {
            "signal": "padAngle"
          },
          "innerRadius": {
            "signal": "innerRadius"
          },
          "outerRadius": {
            "signal": "radius"
          },
          "cornerRadius": {
            "signal": "cornerRadius"
          },
          "tooltip": {
            "signal": "{'Category':datum['<%= data_mapper.column_2 %>'],'Amount': datum['<%= data_mapper.column_3 %>'], 'Circle 1': datum['<%= data_mapper.column_3 %>'], 'Circle 2': datum['<%= data_mapper.column_5 %>'], 'Circle 3': datum['<%= data_mapper.column_6 %>']}"
          }
        }
      }
    },
    {
      "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['<%= data_mapper.column_2 %>']"
          },
          "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['<%= data_mapper.column_3 %>']"
          },
          "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"
          }
        }
      }
    }
  ]
}