veta lite

• vega/vega-lite
  • 会编译为 Vega
  • 定义比 Vega 更简单

{
  "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
  }
}

• "date:'%m%d%Y'" - 支持 d3 time-format
• "utc:'%m%d%Y'" - UTC 时间

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"
    }
  }
}