Extension:Graph/Demo/IndexChart

From http://vega.github.io/vega-editor/?spec=index_chart  { "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"} }     }    }  ] }