Extension:Graph/Demo/OverviewDetail

From http://vega.github.io/vega-editor/?spec=overview+detail <graph mode=interactive title="Zoomable Graph"> {

 "version": 2,
 "width": 600,
 "height": 400,

 "signals": [
   {
     "name": "brush_start",
     "streams": [{
       "type": "@overview:mousedown", 
       "expr": "eventX()", 
       "scale": {"name": "xOverview", "invert": true}
     }]
   },
   {
     "name": "brush_end",
     "init": {"expr": "datetime('Jan 1 2000')"},
     "streams": [{
       "type": "@overview:mousedown, [@overview:mousedown, window:mouseup] > window:mousemove",
       "expr": "clamp(eventX(), 0, 720)",
       "scale": {"name": "xOverview", "invert": true}
     }]
   },
   {
     "name": "min_date", 
     "init": {"expr": "datetime('Jan 1 2000')"},
     "expr": "time(brush_start) === time(brush_end) ? datetime('Jan 1 2000') : min(brush_start, brush_end)"
   },
   {
     "name": "max_date", 
     "init": {"expr": "datetime('Mar 1 2010')"},
     "expr": "time(brush_start) === time(brush_end) ? datetime('Mar 1 2010') : max(brush_start, brush_end)"
   }
 ],

 "data": [
   {
     "name": "sp500", 
     "url": "wikiraw:///Extension:Graph/data/sp500-csv",
     "format": {"type": "csv", "parse": {"price": "number", "date": "date"}}
   }
 ],

 "scales": [
   {
     "name": "xOverview",
     "type": "time",
     "range": [0, 720],
     "domain": {"data": "sp500", "field": "date"}
   },
   {
     "name": "yOverview",
     "type": "linear",
     "range": [70, 0],
     "nice": true,
     "domain": {"data": "sp500", "field": "price"}
   },
   {
     "name": "xDetail",
     "type": "time",
     "range": [0, 720],
     "domainMin": {"signal": "min_date"},
     "domainMax": {"signal": "max_date"}
   },
   {
     "name": "yDetail",
     "type": "linear",
     "range": [390, 0],
     "nice": true,
     "domain": {"data": "sp500", "field": "price"}
   }
 ],

 "marks": [
   {
     "type": "group",
     "name": "detail",
     "properties": {
       "enter": {
         "height": {"value": 390},
         "width": {"value": 720}
       }
     },
     "axes": [
       {"type": "x", "scale": "xDetail"},
       {"type": "y", "scale": "yDetail"}
     ],
     "marks": [
       {
         "type": "group",
         "properties": {
           "enter": {
             "height": {"field": {"group": "height"}},
             "width": {"field": {"group": "width"}},
             "clip": {"value": true}
           }
         },
         "marks": [
           {
             "type": "area",
             "from": {"data": "sp500"},
             "properties": {
               "update": {
                 "x": {"scale": "xDetail", "field": "date"},
                 "y": {"scale": "yDetail", "field": "price"},
                 "y2": {"scale": "yDetail", "value": 0},
                 "fill": {"value": "steelblue"}
               }
             }
           }
         ]
       }
     ]
   },

   {
     "type": "group",
     "name": "overview",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 430},
         "height": {"value": 70},
         "width": {"value": 720}
       }
     },
     "axes": [
       {"type": "x", "scale": "xOverview"}
     ],
     "marks": [
       {
         "type": "area",
         "from": {"data": "sp500"},
         "properties": {
           "update": {
             "x": {"scale": "xOverview", "field": "date"},
             "y": {"scale": "yOverview", "field": "price"},
             "y2": {"scale": "yOverview", "value": 0},
             "fill": {"value": "steelblue"}
           }
         }
       },
       {
         "type": "rect",
         "properties":{
           "enter":{
             "y": {"value": 0},
             "height": {"value":70},
             "fill": {"value": "#333"},
             "fillOpacity": {"value":0.2}
           },
           "update":{
             "x": {"scale": "xOverview", "signal": "brush_start"},
             "x2": {"scale": "xOverview", "signal": "brush_end"}
           }
         }
       }
     ]
   }

 ]

} </graph>