Vega Graph visualization

This application is open source on Github.

Input

Select spec Vega

{
  "width": 200,
  "height": 200,

"signals": [
    {"name": "w", "init": 200},
    {"name": "h", "init": 200},
    {
      "name": "brush_start",
      "init": {},
      "streams": [{
        "type": "mousedown",
        "expr": "{x: iscale('x', clamp(eventX(), 0, w)), y: iscale('y', clamp(eventY(), 0, h))}"
      }]
    },
    {
      "name": "brush_end",
      "init": {},
      "streams": [{
        "type": "mousedown, [mousedown, window:mouseup] > window:mousemove",
        "expr": "{x: iscale('x', clamp(eventX(), 0, w)), y: iscale('y', clamp(eventY(), 0, h))}"
      }]
    }
  ],

"data": [{
    "name": "iris",
    "url": "data/iris.json"
  }],

"scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "iris", "field": "sepalWidth"},
      "range": "width",
      "zero": false
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "iris", "field": "petalLength"},
      "range": "height",
      "nice": true,
      "zero": false
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": {"data": "iris", "field": "species"},
      "range": "category10"
    }
  ],

"axes": [
    {"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
    {"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
  ],

"marks": [
    {
      "type": "symbol",
      "from": {"data": "iris"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "sepalWidth"},
          "y": {"scale": "y", "field": "petalLength"},
          "fill": {"scale": "c", "field": "species"},
          "fillOpacity": {"value": 0.5},
          "size": {"value": 100}
        },
        "update": {
          "fill": [
            { "test": "inrange(datum.sepalWidth, brush_start.x, brush_end.x) && inrange(datum.petalLength, brush_start.y, brush_end.y)",
              "scale": "c",
              "field": "species"
            },
            {"value": "grey"}
          ]
        }
      }
    },

{
      "type": "rect",
      "properties": {
        "enter": {
          "fill": {"value": "grey"},
          "fillOpacity": {"value": 0.2}
        },
        "update": {
          "x": {"scale": "x", "signal": "brush_start.x"},
          "x2": {"scale": "x", "signal": "brush_end.x"},
          "y": {"scale": "y", "signal": "brush_start.y"},
          "y2": {"scale": "y", "signal": "brush_end.y"}
        }
      }
    }
  ]
}

Vega Graph visualization

Input

Graph Visualization

Visualization