developer can create temporal chart

[ajturner]

Time series data - linear chart that allows brushing and zoom.

See Vega v2 for examples with declarative interaction

[ajturner]

{
  "width": 700,
  "height": 400,
  "data": [
    {
      "name": "crimes",
      "url": "http://maps2.dcgis.dc.gov/dcgis/rest/services/FEEDS/CDW_Feeds/MapServer/8/query?where=1%3D1&outFields=REPORTDATETIME%2CWARD&returnGeometry=false&f=pjson",
      "format": {"type": "json", "property": "features", "parse": {"attributes.REPORTDATETIME":"date"}}
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "round": true,
      "range": "width",
      "domain": {"data": "crimes", "field": "data.attributes.REPORTDATETIME"}
    },
    {
      "name": "y",
      "type": "linear",
      "nice": true,
      "range": "width",
      "domain": {"data": "crimes", "field": "data.attributes.WARD"}
    },    
    {
      "name": "c",
      "type": "ordinal",
      "range": "category10"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "symbol",
      "from": {"data": "crimes"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.attributes.REPORTDATETIME"},
          "y": {"scale": "y", "field": "data.attributes.WARD"},
          "size": {"value": 50},
          "stroke": {"scale": "c", "field": "data.attributes.WARD"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}

[ajturner]

Another type:

{
  "width": 700,
  "height": 700,
  "data": [
    {
      "name": "crimes",
      "url": "http://maps2.dcgis.dc.gov/dcgis/rest/services/FEEDS/CDW_Feeds/MapServer/8/query?where=1%3D1&outFields=OFFENSE%2CSHIFT%2CREPORTDATETIME%2CWARD&returnGeometry=false&f=pjson",
      "format": {"type": "json", "property": "features", "parse": {"attributes.REPORTDATETIME":"date"}}
    },
    {
      "name": "variety",
      "source": "crimes",
      "transform": [
        {"type": "facet", "keys": ["data.attributes.OFFENSE"]}
      ]
    },
    {
      "name": "ward",
      "source": "crimes",
      "transform": [
        {"type": "sort", "by": "data.attributes.WARD"},
        {"type": "facet", "keys": ["data.attributes.WARD"]}
      ]
    }    
  ],
  "scales": [
    {
      "name": "g",
      "type": "ordinal",
      "range": "height",
      "padding": 0.15,
      "domain": {"data": "ward", "field": "key"}
    },    
    {
      "name": "x",
      "type": "time",
      "round": true,
      "range": "width",
      "domain": {"data": "crimes", "field": "data.attributes.REPORTDATETIME"}
    },  
    {
      "name": "c",
      "type": "ordinal",
      "range": "category10"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"}
  ],
  "legends": [
    {
      "fill": "c",
      "title": "Shift",
      "offset": 0,
      "properties": {
        "symbols": {
          "fillOpacity": {
            "value": 0.5
          },
          "stroke": {
            "value": "transparent"
          }
        }
      }
    }
  ],  
  "marks": [
    {
      "type": "text",
      "from": {"data": "crimes"},
      "properties": {
        "enter": {
          "x": {"group": "width", "mult": 0.5},
          "y": {"scale": "g", "field": "data.attributes.WARD", "offset": -2},
          "fontWeight": {"value": "bold"},
          "text": {"field": "data.attributes.WARD"},
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#000"}
        }
      }
    },
    {
      "type": "group",
      "from": {"data": "ward"},
      "scales": [
        {
          "name": "y",
          "type": "ordinal",
          "range": "height",
          "points": true,
          "padding": 1.2,
          "domain": {"data": "variety", "field": "key"}
        }
      ],
      "axes": [
        {
          "type": "y",
          "scale": "y",
          "tickSize": 0,
          "properties": {"axis": {"stroke": {"value": "transparent"}}}
        }
      ],
      "properties": {
        "enter": {
          "x": {"value": 0.5},
          "y": {"scale": "g", "field": "key"},
          "height": {"scale": "g", "band": true},
          "width": {"group": "width"},
          "stroke": {"value": "#ccc"}
        }
      },
      "marks": [
        {
          "type": "symbol",
          "properties": {
            "enter": {
              "x": {"scale": "x", "field": "data.attributes.REPORTDATETIME"},
              "y": {"scale": "y", "field": "data.attributes.OFFENSE"},
              "size": {"value": 50},
              "stroke": {"scale": "c", "field": "data.attributes.SHIFT"},
              "strokeWidth": {"value": 2}
            }
          }
        }
      ]
    }
  ]
}