Integrate Cedar with VegaLite

[ajturner]

Check out VegaLite by playing with Polestar. VegaLite is a high-level language that then generates more complex Vega documents.

So for Cedar - it would be: Cedar -> VegaLite -> Vega

We could leverage this for more expressive charts.

Our API would look like:

  var chart = new Cedar({
    "type":"bar",
    "data": {
      {
        "url":"http://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Education_WebMercator/MapServer/5",
        "fields": {
          "x": {"name":"ZIP_CODE", "label":"ZIP Code"},
          "y": {"name":"TOTAL_STUD", "aggregate": "sum", "label":"Total Students"}
          "row": {},
          "column": {},
          "size": {},
          "shape": {}
        }
      }
    }
  });

For example - here is a VegaLite Shorthand

mark=bar|x=When__Phase_of_flight,O|y=Cost__Other,Q

And VegaLite JSON.

{
  "data": {"formatType": "json","values": [],"url": "data/birdstrikes.json"},
  "enc": {
    "x": {
      "bin": false,
      "scale": {"type": "linear","reverse": false,"zero": true},
      "axis": {"grid": true,"title": true,"maxLabelLength": 25},
      "band": {"padding": 1},
      "sort": [],
      "name": "When__Phase_of_flight",
      "type": "O"
    },
    "y": {
      "bin": false,
      "scale": {"type": "linear","reverse": false,"zero": true},
      "axis": {"grid": true,"title": true,"maxLabelLength": 20,"format": ""},
      "band": {"padding": 1},
      "sort": [],
      "name": "Cost__Other",
      "type": "Q"
    },
    "row": {
      "bin": false,
      "padding": 0.1,
      "sort": [],
      "axis": {"grid": true,"title": true,"maxLabelLength": 25},
      "height": 150,
      "grid": true
    },
    "col": {
      "bin": false,
      "padding": 0.1,
      "sort": [],
      "axis": {"grid": true,"title": true,"maxLabelLength": 12},
      "width": 150
    },
    "size": {
      "bin": false,
      "scale": {"type": "linear","reverse": false,"zero": true},
      "legend": true,
      "value": 30,
      "sort": []
    },
    "color": {
      "bin": false,
      "scale": {"type": "linear","reverse": false,"zero": true},
      "legend": true,
      "value": "steelblue",
      "sort": []
    },
    "alpha": {
      "bin": false,
      "scale": {"type": "linear","reverse": false,"zero": true},
      "sort": []
    },
    "shape": {"bin": false,"legend": true,"value": "circle","sort": []},
    "text": {
      "bin": false,
      "scale": {"type": "linear","reverse": false,"zero": true},
      "text": {"align": "left","baseline": "middle","margin": 4},
      "font": {
        "weight": "normal",
        "size": 10,
        "family": "Helvetica Neue",
        "style": "normal"
      },
      "sort": []
    },
    "detail": {"bin": false,"sort": []}
  },
  "filter": [],
  "config": {
    "gridColor": "black",
    "gridOpacity": 0.08,
    "filterNull": {"O": false,"Q": true,"T": true},
    "toggleSort": "O",
    "singleHeight": 200,
    "singleWidth": 200,
    "largeBandSize": 21,
    "smallBandSize": 12,
    "largeBandMaxCardinality": 10,
    "cellPadding": 0.1,
    "cellGridColor": "black",
    "cellGridOpacity": 0.15,
    "cellBackgroundColor": "transparent",
    "textCellWidth": 90,
    "strokeWidth": 2,
    "timeScaleLabelLength": 3,
    "characterWidth": 6
  },
  "marktype": "bar"
}