Skip to main content

veta lite

{
  "data": { "url": "data/seattle-weather.csv" },
  "mark": "bar",
  "encoding": {
    "x": { "timeUnit": "month", "field": "date", "type": "ordinal" },
    "y": { "aggregate": "mean", "field": "precipitation" }
  }
}

spec​

  • spec
    • single view
    • 组合: layer, facet, concat, repeat
{
  // top-level
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "background": "white",
  "padding": 5,
  "autosize": "pad", // fit, none
  "config": {},
  "usermeta": {},

  // common
  "title": "",
  "name": "",
  "description": "",
  "data": {},
  "transform": [],
  "params": [],

  // view composition - layer, facet, concat, repeat
  "resolve": {},
  // layout composition - facet, concat, repeat
  "align": "all",
  "bounds": "full",
  "center": false,
  "spacing": 20,

  // single view
  "mark": "", // bar, circle, square, tick, line, area, point, rule, geoshape, text
  "encoding": {},
  "width": 0,
  "height": 0,
  "view": null,
  "projection": ""
}

data​

inline
{
  "values": "a\n1\n2\n3\n4",
  "format": {
    "type": "csv"
  }
}
url
{ "url": "data/cars.json" }
named
{
  // top-level
  "datasets": {
    "somedata": [1, 2, 3]
  },
  "data": {
    "name": "somedata"
  }
}

format

{
  "format": "json", // json, csv, tsv, dsv, topojson
  "parse": {
    // number, date, boolean
    "created_at": "date" // 将 created_at 解析为 date
  }
}

generate

{
  "sequence": {
    "start": 0,
    "stop": 12.7,
    "step": 0.1,
    "as": "x"
  },
  "graticule": {
    "step": [15, 15]
  }
}

transform​

  • density
    • 转换为密度 - density, value
    • 统计占比

FAQ

移除边框​

{
  "config": {
    "style": {
      "cell": {
        "stroke": "transparent"
      }
    }
  }
}
{
  "config": {
    "view": {
      "stroke": "transparent"
    }
  }
}