Skip to content

Instantly share code, notes, and snippets.

@SaleRise

SaleRise/Vega points ticker

Last active May 17, 2018 04:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SaleRise/5ad9468482658bf95deaa236bbce040a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SaleRise/5ad9468482658bf95deaa236bbce040a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Vega points ticker
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "pad",
"padding": 5,
"width": 800,
"height": 400,
"style": "cell",
"data": [
{"name": "tooltip_store"},
{
"name": "m_source",
"values": [
{"TimeStamp": 1525350059674, "PointId": "187", "Value": "65.5099"},
{"TimeStamp": 1525350059173, "PointId": "187", "Value": "72.6219"},
{"TimeStamp": 1525350058674, "PointId": "187", "Value": "50.653"},
{"TimeStamp": 1525350058173, "PointId": "187", "Value": "18.4858"},
{"TimeStamp": 1525350057673, "PointId": "187", "Value": "35.0005"},
{"TimeStamp": 1525350057174, "PointId": "187", "Value": "74.0529"},
{"TimeStamp": 1525350056674, "PointId": "187", "Value": "79.7536"},
{"TimeStamp": 1525350056173, "PointId": "187", "Value": "46.485"},
{"TimeStamp": 1525350055673, "PointId": "187", "Value": "0.177496"},
{"TimeStamp": 1525350055173, "PointId": "187", "Value": "67.9977"},
{"TimeStamp": 1525350054673, "PointId": "187", "Value": "63.584"},
{"TimeStamp": 1525350054173, "PointId": "187", "Value": "13.2991"},
{"TimeStamp": 1525350053673, "PointId": "187", "Value": "71.0821"},
{"TimeStamp": 1525350053173, "PointId": "187", "Value": "96.5668"},
{"TimeStamp": 1525350052673, "PointId": "187", "Value": "29.8471"},
{"TimeStamp": 1525350052173, "PointId": "187", "Value": "12.8793"},
{"TimeStamp": 1525350051673, "PointId": "187", "Value": "53.7392"},
{"TimeStamp": 1525350051173, "PointId": "187", "Value": "22.1347"},
{"TimeStamp": 1525350050673, "PointId": "187", "Value": "6.34502"},
{"TimeStamp": 1525350050173, "PointId": "187", "Value": "41.1775"},
{"TimeStamp": 1525350059677, "PointId": "87", "Value": "66.689"},
{"TimeStamp": 1525350059177, "PointId": "87", "Value": "92.4644"},
{"TimeStamp": 1525350058677, "PointId": "87", "Value": "73.8361"},
{"TimeStamp": 1525350058177, "PointId": "87", "Value": "80.6828"},
{"TimeStamp": 1525350057677, "PointId": "87", "Value": "14.0933"},
{"TimeStamp": 1525350057178, "PointId": "87", "Value": "25.0842"},
{"TimeStamp": 1525350056678, "PointId": "87", "Value": "10.648"},
{"TimeStamp": 1525350056177, "PointId": "87", "Value": "66.164"},
{"TimeStamp": 1525350055678, "PointId": "87", "Value": "46.4497"},
{"TimeStamp": 1525350055177, "PointId": "87", "Value": "68.2603"},
{"TimeStamp": 1525350054677, "PointId": "87", "Value": "19.0317"},
{"TimeStamp": 1525350054177, "PointId": "87", "Value": "81.2203"},
{"TimeStamp": 1525350053677, "PointId": "87", "Value": "19.4777"},
{"TimeStamp": 1525350053177, "PointId": "87", "Value": "61.1415"},
{"TimeStamp": 1525350052677, "PointId": "87", "Value": "23.7337"},
{"TimeStamp": 1525350052176, "PointId": "87", "Value": "19.9393"},
{"TimeStamp": 1525350051676, "PointId": "87", "Value": "14.439"},
{"TimeStamp": 1525350051176, "PointId": "87", "Value": "88.501"},
{"TimeStamp": 1525350050677, "PointId": "87", "Value": "63.6938"},
{"TimeStamp": 1525350050176, "PointId": "87", "Value": "2.22177"},
{"TimeStamp": 1525350059678, "PointId": "29", "Value": "67.7867"},
{"TimeStamp": 1525350059178, "PointId": "29", "Value": "11.0163"},
{"TimeStamp": 1525350058678, "PointId": "29", "Value": "75.7189"},
{"TimeStamp": 1525350058178, "PointId": "29", "Value": "90.2735"},
{"TimeStamp": 1525350057678, "PointId": "29", "Value": "9.20743"},
{"TimeStamp": 1525350057178, "PointId": "29", "Value": "20.3957"},
{"TimeStamp": 1525350056678, "PointId": "29", "Value": "32.7729"},
{"TimeStamp": 1525350056178, "PointId": "29", "Value": "52.6906"},
{"TimeStamp": 1525350055678, "PointId": "29", "Value": "46.0773"},
{"TimeStamp": 1525350055178, "PointId": "29", "Value": "12.7546"},
{"TimeStamp": 1525350054678, "PointId": "29", "Value": "22.4394"},
{"TimeStamp": 1525350054177, "PointId": "29", "Value": "1.70836"},
{"TimeStamp": 1525350053678, "PointId": "29", "Value": "3.74304"},
{"TimeStamp": 1525350053177, "PointId": "29", "Value": "31.984"},
{"TimeStamp": 1525350052677, "PointId": "29", "Value": "6.34245"},
{"TimeStamp": 1525350052177, "PointId": "29", "Value": "72.1718"},
{"TimeStamp": 1525350051677, "PointId": "29", "Value": "25.016"},
{"TimeStamp": 1525350051177, "PointId": "29", "Value": "70.1378"},
{"TimeStamp": 1525350050677, "PointId": "29", "Value": "33.2085"},
{"TimeStamp": 1525350050177, "PointId": "29", "Value": "64.6859"}
]
},
{
"name": "filtered_data",
"source": "m_source",
"transform": [
{"type": "filter", "expr": "(vlSingle('tooltip_store', datum))"}
]
},
{
"name": "format_and_clean_date",
"source": "filtered_data",
"transform": [
{
"type": "formula",
"expr": "toDate(datum['TimeStamp'])",
"as": "TimeStamp"
}
]
}
],
"signals": [
{
"name": "tooltip",
"update": "data('tooltip_store').length && {date: data('tooltip_store')[0].values[0]}"
},
{
"name": "tooltip_tuple",
"value": {},
"on": [
{
"events": [{"source": "scope", "type": "mouseover"}],
"update": "datum && item().mark.marktype !== 'group' ? {unit: 'layer_0_layer_1', encodings: ['x'], fields: ['TimeStamp'], values: [(item().isVoronoi ? datum.datum : datum)['TimeStamp']]} : null",
"force": true
}
]
},
{
"name": "tooltip_modify",
"on": [
{
"events": {"signal": "tooltip_tuple"},
"update": "modify('tooltip_store', tooltip_tuple, true)"
}
]
}
],
"marks": [
{
"name": "layer_0_layer_0_pathgroup",
"type": "group",
"from": {
"facet": {
"name": "series_m",
"data": "m_source",
"groupby": ["PointId"]
}
},
"marks": [
{
"name": "line_draw",
"type": "line",
"style": ["line"],
"sort": {"field": "datum['TimeStamp']", "order": "descending"},
"from": {"data": "series_m"},
"encode": {
"update": {
"stroke": {"scale": "color", "field": "PointId"},
"x": {"scale": "x", "field": "TimeStamp"},
"y": {"scale": "y", "field": "Value"}
}
}
}
]
},
{
"name": "layer_0_layer_1_marks",
"type": "symbol",
"style": ["point"],
"from": {"data": "m_source"},
"encode": {
"update": {
"opacity": [
{"test": "(vlSingle('tooltip_store', datum))", "value": 1},
{"value": 0}
],
"fill": {"value": "transparent"},
"stroke": {"scale": "color", "field": "PointId"},
"x": {"scale": "x", "field": "TimeStamp"},
"y": {"scale": "y", "field": "Value"}
}
}
},
{
"name": "marks_position",
"type": "path",
"from": {"data": "layer_0_layer_1_marks"},
"encode": {
"enter": {
"fill": {"value": "transparent"},
"strokeWidth": {"value": 0.35},
"stroke": {"value": "transparent"},
"isVoronoi": {"value": true}
}
},
"transform": [
{
"type": "voronoi",
"x": {"expr": "datum.datum.x || 0"},
"y": {"expr": "0"},
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
},
{
"name": "ruler",
"type": "rule",
"style": ["rule"],
"from": {"data": "format_and_clean_date"},
"encode": {
"update": {
"stroke": {"value": "gray"},
"x": {"scale": "x", "field": "TimeStamp"},
"y": {"field": {"group": "height"}},
"y2": {"value": 0}
}
}
},
{
"name": "tooltip_values",
"type": "text",
"style": ["text"],
"from": {"data": "format_and_clean_date"},
"encode": {
"update": {
"align": {"value": "left"},
"dx": {"value": 5},
"dy": {"value": -5},
"fill": {"scale": "color", "field": "PointId"},
"x": {"scale": "x", "field": "TimeStamp"},
"y": {"scale": "y", "field": "Value"},
"text": {"signal": "format(datum['Value'], '')"}
}
}
},
{
"name": "day_mth_ruler",
"type": "text",
"style": ["text"],
"from": {"data": "format_and_clean_date"},
"encode": {
"update": {
"align": {"value": "left"},
"dx": {"value": 5},
"dy": {"value": 232},
"fill": {"value": "black"},
"x": {"scale": "x", "field": "TimeStamp"},
"y": {"signal": "height", "mult": 0.5},
"text": {
"signal": "timeFormat(datum['TimeStamp'], '%d/%m/%y %H:%M:%S')"
}
}
}
}
],
"scales": [
{
"name": "x",
"type": "utc",
"domain": {"fields": [{"data": "m_source", "field": "TimeStamp"}]},
"range": [0, {"signal": "width"}]
},
{
"name": "y",
"type": "linear",
"domain": {"fields": [{"data": "m_source", "field": "Value"}]},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
},
{
"name": "color",
"type": "ordinal",
"domain": {
"fields": [{"data": "m_source", "field": "PointId"}],
"sort": true
},
"range": "category"
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"title": " ",
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"encode": {
"labels": {
"update": {"text": {"signal": "timeFormat(datum.TimeStamp, '%B')"}}
}
},
"zindex": 1
},
{
"scale": "x",
"orient": "bottom",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"gridScale": "y",
"domain": false,
"maxExtent": 0,
"minExtent": 0,
"zindex": 0,
"tickSize": 3,
"format": "%d/%m/%y %H:%M:%S"
},
{
"scale": "y",
"orient": "left",
"grid": true,
"title": "value",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 1,
"format": ".003s"
}
],
"legends": [
{
"stroke": "color",
"title": "symbol",
"encode": {
"symbols": {
"update": {"fill": {"value": "transparent"}, "opacity": {"value": 1}}
}
},
"fill": "color"
}
],
"config": {"axisY": {"minExtent": 30}}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment