{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 600,
  "height": 360,
  "autosize": "fit",
  "data": [
    {
      "name": "data_table",
      "url": "<%= absolute_url %>data/circle-packing.json",
      "transform": [
        {
          "type": "stratify",
          "key": "id",
          "parentKey": "parent"
        },
        {
          "type": "pack",
          "field": "size",
          "sort": {
            "field": "size"
          },
          "size": [
            {
              "signal": "width"
            },
            {
              "signal": "height - 40"
            }
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "scales_color",
      "type": "ordinal",
      "domain": {
        "data": "data_table",
        "field": "size"
      },
      "range": [
        "#8ead50",
        "#ccda7c",
        "#f1e693",
        "#f7e08b",
        "#efad5f",
        "#e26e62"
      ]
    },
    {
      "name": "scales_color_legend",
      "type": "quantize",
      "domain": {
        "data": "data_table",
        "field": "size"
      },
      "range": [
        "#8ead50",
        "#ccda7c",
        "#f1e693",
        "#f7e08b",
        "#efad5f",
        "#e26e62"
      ]
    },
    {
      "name": "scales_size",
      "type": "linear",
      "domain": {
        "data": "data_table",
        "field": "size"
      },
      "range": [
        20,
        28,
        20
      ]
    }
  ],
  "marks": [
    {
      "name": "marks_circles",
      "type": "symbol",
      "from": {
        "data": "data_table"
      },
      "encode": {
        "enter": {
          "shape": {
            "value": "circle"
          },
          "strokeWidth": {
            "value": 0.7
          }
        },
        "update": {
          "x": {
            "field": "x"
          },
          "y": {
            "field": "y"
          },
          "size": {
            "signal": "4 * datum.r * datum.r"
          },
          "fill": {
            "scale": "scales_color",
            "field": "size"
          },
          "stroke": {
            "signal": "datum.size ? 'grey' : ''"
          },
          "tooltip": {
            "signal": "datum.name + (datum.size ? ', ' + datum.size + ' bytes' : '')"
          }
        }
      }
    },
    {
      "name": "marks_circle_text",
      "type": "text",
      "from": {
        "data": "data_table"
      },
      "interactive": true,
      "encode": {
        "enter": {
          "font": {
            "value": "Helvetica Neue, Arial"
          },
          "align": {
            "value": "center"
          },
          "baseline": {
            "value": "middle"
          },
          "fill": {
            "value": "#000"
          }
        },
        "update": {
          "x": {
            "signal": "datum.x"
          },
          "y": {
            "signal": "datum.y"
          },
          "text": {
            "signal": "datum.parent != null ?  datum.name: ''"
          },
          "fontSize": {
            "signal": "datum.r > 30 ? '12': '0'"
          }
        }
      }
    }
  ],
  "legends": [
    {
      "type": "gradient",
      "orient": "none",
      "encode": {
        "labels": {
          "update": {
            "text": {
              "value": ""
            }
          }
        },
        "legend": {
          "update": {
            "x": {
              "signal": "width - 200"
            },
            "y": {
              "signal": "height - 40"
            }
          }
        }
      },
      "direction": "horizontal",
      "fill": "scales_color_legend",
      "title": "Color Repesents"
    }
  ]
}