Changes
Jump to navigation
Jump to search
m
Extension:Graph/Demo/OverviewDetail (view source)
Revision as of 05:10, 19 February 2016
, 05:10, 19 February 2016Djr13 moved page Extension:Graph/overview detail to Extension:Graph/Demo/OverviewDetail: sorting and naming consistency for graph demos
''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>
<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>