Last active
May 17, 2018 01:58
-
-
Save SaleRise/64e88bf2ffacce779f154f739c08b6cb to your computer and use it in GitHub Desktop.
This file contains hidden or 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