Markdown chart maker

Build a data chart from a small JSON spec. Vega-Lite renders bar, line, scatter and more, so your data lives as text right beside the picture.

Vega-Lite chart syntax

A Vega-Lite chart is a small JSON object with three parts: a mark for the chart type, data for the rows, and an encoding that maps fields to the axes. Here is each piece you can write.

Bar chart

Set the mark to bar, give it rows of data, and map a field to each axis.

You write

{
  "mark": "bar",
  "data": {
    "values": [
      {"month": "Jan", "sales": 30},
      {"month": "Feb", "sales": 45},
      {"month": "Mar", "sales": 60}
    ]
  },
  "encoding": {
    "x": {"field": "month", "type": "nominal"},
    "y": {"field": "sales", "type": "quantitative"}
  }
}

You get

Line chart

Change the mark to line to join the points.

You write

{
  "mark": "line",
  "data": {"values": [
    {"day": 1, "value": 5},
    {"day": 2, "value": 8},
    {"day": 3, "value": 6}
  ]},
  "encoding": {
    "x": {"field": "day", "type": "quantitative"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

You get

Colour by a field

Add a colour channel to split the marks by a category.

You write

{
  "mark": "point",
  "data": {"values": [
    {"x": 1, "y": 2, "group": "A"},
    {"x": 2, "y": 5, "group": "B"},
    {"x": 3, "y": 3, "group": "A"}
  ]},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "group", "type": "nominal"}
  }
}

You get

Cheat sheet

Write this	You get
Top level
`"title": "My chart"`	A heading above the chart
`"mark": "bar"`	The chart type
`"data": {"values": [ ... ]}`	Inline rows of data
`"encoding": { ... }`	Map fields to the chart
Mark type
`"mark": "bar"`	A bar chart
`"mark": "line"`	A line chart
`"mark": "point"`	A scatter plot
`"mark": "area"`	An area chart
`"mark": "arc"`	A pie or arc chart
`"mark": "tick"`	A tick strip plot
Encoding channel
`"x": {"field": "..."}`	The horizontal axis
`"y": {"field": "..."}`	The vertical axis
`"color": {"field": "..."}`	Colour the marks by a field
`"theta": {"field": "..."}`	The angle for an arc chart
Field type
`"type": "nominal"`	A category with no order
`"type": "ordinal"`	A category with an order
`"type": "quantitative"`	A number
`"type": "temporal"`	A date or time