{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "title": {
    "text": "Title",
    "anchor": "start",
    "fontSize": 18,
    "font": "Roboto",
    "fontWeight": "bold",
    "color": "#000000"
  },
  "width": 600,
  "height": 355,
  "padding": {"top": 5},
  "autosize": "fit",
  "signals": [
    {
      "name": "signal_gradientLength",
      "value": 200
    }
  ],
  "data": [
    {
      "name": "tree",
      "url": "<%= dataset_url %>",
      "transform": [
        {
          "type": "stratify",
          "key": "<%= data_mapper.column_1 %>",
          "parentKey": "<%= data_mapper.column_3 %>"
        },
        {
          "type": "treemap",
          "field": "<%= data_mapper.column_4 %>",
          "sort": {
            "field": "<%= data_mapper.column_4 %>"
          },
          "method": "squarify",
          "ratio": 1,
          "round": true,
          "size": [
            {
              "signal": "width"
            },
            {
              "signal": "height"
            }
          ]
        }
      ]
    },
    {
      "name": "nodes",
      "source": "tree",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.children"
        }
      ]
    },
    {
      "name": "leaves",
      "source": "tree",
      "transform": [
        {
          "type": "filter",
          "expr": "!datum.children"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "quantize",
      "domain": {
        "data": "leaves",
        "field": "<%= data_mapper.column_4 %>"
      },
      "range": [
        "#e75e33",
        "#efab83",
        "#beeb9f",
        "#79bd8f",
        "#4fa489"
      ]
    },
    {
      "name": "size",
      "type": "linear",
      "domain": {
        "data": "leaves",
        "field": "<%= data_mapper.column_4 %>"
      },
      "range": [
        20,
        28,
        20
      ]
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "nodes"
      },
      "interactive": false,
      "encode": {
        "enter": {},
        "update": {
          "x": {
            "field": "x0"
          },
          "y": {
            "field": "y0"
          },
          "x2": {
            "field": "x1"
          },
          "y2": {
            "field": "y1"
          }
        }
      }
    },
    {
      "type": "rect",
      "from": {
        "data": "leaves"
      },
      "encode": {
        "enter": {
          "fill": {
            "scale": "color",
            "field": "<%= data_mapper.column_4 %>"
          },
          "stroke": {
            "value": "#fff"
          }
        },
        "update": {
          "x": {
            "field": "x0"
          },
          "y": {
            "field": "y0"
          },
          "x2": {
            "field": "x1"
          },
          "y2": {
            "field": "y1"
          }
        }
      }
    },
    {
      "type": "text",
      "from": {
        "data": "leaves"
      },
      "interactive": false,
      "encode": {
        "enter": {
          "font": {
            "value": "Helvetica"
          },
          "align": {
            "value": "center"
          },
          "baseline": {
            "value": "middle"
          },
          "fill": {
            "value": "#000"
          },
          "text": {
            "field": "<%= data_mapper.column_2 %>"
          },
          "fontSize": {
            "scale": "size",
            "field": "depth"
          }
        },
        "update": {
          "x": {
            "signal": "0.5 * (datum.x0 + datum.x1)"
          },
          "y": {
            "signal": "0.5 * (datum.y0 + datum.y1)"
          }
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "fill": {
            "value": "#000"
          },
          "text": {
            "value": ""
          }
        },
        "update": {
          "opacity": {
            "value": 1
          },
          "x": {
            "value": 100
          },
          "y": {
            "value": -10
          },
          "dx": {
            "value": 0
          },
          "angle": {
            "value": 0
          },
          "align": {
            "value": "center"
          },
          "font": {
            "value": "Roboto"
          },
          "fontSize": {
            "value": 12
          },
          "fontStyle": {
            "value": "normal"
          },
          "fontWeight": {
            "value": "bold"
          },
          "limit": {
            "value": 0
          }
        },
        "hover": {
          "opacity": {
            "value": 0.5
          }
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "fill": {
            "value": "#000"
          },
          "text": {
            "value": ""
          }
        },
        "update": {
          "opacity": {
            "value": 1
          },
          "x": {
            "value": 250
          },
          "y": {
            "value": 0
          },
          "dx": {
            "value": 0
          },
          "angle": {
            "value": 0
          },
          "align": {
            "value": "center"
          },
          "font": {
            "value": "Roboto"
          },
          "fontSize": {
            "value": 12
          },
          "fontStyle": {
            "value": "normal"
          },
          "fontWeight": {
            "value": "bold"
          },
          "limit": {
            "value": 0
          }
        },
        "hover": {
          "opacity": {
            "value": 0.9
          }
        }
      }
    }
  ],
  "legends": [
    {
      "type": "gradient",
      "orient": "none",
      "gradientLength": {"signal": "signal_gradientLength"},
      "encode": {
        "labels": {
          "update": {
            "text": {
              "value": ""
            }
          }
        },
        "legend": {
          "update": {
            "x": {
              "signal": "width - signal_gradientLength"
            },
            "y": {
              "value": -50
            }
          }
        }
      },
      "direction": "horizontal",
      "fill": "color",
      "title": "Low"
    }
  ]
}
