bar_horizontal.json

{
  "description": "A simple bar chart with embedded data.",
  "layers": [
    {
      "name": "myBar",
      "mark": "bar",
      "data": {
        "values": [
          {"a": "A","b": 28},
          {"a": "B","b": 55},
          {"a": "C","b": 43},
          {"a": "D","b": 91},
          {"a": "E","b": 81},
          {"a": "F","b": 53},
          {"a": "G","b": 2},
          {"a": "H","b": 87},
          {"a": "I","b": 52}
        ]
      },
      "encoding": {
        "y": {"field": "a","type": "ordinal"},
        "x": {"field": "b","type": "quantitative"}
      }
    },
    {
      "mark": "label",
      "data": {"ref": "myBar"},
      "encoding": {
        "color": {"value": "#fff"},
        "text": {"field": "b"}
      }
    }
  ]
}

bar_vertical-offset-anchor.json

{
  "description": "A simple bar chart with embedded data.",
  "layers": [
    {
      "name": "myBar",
      "mark": "bar",
      "data": {
        "values": [
          {"a": "A","b": 28},
          {"a": "B","b": 55},
          {"a": "C","b": 43},
          {"a": "D","b": 91},
          {"a": "E","b": 81},
          {"a": "F","b": 53},
          {"a": "G","b": 2},
          {"a": "H","b": 87},
          {"a": "I","b": 52}
        ]
      },
      "encoding": {
        "x": {"field": "a","type": "ordinal"},
        "y": {"field": "b","type": "quantitative"}
      }
    },
    {
      "mark": "label",
      "data": {"ref": "myBar"},
      "encoding": {
        "color": {"value": "#fff"},
        "text": {"field": "b"},
        "anchor": {"value": "auto"},
        "offset": {"value": "auto"}
      }
    }
  ]
}

bar_vertical.json

{
  "description": "A simple bar chart with embedded data.",
  "layers": [
    {
      "name": "myBar",
      "mark": "bar",
      "data": {
        "values": [
          {"a": "A","b": 28},
          {"a": "B","b": 55},
          {"a": "C","b": 43},
          {"a": "D","b": 91},
          {"a": "E","b": 81},
          {"a": "F","b": 53},
          {"a": "G","b": 2},
          {"a": "H","b": 87},
          {"a": "I","b": 52}
        ]
      },
      "encoding": {
        "x": {"field": "a","type": "ordinal"},
        "y": {"field": "b","type": "quantitative"}
      }
    },
    {
      "mark": "label",
      "data": {"ref": "myBar"},
      "encoding": {
        "color": {"value": "#fff"},
        "text": {"field": "b"},
      }
    }
  ]
}

crowded_scatter.json

{
  "description": "A scatterplot showing horsepower and miles per gallons for various cars.",
  "layers": [
    {
      "name": "myScatter",
      "data": {"url": "data/cars.json"},
      "mark": "point",
      "encoding": {
        "x": {"field": "Horsepower","type": "quantitative"},
        "y": {"field": "Miles_per_Gallon","type": "quantitative"}
      }
    },
    {
      "mark": "label",
      "data": {"ref": "myScatter"},
      "encoding": {
        "color": {"value": "#000"},
        "text": {"field": "Origin"},
        "anchor": {"value": "bottom"},
        "offset": {"value": 15}
      }
    }
  ]
}

line.json

{
  "description": "Google's stock price over time.",
  "layers": [
    {
      "name": "myLines",
      "data": {"url": "data/stocks.csv","formatType": "csv"},
      "transform": {"filter": "datum.symbol==='GOOG'"},
      "mark": "line",
      "encoding": {
        "x": {"field": "date","type": "temporal"},
        "y": {"field": "price","type": "quantitative"}
      }
    },
    {
      "mark": "label",
      "data": {"ref": "myLines"},
      "encoding": {
        "color": {"value": "#000"},
        "text": {"field": "price"},
        "anchor": {"value": "auto"},
        "offset": {"value": 15}
      }
    }
  ]
}

minimal_scatter.json

{
  "description": "A simple bar chart with embedded data.",
  "layers": [
    {
      "name": "myScatter",
      "data": {
        "values": [
          {"a": 10,"b": 28},
          {"a": 41,"b": 55},
          {"a": 12,"b": 43},
          {"a": 21,"b": 91},
          {"a": 34,"b": 81},
          {"a": 51,"b": 53},
          {"a": 15,"b": 8},
          {"a": 64,"b": 61},
          {"a": 36,"b": 52}
        ]
      },
      "mark": "point",
      "encoding": {
        "x": {"field": "a","type": "quantitative"},
        "y": {"field": "b","type": "quantitative"}
      }
    },
    {
      "mark": "label",
      "data": {"ref": "myScatter"},
      "encoding": {
        "color": {"value": "#000"},
        "text": {"field": "a"},
        "anchor": {"value": "auto"},
        "offset": {"value": 7}
      }
    }
  ]
}