Wardley Map

Mix.install([:vega_lite, :kino, {:kino_vega_lite, "~> 0.1.1"}])

Crude Starting point

alias VegaLite, as: Vl

Vl.from_json("""
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A labelled scatterplot to turn into a Wardley Map.",
  "padding": 5,
  "width": 400,
  "height": 400,
  "autosize": "pad",

  "data": [
    {
    "name": "wardley",  
    "values": [
      {"Evolution": "0.7", "Visibility": 0.8, "Title": "Tea"}, 
      {"Evolution": "0.7", "Visibility": 0.3, "Title": "Water"},
      {"Evolution": "0.8", "Visibility": 0.2, "Title": "Electricity"},
      {"Evolution": "0.3", "Visibility": 0.4, "Title": "Kettle"},
      {"Evolution": "0.65", "Visibility": 0.5, "Title": "Hot Water"},
      {"Evolution": "0.75", "Visibility": 0.7, "Title": "Cup"},
      {"Evolution": "0.7", "Visibility": 0.95, "Title": "Cup of tea"}
    ]
  }
  ],

  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "wardley", "field": "Evolution"},
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "wardley", "field": "Visibility"},
      "range": "height"
    }
  ],

  "axes": [
    {"orient": "left", "scale": "y", "title": "Visibility"},
    {"orient": "bottom", "scale": "x", "title": "Evolution"}
  ],

  "marks": [
    {
      "name": "points",
      "type": "symbol",
      "from": {"data": "wardley"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "Evolution", "minValue": 0, "maxValue": 1},
          "y": {"scale": "y", "field": "Visibility", "minValue": 0, "maxValue": 1},
          "size": {"value": 25},
          "fillOpacity": {"value": 0.5}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "points"},
      "encode": {
        "enter": {
          "text": {"field": "datum.Title"},
          "fontSize": {"value": 18}
        }
      },
      "transform": [
        {
          "type": "label",
          "anchor": ["top", "bottom", "right", "left"],
          "offset": [1],
          "size": {"signal": "[width + 60, height]"}
        }
      ]
    }
  ]
}
""")