{
  "width": 550,
  "height": 480,
  "padding": {"top": 0, "right": 40},
  "autosize": "none",
  "data": [
    {
      "name": "table",
      "values": [
        {
          "position": 1,
          "value": 70000,
          "header": "Desired Income",
          "desc": "How much you told us you want to spend in retirement."
        },
        {
          "position": 2,
          "value": 25000,
          "header": "Safe Income",
          "desc": "How much you can currently expect in retirement. <a href=#>Learn More</a>"
        },
        {
          "position": 3,
          "value": 72000,
          "header": "Our Income",
          "desc": "How much Edelman Financial Engines can get you."
        }
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "format(datum.value,'$,') + '/yr'",
          "as": "incomevalue"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": [0, 72000],
      "range": "width",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": [ "#e3e8e9", "#e3e8e9", "#0075d6" ]
    },
    {
      "name": "fontcolor",
      "type": "ordinal",
      "range": [ "#1b242d", "#1b242d", "#ffffff" ]
    },
    {
      "name": "fontsize",
      "type": "ordinal",
      "range": [24]
    },
    {
      "name": "textsize",
      "type": "ordinal",
      "range": [16]
    }
  ],
  "marks": [
    {
      "name": "group-mark-bars",
      "type": "group",
      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "field"
        }
      },
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "padding": 0.5,
          "paddingInner": 0.62,
          "domain": {
            "data": "facet",
            "field": "position"
          }
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {
            "data": "facet"
          },
          "type": "rect",
          "encode": {
            "enter": {
              "y": {
                "scale": "pos",
                "field": "position",
                "offset": 30
              },
              "height": {
                "scale": "pos",
                "band": 1
              },
              "x": {
                "scale": "xscale",
                "field": "value"
              },
              "x2": {
                "scale": "xscale",
                "value": 0
              },
              "fill": {
                "scale": "color",
                "field": "position"
              },
              "cornerRadius": {"value": 0}
            }
          }
        },
        {
          "type": "text",
          "from": {
            "data": "bars"
          },
          "encode": {
            "enter": {
              "x": {
                "field": "x",
                "offset": 15
              },
              "y": {
                "field": "y",
                "offset": {
                  "field": "height",
                  "mult": 0.5
                }
              },
              "fill": {
                "scale": "fontcolor",
                "field": "y"
              },
              "align": { "value": "left" },
              "baseline": { "value": "middle" },
              "text": { "field": "datum.incomevalue" },
              "font": { "value": "Roboto" },
              "fontSize": {
                "scale": "fontsize",
                "field": "y"
              }
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "bars"},
          "encode": {
            "enter": {
              "x": {"field": "x", "offset": 0},
              "y": {"field": "y", "offset": -25},
              "align": {"value": "left"},
              "baseline": {"value": "top"},
              "text": {"field": "datum.header"},
              "font": {"value": "Roboto"},
              "fontSize": {
                "scale": "textsize",
                "field": "y"
              },
              "fontWeight": {"value": "bold"}
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "bars"},
          "encode": {
            "enter": {
              "y": {"field": "y", "offset": {"field": "height", "mult":1.6}},
              "align": {"value": "left"},
              "baseline": {"value": "bottom"},
              "text": {"field": "datum.desc"},
              "href": "#",
              "font": { "value": "Roboto" },
              "fontSize": {
                "scale": "textsize",
                "field": "y"
              }
            }
          }
        }
      ]
    }
  ]
}