نمایش مبدأ برای 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>