Packed Bubble Chart

CustomChartDef packed_bubble {
  label: 'Packed Bubble Chart'
  description: ""
  fields {
    field category {
      label: 'Category'
      type: 'dimension'
    }
    field value {
      label: 'Value',
      type: 'measure'
    }
  }
  options {
    option color_scale {
      label: 'Color scale'
      type: 'select'
      default_value: 'category'
      options: ['category', 'ramp', 'heatmap']
    }
    option gravity_x {
      label: 'Gravity X'
      type: 'select'
      default_value: 0.5
      options: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
    }
    option gravity_y {
      label: 'Gravity Y'
      type: 'select'
      default_value: 0.5
      options: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
    }
    option size_scale_min {
      label: 'Size scale - Min'
      type: 'number-input'
      default_value: 0
    }
    option size_scale_max {
      label: 'Size scale - Max'
      type: 'number-input'
      default_value: 10
    }
    option text_length_limit {
      label: 'Text length limit (px)'
      type: 'number-input'
      default_value: 100
    }
  }
  template: @vg {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "padding": 0,
    "signals": [
      {"name": "width", "init": "containerSize()[0]", "on": [{ "events": "window:resize", "update": "containerSize()[0]" }]},
      {"name": "height", "init": "containerSize()[1]", "on": [{ "events": "window:resize", "update": "containerSize()[1]" }]},
      {"name": "cx", "update": "width / 2"},
      {"name": "cy", "update": "height / 2"}
    ],
    "data": [
      {
        "name": "table",
        "values": @{values},
        "transform": [
          {
            "type": "formula",
            "expr": "datum['@{fields.category.name}']",
            "as": "category"
          },
          {
            "type": "formula",
            "expr": "datum['@{fields.value.name}']",
            "as": "amount"
          }
        ]
      }
    ],
    "scales": [
      {
        "name": "size",
        "domain": {"data": "table", "field": "amount"},
        "range": [@{options.size_scale_min.value}, @{options.size_scale_max.value}]
      },
      {
        "name": "color",
        "type": "ordinal",
        "domain": {"data": "table", "field": "category"},
        "range": @{options.color_scale.value}
      }
    ],
    "marks": [
      {
        "name": "nodes",
        "type": "symbol",
        "from": {"data": "table"},
        "encode": {
          "enter": {
            "fill": {"scale": "color", "field": "category"},
            "xfocus": {"signal": "cx"},
            "yfocus": {"signal": "cy"}
          },
          "update": {
            "size": {"signal": "pow(2 * datum.amount, 2)", "scale": "size"},
            "stroke": {"value": "white"},
            "strokeWidth": {"value": 1},
            "tooltip": {
              "signal": "{ '@{fields.category.name}': datum.category, '@{fields.value.name}': datum.amount }"
            }
          }
        },
        "transform": [
          {
            "type": "force",
            "iterations": 100,
            "static": false,
            "forces": [
              {
                "force": "collide",
                "iterations": 2,
                "radius": {"expr": "sqrt(datum.size) / 2"}
              },
              {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}},
              {"force": "x", "x": "xfocus", "strength": @{options.gravity_x.value}},
              {"force": "y", "y": "yfocus", "strength": @{options.gravity_y.value}}
            ]
          }
        ]
      },
      {
        "type": "text",
        "from": {"data": "nodes"},
        "encode": {
          "enter": {
            "align": {"value": "center"},
            "baseline": {"value": "middle"},
            "fontSize": {"value": 15},
            "fontWeight": {"value": "bold"},
            "fill": {"value": "white"},
            "text": {"field": "datum.category"},
            "limit": {"value": @{options.text_length_limit.value}}
          },
          "update": {"x": {"field": "x"}, "y": {"field": "y"}}
        }
      }
    ],
    "params": [
      {
        "bind": "..."
      }
    ]
  };;
}

View on GitHub

Legacy syntax

CustomChart {
  fields {
    field category {
      label: 'Category'
      type: 'dimension'
    }
    field value {
      label: 'Value',
      type: 'measure'
    }
  }
  options {
    option color_scale {
      label: 'Color scale'
      type: 'select'
      default_value: 'category'
      options: ['category', 'ramp', 'heatmap']
    }
    option gravity_x {
      label: 'Gravity X'
      type: 'select'
      default_value: 0.5
      options: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
    }
    option gravity_y {
      label: 'Gravity Y'
      type: 'select'
      default_value: 0.5
      options: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
    }
    option size_scale_min {
      label: 'Size scale - Min'
      type: 'number-input'
      default_value: 0
    }
    option size_scale_max {
      label: 'Size scale - Max'
      type: 'number-input'
      default_value: 10
    }
    option text_length_limit {
      label: 'Text length limit (px)'
      type: 'number-input'
      default_value: 100
    }
  }
  template: @vg {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "padding": 0,
    "signals": [
      {"name": "width", "init": "containerSize()[0]", "on": [{ "events": "window:resize", "update": "containerSize()[0]" }]},
      {"name": "height", "init": "containerSize()[1]", "on": [{ "events": "window:resize", "update": "containerSize()[1]" }]},
      {"name": "cx", "update": "width / 2"},
      {"name": "cy", "update": "height / 2"}
    ],
    "data": [
      {
        "name": "table",
        "values": @{values},
        "transform": [
          {
            "type": "formula",
            "expr": "datum['@{fields.category.name}']",
            "as": "category"
          },
          {
            "type": "formula",
            "expr": "datum['@{fields.value.name}']",
            "as": "amount"
          }
        ]
      }
    ],
    "scales": [
      {
        "name": "size",
        "domain": {"data": "table", "field": "amount"},
        "range": [@{options.size_scale_min.value}, @{options.size_scale_max.value}]
      },
      {
        "name": "color",
        "type": "ordinal",
        "domain": {"data": "table", "field": "category"},
        "range": @{options.color_scale.value}
      }
    ],
    "marks": [
      {
        "name": "nodes",
        "type": "symbol",
        "from": {"data": "table"},
        "encode": {
          "enter": {
            "fill": {"scale": "color", "field": "category"},
            "xfocus": {"signal": "cx"},
            "yfocus": {"signal": "cy"}
          },
          "update": {
            "size": {"signal": "pow(2 * datum.amount, 2)", "scale": "size"},
            "stroke": {"value": "white"},
            "strokeWidth": {"value": 1},
            "tooltip": {
              "signal": "{ '@{fields.category.name}': datum.category, '@{fields.value.name}': datum.amount }"
            }
          }
        },
        "transform": [
          {
            "type": "force",
            "iterations": 100,
            "static": false,
            "forces": [
              {
                "force": "collide",
                "iterations": 2,
                "radius": {"expr": "sqrt(datum.size) / 2"}
              },
              {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}},
              {"force": "x", "x": "xfocus", "strength": @{options.gravity_x.value}},
              {"force": "y", "y": "yfocus", "strength": @{options.gravity_y.value}}
            ]
          }
        ]
      },
      {
        "type": "text",
        "from": {"data": "nodes"},
        "encode": {
          "enter": {
            "align": {"value": "center"},
            "baseline": {"value": "middle"},
            "fontSize": {"value": 15},
            "fontWeight": {"value": "bold"},
            "fill": {"value": "white"},
            "text": {"field": "datum.category"},
            "limit": {"value": @{options.text_length_limit.value}}
          },
          "update": {"x": {"field": "x"}, "y": {"field": "y"}}
        }
      }
    ],
    "params": [
      {
        "bind": "..."
      }
    ]
  };;
}