vega-lite

Basic Chart

This code sample demonstrates how to create a simple bar chart using Vega-Lite. The data is embedded directly in the specification, and the chart maps the 'a' field to the x-axis and the 'b' field to the y-axis.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "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": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  }
}

Interactive Chart

This code sample demonstrates how to create an interactive scatterplot using Vega-Lite. The chart allows users to select a region (brush) to highlight points based on the 'Cylinders' field.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A scatterplot with interactive selection.",
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {
        "selection": "brush",
        "field": "Cylinders",
        "type": "ordinal"
      },
      "value": "grey"
    }
  },
  "selection": {
    "brush": {"type": "interval"}
  }
}

Layered Chart

This code sample demonstrates how to create a layered chart using Vega-Lite. The chart combines a line mark and a point mark to visualize stock prices over time.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A layered chart with a line and point marks.",
  "data": {"url": "data/stocks.csv"},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    }
  ]
}