Vega Sketchpad

line-chart-vega.md

SELECT
  date_trunc(year, CAST(contrib_date AS TIMESTAMP(0))) as key0,
  AVG(amount) AS series_1
FROM contributions_donotmodify
WHERE
  (CAST(contrib_date AS TIMESTAMP(0)) >= TIMESTAMP(0) '1996-11-05 17:47:30'
  AND CAST(contrib_date AS TIMESTAMP(0)) <= TIMESTAMP(0) '2010-10-21 10:54:07')
  AND amount IS NOT NULL
GROUP BY key0
ORDER BY key0

Vega strict

if one were to follow the specification "strictly"

{
  "data": {"table": "contributions"},
  "transform": [
    {
      "type": "formula",
      "as": "key0",
      "expr": "date_trunc(year, CAST(datum.contrib_date AS TIMESTAMP(0)))"
    },
    {
      "type": "aggregate",
      "groupby": ["key0"],
      "fields": ["amount"],
      "ops": ["average"],
      "as": ["series_1"]
    },
    {
      "type": "collect",
      "sort": { "field": "key0" }
    },
    {
      "type": "filter",
      "field": "contrib_date",
      "range": ["1996-11-05 17:47:30", "2010-10-21 10:54:07"]
    },
    {
      "type": "filter",
      "expr": "amount IS NOT NULL"
    }
  ]
 } 

Vega dialect

if one were to follow it in "spirit", but introduce new syntax for sql:

{
  "data": {"table": "contributions"},
  "transform": [
    {
      "type": "formula",
      "field": "contrib_date",
      "as": "key0",
      "dateTrunc": "year",
      "cast": "timestamp"
    },
    {
      "type": "aggregate",
      "groupby": ["key0"],
      "fields": ["amount"],
      "ops": ["average"],
      "as": ["series_1"]
    },
    {
      "type": "collect",
      "sort": { "field": "key0" }
    },
    {
      "type": "filter",
      "field": "contrib_date",
      "range": ["1996-11-05 17:47:30", "2010-10-21 10:54:07"]
    },
    {
      "type": "filter",
      "isNull": false
    }
  ]
 } 

pie-chart-vega.md

SELECT
  cast((cast(airtime as float) - 0) * 0.008888888888888889 as int) as key0,
  COUNT(*) AS val,
  COUNT(*) AS color
FROM flights_donotmodify
WHERE
  ((airtime >= 0 AND airtime <= 1350) OR (airtime IS NULL))
GROUP BY key0
HAVING (key0 >= 0 AND key0 < 12 OR key0 IS NULL)
ORDER BY
  val DESC,
  color DESC
LIMIT 10 

{
  "data": {"table": "flights_donotmodify"},
  "transform": [
    {
      "type": "formula",
      "as": "key0",
      "expr": "cast((cast(datum.airtime as float) - 0) * 0.008888888888888889 as int)"
    },
    {
      "type": "aggregate",
      "groupby": ["key0"],
      "as": ["color", "val"]
    },
    {
      "type": "bin",
      "field": "key0",
      "extent": [0, 1350],
      "maxbins": 12
    },
    {
      "type": "collect",
      "sort": {
        "field": ["val", "color"],
        "order": ["descending", "descending"]
      }
    }
  ]
}

ramblings.md

• subqueries => nested transformations?

• where to hold state of the "crossfiltering" ?

if delegated to user, we are left with the same problem as we have now: having to handle crossfilter and dc, exposing a two fronted API to the user.

if hidden away, then state might be opaque to user...the upside is one API that encapsulates both chart UI and SQL

• how do we express the notion of chart groups like in dc.js?

vega-lite-overview-detail.md

https://vega.github.io/new-editor/?mode=vega-lite&spec=overview_detail

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "data/sp500.csv"},
  "vconcat": [
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "selection": {
        "brush": {"type": "interval", "encodings": ["x"]}
      },
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "axis": {"format": "%Y", "labelAngle": 0}
        },
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    },
    {
      "width": 480,
      "mark": "area",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "scale": {"domain": {"selection": "brush", "encoding": "x"}},
          "axis": {"title": "", "labelAngle": 0}
        },
        "y": {"field": "price","type": "quantitative"}
      }
    }
  ]
}