Last active
May 17, 2018 01:58
-
-
Save SaleRise/64e88bf2ffacce779f154f739c08b6cb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$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", | |
"url": "https://raw.githubusercontent.com/mattijn/datasets/master/stations_discharge_day_of_year_8_stations.csv", | |
"format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","} | |
}, | |
{ | |
"name": "filtered_data", | |
"source": "m_source", | |
"transform": [ | |
{"type": "filter", "expr": "(vlSingle('tooltip_store', datum))"} | |
] | |
}, | |
{ | |
"name": "formatted_data", | |
"source": "filtered_data", | |
"transform": [ | |
{"type": "formula", "expr": "toNumber(datum['value'])", "as": "value"}, | |
{"type": "formula", "expr": "toDate(datum['date'])", "as": "date"} | |
] | |
}, | |
{ | |
"name": "format_and_clean_date", | |
"source": "filtered_data", | |
"transform": [ | |
{"type": "formula", "expr": "toDate(datum['date'])", "as": "date"} | |
] | |
}, | |
{ | |
"name": "clean_data", | |
"source": "m_source", | |
"transform": [ | |
{"type": "formula", "expr": "toDate(datum['date'])", "as": "date"}, | |
{"type": "formula", "expr": "toNumber(datum['value'])", "as": "value"} | |
] | |
}, | |
{ | |
"name": "formatted_and_clean_data", | |
"source": "clean_data", | |
"transform": [ | |
{ | |
"type": "filter", | |
"expr": "datum['date'] !== null && !isNaN(datum['date']) && datum['value'] !== null && !isNaN(datum['value'])" | |
} | |
] | |
} | |
], | |
"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: ['date'], values: [(item().isVoronoi ? datum.datum : datum)['date']]} : 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": "clean_data", | |
"groupby": ["symbol"] | |
} | |
}, | |
"encode": { | |
"update": { | |
"width": {"field": {"group": "width"}}, | |
"height": {"field": {"group": "height"}} | |
} | |
}, | |
"marks": [ | |
{ | |
"name": "layer_0_layer_0_marks", | |
"type": "line", | |
"style": ["line"], | |
"sort": {"field": "datum['date']", "order": "descending"}, | |
"from": {"data": "series_m"}, | |
"encode": { | |
"update": { | |
"stroke": {"scale": "color", "field": "symbol"}, | |
"x": {"scale": "x", "field": "date"}, | |
"y": {"scale": "y", "field": "value"} | |
} | |
} | |
} | |
] | |
}, | |
{ | |
"name": "layer_0_layer_1_marks", | |
"type": "symbol", | |
"style": ["point"], | |
"from": {"data": "formatted_and_clean_data"}, | |
"encode": { | |
"update": { | |
"opacity": [ | |
{"test": "(vlSingle('tooltip_store', datum))", "value": 1}, | |
{"value": 0} | |
], | |
"fill": {"value": "transparent"}, | |
"stroke": {"scale": "color", "field": "symbol"}, | |
"x": {"scale": "x", "field": "date"}, | |
"y": {"scale": "y", "field": "value"} | |
} | |
} | |
}, | |
{ | |
"name": "layer_0_layer_1_voronoi", | |
"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": "date"}, | |
"y": {"field": {"group": "height"}}, | |
"y2": {"value": 0} | |
} | |
} | |
}, | |
{ | |
"name": "tooltip_values", | |
"type": "text", | |
"style": ["text"], | |
"from": {"data": "formatted_data"}, | |
"encode": { | |
"update": { | |
"align": {"value": "left"}, | |
"dx": {"value": 5}, | |
"dy": {"value": -5}, | |
"fill": {"scale": "color", "field": "symbol"}, | |
"x": {"scale": "x", "field": "date"}, | |
"y": {"scale": "y", "field": "value"}, | |
"text": {"signal": "format(datum['value'], '')"} | |
} | |
} | |
}, | |
{ | |
"name": "layer_1_layer_2_marks", | |
"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": "date"}, | |
"y": {"signal": "height", "mult": 0.5}, | |
"text": {"signal": "timeFormat(datum['date'], '%d %B')"} | |
} | |
} | |
} | |
], | |
"scales": [ | |
{ | |
"name": "x", | |
"type": "time", | |
"domain": { | |
"fields": [ | |
{"data": "clean_data", "field": "date"}, | |
{"data": "formatted_and_clean_data", "field": "date"} | |
] | |
}, | |
"range": [0, {"signal": "width"}] | |
}, | |
{ | |
"name": "y", | |
"type": "linear", | |
"domain": { | |
"fields": [ | |
{"data": "clean_data", "field": "value"}, | |
{"data": "formatted_and_clean_data", "field": "value"}, | |
{"data": "formatted_data", "field": "value"} | |
] | |
}, | |
"range": [{"signal": "height"}, 0], | |
"nice": true, | |
"zero": true | |
}, | |
{ | |
"name": "color", | |
"type": "ordinal", | |
"domain": { | |
"fields": [ | |
{"data": "clean_data", "field": "symbol"}, | |
{"data": "formatted_and_clean_data", "field": "symbol"}, | |
{"data": "formatted_data", "field": "symbol"} | |
], | |
"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.value, '%B')"}} | |
} | |
}, | |
"zindex": 1 | |
}, | |
{ | |
"scale": "x", | |
"orient": "bottom", | |
"grid": true, | |
"tickCount": {"signal": "ceil(width/40)"}, | |
"gridScale": "y", | |
"domain": false, | |
"labels": false, | |
"maxExtent": 0, | |
"minExtent": 0, | |
"ticks": false, | |
"zindex": 0 | |
}, | |
{ | |
"scale": "y", | |
"orient": "left", | |
"title": "value", | |
"labelOverlap": true, | |
"tickCount": {"signal": "ceil(height/40)"}, | |
"zindex": 1 | |
}, | |
{ | |
"scale": "y", | |
"orient": "left", | |
"grid": true, | |
"tickCount": {"signal": "ceil(height/40)"}, | |
"gridScale": "x", | |
"domain": false, | |
"labels": false, | |
"maxExtent": 0, | |
"minExtent": 0, | |
"ticks": false, | |
"zindex": 0 | |
} | |
], | |
"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