Notes on initial vega.js usage

vega-notes.md

Vega provides a layer on top of d3.js for describing visualizations with a JSON spec.

It makes it easier to try new visualizations like a chloropleth map or small multiples, frees co-workers from needing to see terrible things I've done with d3 and JS, and provides a canvas renderer for easy backwards compatibility on legacy browsers (note: canvas is the default; to use SVG if it's available do something like: chart({ ..., renderer: (Modernizr.svg ? 'svg' : 'canvas') })).

A couple things caught me off-guard:

1. The tutorial covers the visualization spec. Getting started directions are on the runtime wiki page. I missed the part where it said "Runtime - Deploying and using the browser-based Vega runtime."

2. Axes labels are a separate text mark?

3. Binding the inline data later seems to require setting an empty values array. In the stocks example I tried removing the url and format fields:

chart = vg.parse.spec({
  ...
  "data": [{
    "name": "stocks"
  }],
  ...
}, function (chart) {
    chart.data({"stocks": [{name: "WEEE", price: +Infinity ...}]);
  })
});
// Uncaught TypeError: Cannot read property 'symbol' of undefined
// i.e. expects data or a data type

chart = vg.parse.spec({
  ...
  "data": {
    "name": "stocks", 
    "values": [] // I'll provide inline data later
  },
  ...

1. The spec data value differs from the chart data method. It is an array of objects with explicit "name" keys and .data() takes an object and reads names from the object keys:

// spec
"data": [{
    "name": "stocks",
    "values": [...]
  }]
// becomes
.data({"stocks": [...])

Anyway, good stuff.