Vega Examples

big_number.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 400,
  "padding": 40,
  "autosize": {"type": "none", "contains": "padding"},

  "signals": [
    {"name": "center", "update": "width / 2"}
  ],

  "data": [
    {
      "name": "table",
      "values": [
        {"key": "Risk of Conflict", "value": "20%"}
      ]
    }
  ],
  "encode": {
    "enter": {
      "x": {"signal": "center"},
      "y": {"signal": "center"}
    }
  },

  "marks": [
    {
      "type": "text",
      "name": "my-label",
      "from": {"data": "table"},
      "zindex": 1,
      "encode": {
        "enter": {
          "x": {"signal": "0"},
          "y": {"signal": "70"},
          "text": {"field": "key"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fill": {"value": "black"},
          "fontWeight": {"value": "bold"},
          "fontSize": {"value": 20}
        }
      }
    },
    {
      "type": "text",
      "name": "my-value",
      "from": {"data": "table"},
      "zindex": 1,
      "encode": {
        "enter": {
          "x": {"signal": "0"},
          "y": {"signal": "0"},
          "text": {"field": "value"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fill": {"value": "black"},
          "fontWeight": {"value": "bold"},
          "fontSize": {"value": 80}
        }
      }
    }
  ]
}