{
  "$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": "<%= absolute_url %>data/treemap-2.json",
      "transform": [
        {
          "type": "stratify",
          "key": "id",
          "parentKey": "parent"
        },
        {
          "type": "treemap",
          "field": "size",
          "sort": {"field": "size"},
          "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": "size"},
      "range": {"scheme": "blues", "count": 5}
    },
    {
      "name": "size",
      "type": "linear",
      "domain": {"data": "leaves", "field": "size"},
      "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": "size"
          },
          "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 Neue, Arial"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fill": {"signal": "datum.size < 35 ? 'black': 'white'"},
          "text": {"field": "name"},
          "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"
    }
  ]
}