{
"schema": {
"language": "vega",
"version": "3.0"
},
"width": 500,
"height": 200,
"padding": 25,
"signals": [
{
"name": "indexDate",
"update": "datetime(2004,7,1,0,0,0)",
"on": [
{
"events": [
{
"type": "mousemove"
},
{
"type": "touchmove"
}
],
"update": "invert('xscale', clamp(x(), 0, width))"
},
{
"events": {
"signal": "nearest_date"
},
"update": "nearest_date"
}
]
},
{
"name": "timestamp",
"value": 1091311200000,
"bind": {
"input": "range",
"min": 1091311200000,
"max": 1267398000000,
"step": 2.628e+9
}
},
{
"name": "nearest_date",
"update": "data('lookup_date')[0]['date']"
}
],
"data": [
{
"name": "source",
"url": "data/stocks.csv",
"format": {
"type": "csv",
"parse": {
"date": "date",
"price": "number",
"company": "string"
}
},
"transform": [
{
"type": "filter",
"expr": "datum.symbol==='GOOG'"
}
]
},
{
"name": "lookup_date",
"source": "source",
"transform": [
{
"type": "filter",
"expr": "abs(datum.date - timestamp) < 4.32e+8"
}
]
},
{
"name": "source_value",
"source": "source",
"transform": [
{
"type": "filter",
"expr": "timeFormat(datum.date, '%b %Y') == timeFormat(indexDate, '%b %Y')"
}
]
}
],
"marks": [
{
"type": "line",
"from": {
"data": "source"
},
"encode": {
"update": {
"x": {
"scale": "xscale",
"field": "date"
},
"y": {
"scale": "yscale",
"field": "price"
}
}
}
},
{
"type": "rule",
"encode": {
"update": {
"x": {
"scale": "xscale",
"signal": "indexDate"
},
"y": {
"value": 0
},
"y2": {
"field": {
"group": "height"
}
}
}
}
},
{
"type": "text",
"from": {
"data": "source"
},
"encode": {
"update": {
"x": {
"scale": "xscale",
"signal": "indexDate"
},
"y": {
"field": {
"group": "height"
},
"offset": 11
},
"align": {
"value": "center"
},
"text": {
"signal": "timeFormat(indexDate, '%b %Y')"
}
}
}
},
{
"type": "text",
"from": {
"data": "source_value"
},
"encode": {
"update": {
"x": {
"scale": "xscale",
"signal": "indexDate"
},
"y": {
"value": -2
},
"align": {
"value": "center"
},
"text": {
"signal": "format(datum.price, '.2f')"
}
}
}
},
{
"type": "text",
"from": {
"data": "lookup_date"
},
"encode": {
"update": {
"x": {
"field": {
"group": "width"
},
"offset":-130
},
"y": {
"field": {
"group": "height"
},
"offset":-185
},
"fill": {
"value": "#000"
},
"text": {
"signal": "'actual: '+ timeFormat(timestamp, '%b %d %Y')"
},
"fontSize": {
"value": 14
}
}
}
},
{
"type": "text",
"from": {
"data": "lookup_date"
},
"encode": {
"update": {
"x": {
"field": {
"group": "width"
},
"offset":-120
},
"y": {
"field": {
"group": "height"
},
"offset":-160
},
"fill": {
"value": "#000"
},
"text": {
"signal": "'nearest: '+ timeFormat(datum.date, '%b %Y')"
},
"fontSize": {
"value": 14
}
}
}
}
],
"scales": [
{
"name": "xscale",
"type": "time",
"domain": {
"data": "source",
"field": "date",
"sort": {
"field": "date",
"op": "min"
}
},
"range": "width"
},
{
"name": "yscale",
"type": "linear",
"domain": {
"data": "source",
"field": "price"
},
"range": "height",
"round": true,
"nice": true
}
],
"axes": [
{
"scale": "xscale",
"orient": "bottom",
"offset": 15,
"tickCount": 5,
"title": "date",
"encode": {
"labels": {
"update": {
"text": {
"signal": "timeFormat(datum.value, '%b %d, %Y')"
},
"angle": {
"value": 270
},
"align": {
"value": "right"
},
"baseline": {
"value": "middle"
}
}
}
},
"grid": true,
"ticks": false,
"gridScale": "yscale"
},
{
"scale": "yscale",
"format": "f",
"orient": "left",
"title": "price",
"grid": true,
"offset": 10
}
]
}