Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SaleRise/64e88bf2ffacce779f154f739c08b6cb to your computer and use it in GitHub Desktop.
Save SaleRise/64e88bf2ffacce779f154f739c08b6cb to your computer and use it in GitHub Desktop.
{
"$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