Extension:Graph/Demo/OverviewDetail

From https://vega.github.io/editor/#/examples/vega/overview-plus-detail <graph mode=interactive title="Zoomable Graph"> {

 "$schema": "https://vega.github.io/schema/vega/v5.json",
 "description": "Area charts of stock prices, with an interactive overview and filtered detail views.",
 "width": 720,
 "height": 480,
 "padding": 5,

 "data": [
   {
     "name": "sp500",
     "url": "https://www.mediawiki.org/wiki/Extension:Graph/data/sp500-csv?action=raw",
     "format": {"type": "csv", "parse": {"price": "number", "date": "date"}}
   }
 ],

 "signals": [
   {
     "name": "detailDomain"
   }
 ],

 "marks": [
   {
     "type": "group",
     "name": "detail",
     "encode": {
       "enter": {
         "height": {"value": 390},
         "width": {"value": 720}
       }
     },
     "scales": [
       {
         "name": "xDetail",
         "type": "time",
         "range": "width",
         "domain": {"data": "sp500", "field": "date"},
         "domainRaw": {"signal": "detailDomain"}
       },
       {
         "name": "yDetail",
         "type": "linear",
         "range": [390, 0],
         "domain": {"data": "sp500", "field": "price"},
         "nice": true, "zero": true
       }
     ],
     "axes": [
       {"orient": "bottom", "scale": "xDetail"},
       {"orient": "left", "scale": "yDetail"}
     ],
     "marks": [
       {
         "type": "group",
         "encode": {
           "enter": {
             "height": {"field": {"group": "height"}},
             "width": {"field": {"group": "width"}},
             "clip": {"value": true}
           }
         },
         "marks": [
           {
             "type": "area",
             "from": {"data": "sp500"},
             "encode": {
               "update": {
                 "x": {"scale": "xDetail", "field": "date"},
                 "y": {"scale": "yDetail", "field": "price"},
                 "y2": {"scale": "yDetail", "value": 0},
                 "fill": {"value": "steelblue"}
               }
             }
           }
         ]
       }
     ]
   },

   {
     "type": "group",
     "name": "overview",
     "encode": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 430},
         "height": {"value": 70},
         "width": {"value": 720},
         "fill": {"value": "transparent"}
       }
     },
     "signals": [
       {
         "name": "brush", "value": 0,
         "on": [
           {
             "events": "@overview:mousedown",
             "update": "[x(), x()]"
           },
           {
             "events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
             "update": "[brush[0], clamp(x(), 0, width)]"
           },
           {
             "events": {"signal": "delta"},
             "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
           }
         ]
       },
       {
         "name": "anchor", "value": null,
         "on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
       },
       {
         "name": "xdown", "value": 0,
         "on": [{"events": "@brush:mousedown", "update": "x()"}]
       },
       {
         "name": "delta", "value": 0,
         "on": [
           {
             "events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
             "update": "x() - xdown"
           }
         ]
       },
       {
         "name": "detailDomain",
         "push": "outer",
         "on": [
           {
             "events": {"signal": "brush"},
             "update": "span(brush) ? invert('xOverview', brush) : null"
           }
         ]
       }
     ],
     "scales": [
       {
         "name": "xOverview",
         "type": "time",
         "range": "width",
         "domain": {"data": "sp500", "field": "date"}
       },
       {
         "name": "yOverview",
         "type": "linear",
         "range": [70, 0],
         "domain": {"data": "sp500", "field": "price"},
         "nice": true, "zero": true
       }
     ],
     "axes": [
       {"orient": "bottom", "scale": "xOverview"}
     ],
     "marks": [
       {
         "type": "area",
         "interactive": false,
         "from": {"data": "sp500"},
         "encode": {
           "update": {
             "x": {"scale": "xOverview", "field": "date"},
             "y": {"scale": "yOverview", "field": "price"},
             "y2": {"scale": "yOverview", "value": 0},
             "fill": {"value": "steelblue"}
           }
         }
       },
       {
         "type": "rect",
         "name": "brush",
         "encode": {
           "enter": {
             "y": {"value": 0},
             "height": {"value": 70},
             "fill": {"value": "#333"},
             "fillOpacity": {"value": 0.2}
           },
           "update": {
             "x": {"signal": "brush[0]"},
             "x2": {"signal": "brush[1]"}
           }
         }
       },
       {
         "type": "rect",
         "interactive": false,
         "encode": {
           "enter": {
             "y": {"value": 0},
             "height": {"value": 70},
             "width": {"value": 1},
             "fill": {"value": "firebrick"}
           },
           "update": {
             "x": {"signal": "brush[0]"}
           }
         }
       },
       {
         "type": "rect",
         "interactive": false,
         "encode": {
           "enter": {
             "y": {"value": 0},
             "height": {"value": 70},
             "width": {"value": 1},
             "fill": {"value": "firebrick"}
           },
           "update": {
             "x": {"signal": "brush[1]"}
           }
         }
       }
     ]
   }
 ]

} </graph>