Extension:Graph/Demo/IndexChart

From http://vega.github.io/vega-editor/?spec=index_chart <graph mode=interactive title="Stock Market"> {

 "version": 2,
 "width": 650,
 "height": 300,
 "padding": "strict",
 "signals": [
   {
     "name": "indexDate",
     "init": {"expr": "time('Jan 1 2005')"},
     "streams": [{
       "type": "mousemove",
       "expr": "clamp(eventX(), 0, eventGroup('root').width)",
       "scale": {"name": "x", "invert": true}
     }]
   },
   {"name": "maxDate", "init": {"expr": "time('Mar 1 2010')"}}
 ],

 "data": [
   {
     "name": "stocks",
     "url": "wikiraw:///Extension:Graph/data/stocks-csv",
     "format": {"type": "csv", "parse": {"price":"number", "date":"date"}}
   },
   {
     "name": "index",
     "source": "stocks",
     "transform": [{
       "type": "filter",
       "test": "month(datum.date) == month(indexDate) && year(datum.date) == year(indexDate)"
     }]
   },
   {
     "name": "indexified_stocks",
     "source": "stocks",
     "transform": [{
       "type": "lookup",
       "on": "index", "onKey": "symbol",
       "keys": ["symbol"], "as": ["index_term"],
       "default": {"price": 0}
     }, {
       "type": "formula",
       "field": "indexed_price",
       "expr": "datum.index_term.price > 0 ? (datum.price - datum.index_term.price)/datum.index_term.price : 0"
     }]
   }
 ],

 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "stocks", "field": "date"},
     "range": "width"
   },
   {
     "name": "y",
     "type": "linear",
     "domain": {"data": "indexified_stocks", "field": "indexed_price"},
     "range": "height",
     "nice": true
   },
   {
     "name": "color", 
     "type": "ordinal", 
     "domain": {"data": "stocks", "field": "symbol"},
     "range": "category10"
   }
 ],
 "axes": [
   {"type": "y", "scale": "y", "grid": true, "layer": "back", "format": "%"}
 ],
 "marks": [
   {
     "type": "group",
     "from": {
       "data": "indexified_stocks",
       "transform": [{"type": "facet", "groupby": ["symbol"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "update": {
             "x": {"scale": "x", "field": "date"},
             "y": {"scale": "y", "field": "indexed_price"},
             "stroke": {"scale": "color", "field": "symbol"},
             "strokeWidth": {"value": 2}
           }
         }
       },
       {
         "type": "text",
         "from": {
           "transform": [{"type": "filter", "test": "datum.date == maxDate"}]
         },
         "properties": {
           "update": {
             "x": {"scale": "x", "field": "date", "offset": 2},
             "y": {"scale": "y", "field": "indexed_price"},
             "fill": {"scale": "color", "field": "symbol"},
             "text": {"field": "symbol"},
             "baseline": {"value": "middle"}
           }
         }
       }
     ]
   },
   {
     "type":"rule",
     "properties": {
       "update": {
         "x": {"field": {"group": "x"}},
         "x2": {"field": {"group": "width"}},
         "y": {"scale": "y", "value": 0},
         "stroke": {"value": "black"},
         "strokeWidth": {"value": 1}
       }
     }
   },
   {
     "type":"rule",
     "properties": {
       "update": {
         "x": {"scale": "x", "signal": "indexDate"},
         "y": {"value": 0},
         "y2": {"field": {"group": "height"}},
         "stroke": {"value": "red"}
       }
     }
   },
   {
     "type":"text",
     "properties": {
       "update": {
         "x": {"scale": "x", "signal": "indexDate"},
         "y2": {"field": {"group": "height"}, "offset": 15},
         "align": {"value": "center"},
         "text": {"template": "\u007B{indexDate | time: '%b %Y'}}"},
         "fill": {"value": "red"}
       }
     }
   }
 ]

} </graph>