Created
October 10, 2018 19:46
-
-
Save ericsoco/657bf99ffb5088a0a1effebfdc1a193d to your computer and use it in GitHub Desktop.
Vega: Multi-series line chart w/ tooltips
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
// The spec below creates a dataset, `tooltip_0_0`, | |
// that contains pivoted values for each groupby. | |
// These key:value pairs can be fed into a tooltip implementation | |
// to display the value of each line at each timestep. | |
{ | |
"$schema": "https://vega.github.io/schema/vega/v4.0.json", | |
"description": "", | |
"width": 800, | |
"height": 600, | |
"padding": { | |
"top": 0, | |
"right": 0, | |
"bottom": 25, | |
"left": 25 | |
}, | |
"autosize": { | |
"type": "fit", | |
"contains": "padding" | |
}, | |
"signals": [ | |
{ | |
"name": "tooltip", | |
"value": {}, | |
"on": [ | |
{ | |
"events": "@tooltip-hitarea:mouseover", | |
"update": "datum" | |
}, | |
{ | |
"events": "@tooltip-hitarea:mouseout", | |
"update": "{}" | |
} | |
] | |
} | |
], | |
"data": [ | |
{ | |
"name": "input_0", | |
"values": [ | |
{"ts": "2015-07-13 00:00:00", "city": "SF", "country": "US", "metrics1": 131}, | |
{"ts": "2015-07-13 01:00:00", "city": "SF", "country": "US", "metrics1": 115}, | |
{"ts": "2015-07-13 02:00:00", "city": "SF", "country": "US", "metrics1": 115}, | |
{"ts": "2015-07-13 03:00:00", "city": "SF", "country": "US", "metrics1": 116}, | |
{"ts": "2015-07-13 04:00:00", "city": "SF", "country": "US", "metrics1": 112}, | |
{"ts": "2015-07-13 05:00:00", "city": "SF", "country": "US", "metrics1": 130}, | |
{"ts": "2015-07-13 06:00:00", "city": "SF", "country": "US", "metrics1": 193}, | |
{"ts": "2015-07-13 07:00:00", "city": "SF", "country": "US", "metrics1": 128}, | |
{"ts": "2015-07-13 08:00:00", "city": "SF", "country": "US", "metrics1": 112}, | |
{"ts": "2015-07-13 09:00:00", "city": "SF", "country": "US", "metrics1": 102}, | |
{"ts": "2015-07-13 10:00:00", "city": "SF", "country": "US", "metrics1": 106}, | |
{"ts": "2015-07-13 11:00:00", "city": "SF", "country": "US", "metrics1": 124}, | |
{"ts": "2015-07-13 00:00:00", "city": "LA", "country": "US", "metrics1": 58}, | |
{"ts": "2015-07-13 01:00:00", "city": "LA", "country": "US", "metrics1": 36}, | |
{"ts": "2015-07-13 02:00:00", "city": "LA", "country": "US", "metrics1": 22}, | |
{"ts": "2015-07-13 03:00:00", "city": "LA", "country": "US", "metrics1": 39}, | |
{"ts": "2015-07-13 04:00:00", "city": "LA", "country": "US", "metrics1": 16}, | |
{"ts": "2015-07-13 05:00:00", "city": "LA", "country": "US", "metrics1": 42}, | |
{"ts": "2015-07-13 06:00:00", "city": "LA", "country": "US", "metrics1": 63}, | |
{"ts": "2015-07-13 07:00:00", "city": "LA", "country": "US", "metrics1": 42}, | |
{"ts": "2015-07-13 08:00:00", "city": "LA", "country": "US", "metrics1": 15}, | |
{"ts": "2015-07-13 09:00:00", "city": "LA", "country": "US", "metrics1": 39}, | |
{"ts": "2015-07-13 10:00:00", "city": "LA", "country": "US", "metrics1": 19}, | |
{"ts": "2015-07-13 11:00:00", "city": "LA", "country": "US", "metrics1": 29}, | |
{"ts": "2015-07-13 00:00:00", "city": "Beijing", "country": "China", "metrics1": 21}, | |
{"ts": "2015-07-13 01:00:00", "city": "Beijing", "country": "China", "metrics1": 16}, | |
{"ts": "2015-07-13 02:00:00", "city": "Beijing", "country": "China", "metrics1": 5}, | |
{"ts": "2015-07-13 03:00:00", "city": "Beijing", "country": "China", "metrics1": 5}, | |
{"ts": "2015-07-13 04:00:00", "city": "Beijing", "country": "China", "metrics1": 12}, | |
{"ts": "2015-07-13 05:00:00", "city": "Beijing", "country": "China", "metrics1": 44}, | |
{"ts": "2015-07-13 06:00:00", "city": "Beijing", "country": "China", "metrics1": 86}, | |
{"ts": "2015-07-13 07:00:00", "city": "Beijing", "country": "China", "metrics1": 97}, | |
{"ts": "2015-07-13 08:00:00", "city": "Beijing", "country": "China", "metrics1": 128}, | |
{"ts": "2015-07-13 09:00:00", "city": "Beijing", "country": "China", "metrics1": 113}, | |
{"ts": "2015-07-13 10:00:00", "city": "Beijing", "country": "China", "metrics1": 131}, | |
{"ts": "2015-07-13 11:00:00", "city": "Beijing", "country": "China", "metrics1": 179}, | |
{"ts": "2015-07-13 00:00:00", "city": "Hong Kong", "country": "China", "metrics1": 31}, | |
{"ts": "2015-07-13 01:00:00", "city": "Hong Kong", "country": "China", "metrics1": 15}, | |
{"ts": "2015-07-13 02:00:00", "city": "Hong Kong", "country": "China", "metrics1": 55}, | |
{"ts": "2015-07-13 03:00:00", "city": "Hong Kong", "country": "China", "metrics1": 16}, | |
{"ts": "2015-07-13 04:00:00", "city": "Hong Kong", "country": "China", "metrics1": 82}, | |
{"ts": "2015-07-13 05:00:00", "city": "Hong Kong", "country": "China", "metrics1": 30}, | |
{"ts": "2015-07-13 06:00:00", "city": "Hong Kong", "country": "China", "metrics1": 93}, | |
{"ts": "2015-07-13 07:00:00", "city": "Hong Kong", "country": "China", "metrics1": 28}, | |
{"ts": "2015-07-13 08:00:00", "city": "Hong Kong", "country": "China", "metrics1": 12}, | |
{"ts": "2015-07-13 09:00:00", "city": "Hong Kong", "country": "China", "metrics1": 42}, | |
{"ts": "2015-07-13 10:00:00", "city": "Hong Kong", "country": "China", "metrics1": 76}, | |
{"ts": "2015-07-13 11:00:00", "city": "Hong Kong", "country": "China", "metrics1": 14} | |
] | |
}, | |
{ | |
"name": "output_0_0", | |
"source": "input_0", | |
"transform": [ | |
{ | |
"type": "formula", | |
"as": "ts_time", | |
"expr": "datetime(time(datum[\"ts\"]) + timezoneoffset(datum[\"ts\"]) * 60000)" | |
}, | |
{ | |
"type": "formula", | |
"as": "metrics1_number", | |
"expr": "toNumber(datum[\"metrics1\"])" | |
}, | |
{ | |
"type": "aggregate", | |
"groupby": [ | |
"ts_time", | |
"city" | |
], | |
"fields": [ | |
"metrics1_number", | |
"metrics1_number", | |
"metrics1_number" | |
], | |
"ops": [ | |
"count", | |
"valid", | |
"sum" | |
], | |
"as": [ | |
"metrics1_count", | |
"metrics1_valid", | |
"metrics1_aggregate" | |
] | |
}, | |
{ | |
"type": "collect", | |
"sort": { | |
"field": [ | |
"ts_time", | |
"city" | |
], | |
"order": [ | |
"ascending", | |
"ascending" | |
] | |
} | |
}, | |
{ | |
"type": "project", | |
"fields": [ | |
"ts_time", | |
"metrics1_aggregate", | |
"city" | |
], | |
"as": [ | |
"x_out_0", | |
"y_out_0" | |
] | |
} | |
] | |
}, | |
{ | |
"name": "tooltip_0_0", | |
"source": "output_0_0", | |
"transform": [ | |
{ | |
"type": "pivot", | |
"field": "city", | |
"value": "y_out_0", | |
"groupby": [ | |
"x_out_0" | |
] | |
} | |
] | |
} | |
], | |
"scales": [ | |
{ | |
"name": "x_0_0", | |
"type": "time", | |
"domain": { | |
"data": "output_0_0", | |
"field": "x_out_0" | |
}, | |
"nice": false, | |
"zero": false, | |
"range": "width" | |
}, | |
{ | |
"name": "y_0_0", | |
"type": "linear", | |
"domain": { | |
"data": "output_0_0", | |
"fields": [ | |
"y_out_0" | |
] | |
}, | |
"nice": true, | |
"zero": true, | |
"range": "height" | |
}, | |
{ | |
"name": "x_0_tooltip", | |
"type": "band", | |
"domain": { | |
"data": "output_0_0", | |
"field": "x_out_0" | |
}, | |
"range": [ | |
0, | |
{ | |
"signal": "width * data(\"output_0_0\").length / (data(\"output_0_0\").length - 1)" | |
} | |
], | |
"zero": false, | |
"padding": 0, | |
"round": true | |
}, | |
{ | |
"name": "y_0_tooltip", | |
"type": "linear", | |
"domain": [ | |
0, | |
1 | |
], | |
"range": "height", | |
"zero": true | |
}, | |
{ | |
"name": "color_0_0", | |
"type": "ordinal", | |
"domain": [ | |
"Beijing", | |
"Hong Kong", | |
"LA", | |
"SF" | |
], | |
"range": [ | |
"#88572C", | |
"#FF991F", | |
"#DDB27C", | |
"#11939a" | |
] | |
}, | |
{ | |
"name": "colorUnique_0_0", | |
"type": "ordinal", | |
"domain": [ | |
"Beijing", | |
"Hong Kong", | |
"LA", | |
"SF" | |
], | |
"range": [ | |
"#88572C", | |
"#FF991F", | |
"#DDB27C", | |
"#11939a" | |
] | |
} | |
], | |
"projections": [], | |
"axes": [ | |
{ | |
"orient": "left", | |
"scale": "y_0_0", | |
"title": "", | |
"grid": false, | |
"zindex": 10, | |
"labelOverlap": true, | |
"encode": { | |
"labels": { | |
"update": { | |
"text": { | |
"signal": "replace(replace(replace(format(datum.value, '.2s'), /.0*D$/, ''), /G$/, 'B'), /.*m$/, format(datum.value, '.2f'))" | |
} | |
} | |
} | |
} | |
}, | |
{ | |
"orient": "bottom", | |
"scale": "x_0_0", | |
"title": "", | |
"grid": false, | |
"zindex": 10, | |
"labelOverlap": true, | |
"encode": { | |
"labels": { | |
"update": { | |
"text": { | |
"signal": "timeFormat(datum.value, '%b %e')" | |
} | |
} | |
} | |
} | |
} | |
], | |
"legends": [ | |
{ | |
"stroke": "colorUnique_0_0", | |
"orient": "top", | |
"offset": 20, | |
"direction": "horizontal", | |
"encode": { | |
"symbols": { | |
"name": "legendSymbol", | |
"interactive": true, | |
"update": { | |
"size": { | |
"value": 150 | |
}, | |
"shape": { | |
"value": "M -1 0 H 1" | |
}, | |
"strokeWidth": { | |
"value": 2 | |
} | |
} | |
}, | |
"labels": { | |
"name": "legendLabel", | |
"interactive": true, | |
"update": { | |
"dx": { | |
"value": -20 | |
}, | |
"dy": { | |
"value": 10 | |
} | |
} | |
} | |
}, | |
"zindex": 2 | |
} | |
], | |
"marks": [ | |
{ | |
"type": "group", | |
"clip": true, | |
"from": { | |
"facet": { | |
"name": "faceted_0_0", | |
"data": "output_0_0", | |
"groupby": "city" | |
} | |
}, | |
"marks": [ | |
{ | |
"type": "line", | |
"interactive": false, | |
"clip": false, | |
"from": { | |
"data": "faceted_0_0" | |
}, | |
"style": "lineDefault", | |
"encode": { | |
"enter": { | |
"x": { | |
"scale": "x_0_0", | |
"field": "x_out_0" | |
}, | |
"y": { | |
"scale": "y_0_0", | |
"field": "y_out_0" | |
}, | |
"stroke": { | |
"scale": "color_0_0", | |
"field": "city" | |
} | |
}, | |
"update": { | |
"x": { | |
"scale": "x_0_0", | |
"field": "x_out_0" | |
}, | |
"y": { | |
"scale": "y_0_0", | |
"field": "y_out_0" | |
}, | |
"stroke": { | |
"scale": "color_0_0", | |
"field": "city" | |
} | |
} | |
} | |
} | |
] | |
}, | |
{ | |
"type": "rule", | |
"interactive": false, | |
"clip": true, | |
"zindex": 20, | |
"encode": { | |
"enter": {}, | |
"update": { | |
"x": { | |
"scale": "x_0_0", | |
"signal": "tooltip.x_out_0" | |
}, | |
"y": { | |
"scale": "y_0_tooltip", | |
"value": 1 | |
}, | |
"y2": { | |
"scale": "y_0_tooltip", | |
"value": 0 | |
} | |
} | |
} | |
}, | |
{ | |
"name": "tooltip-hitarea", | |
"type": "rect", | |
"interactive": true, | |
"clip": true, | |
"from": { | |
"data": "tooltip_0_0" | |
}, | |
"encode": { | |
"enter": { | |
"xc": { | |
"scale": "x_0_0", | |
"field": "x_out_0" | |
}, | |
"y": { | |
"scale": "y_0_tooltip", | |
"value": 1 | |
}, | |
"y2": { | |
"scale": "y_0_tooltip", | |
"value": 0 | |
}, | |
"width": { | |
"scale": "x_0_tooltip", | |
"band": 1 | |
}, | |
"fill": { | |
"value": "#00ff00" | |
}, | |
"fillOpacity": { | |
"value": 0 | |
} | |
}, | |
"update": { | |
"xc": { | |
"scale": "x_0_0", | |
"field": "x_out_0" | |
}, | |
"y": { | |
"scale": "y_0_tooltip", | |
"value": 1 | |
}, | |
"y2": { | |
"scale": "y_0_tooltip", | |
"value": 0 | |
}, | |
"width": { | |
"scale": "x_0_tooltip", | |
"band": 1 | |
}, | |
"fill": { | |
"value": "#00ff00" | |
}, | |
"fillOpacity": { | |
"value": 0 | |
} | |
} | |
} | |
} | |
], | |
"usermeta": { | |
"types": [ | |
"LineChart" | |
] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment