VEGA

Not just another chart library
base on d3.js

By Evan Liomain

TL;DR

VEGA, it's d3.js, but in json

Data

inline

url (json, csv, tsv, dsv, topoJSON)

programmatically

Transform

Functions to transform data to compute graphical representation

  • Basic (sorting, filtering, max/min, aggregation, packing, custom)
  • Geographic
  • Layout (pie, stack, force, voronoi, world cloud)
  • Hierarchy (tree, treemap, partition)
  • Cross filtering

Scales

Bijective functions

Use to map data with visual values

Marks

What you draw

All is path. Is basically svg markup

  • rect
  • symbol
  • line/trail
  • arc/area
  • path
  • text
  • shape (for maps)
  • area
  • image

Chart elements

  • Axes
  • Legends

Signals

It's variables you can use anywhere

  • Predefine signals: width / height
  • Expression evaluation
  • Event handling

Demo

Pro / Const

Pro

+ All in one structured file

+ Online live editor

+ Nearly no dataviz limit

+ Good documentation

+ Active development

Const

- spec in json

- No reusable code across spec

- No predefined design

- Transform function naming not straightforward
(collect to sort)

- Uncomplete autocompletion of online editor

- Uncomplete documentation (custom styling, unknown properties)

- hard to size with css (responsive)

Links

Vega doc

Vega editor

Color brewer

Dataviz ideas

Questions