Experiment in making points explode away from one another on hover

explode-points.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 700,
  "height": 100,
  "padding": {"left": 5, "right": 5, "top": 0, "bottom": 20},
  "autosize": "none",

  "signals": [
    { "name": "cx", "update": "width / 2" },
    { "name": "cy", "update": "height / 2" },
    { "name": "radius", "value": 8 },
    { "name": "collide", "value": 0.1 },
    { "name": "gravityX", "value": 0.1 },
    { "name": "gravityY", "value": 0.1 },
    { "name": "static", "value": false },
    {
      "name": "explodedGroup",
      "on": [
        {
          "events": {
            "type": "mouseover"
          },
          "update": "datum && datum.group"
        }
      ]
    }
  ],

  "data": [
    {
      "name": "people",
      "url": "data/miserables.json",
      "format": {"type": "json", "property": "nodes"},
      "transform": [
        { "type": "formula", "as": "x-focus", "expr": "width * (.5 + datum.group) / 10 + random()" },
        { "type": "formula", "as": "y-focus", "expr": "cy + random()" },
        { "type": "formula", "as": "radius", "expr": "datum.group === explodedGroup ? radius : 0" },
        {
          "type": "force",
          "restart": true,
          "static": {"signal": "static"},
          "forces": [
            {"force": "collide", "iterations": {"signal": "collide"}, "radius": {"field": "radius"}},
            {"force": "x", "x": "x-focus", "strength": {"signal": "gravityX"}},
            {"force": "y", "y": "y-focus", "strength": {"signal": "gravityY"}}
          ]
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "people",
        "field": "group",
        "sort": true
      },
      "range": "width"
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": {"scheme": "category20c"}
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale" }
  ],

  "marks": [
    {
      "name": "nodes",
      "type": "symbol",
      "from": {"data": "people"},
      "encode": {
        "enter": {
          "fill": {"scale": "color", "field": "group"}
        },
        "update": {
          "x": { "field": "x" },
          "y": { "field": "y" },
          "size": {"signal": "pow(2 * radius, 2)"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 1},
          "zindex": {"value": 0}
        },
        "hover": {
          "stroke": {"value": "purple"},
          "strokeWidth": {"value": 3},
          "zindex": {"value": 1}
        }
      }
    }
  ]
}