Skip to content

Instantly share code, notes, and snippets.

@jakevdp

jakevdp/.block

Last active October 5, 2018 18:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jakevdp/a414950f61e4b224765f2439dd1f09b9 to your computer and use it in GitHub Desktop.
Save jakevdp/a414950f61e4b224765f2439dd1f09b9 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Value Tooltip in Vega-Lite
Raw
.block
license: MIT
Raw
README.md

Multi-Value Tooltip in Vega-Lite

This example shows a multi-value tooltip in Vega-Lite.

See it in action on http://bl.ocks.org

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<style>
body {
font-family: sans-serif;
}
.vega-actions a {
padding: 0.2em;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "spec.json";
vegaEmbed('#vis', spec).catch(console.warn);
</script>
</body>
Raw
spec.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"url": "traces.csv",
"format": {
"type": "csv"
}
},
"width": 800,
"height": 400,
"layer": [
{
"mark": "line",
"encoding": {
"color": {
"type": "nominal",
"field": "category"
},
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"type": "quantitative",
"field": "y"
}
}
},
{
"mark": "point",
"encoding": {
"opacity": {
"value": 0
},
"x": {
"type": "quantitative",
"field": "x"
}
},
"selection": {
"tooltip": {
"type": "single",
"nearest": true,
"on": "mouseover",
"fields": [
"x"
],
"empty": "none",
"resolve": "global"
}
}
},
{
"mark": "point",
"encoding": {
"color": {
"type": "nominal",
"field": "category"
},
"opacity": {
"condition": {
"selection": "tooltip",
"value": 1
},
"value": 0
},
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"type": "quantitative",
"field": "y"
}
}
},
{
"mark": {
"type": "rule",
"color": "gray"
},
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
}
},
"transform": [
{
"filter": {
"selection": "tooltip"
}
}
]
},
{
"mark": {
"type": "text",
"align": "left",
"dx": 5,
"dy": -5
},
"encoding": {
"color": {
"type": "nominal",
"field": "category"
},
"text": {
"condition": {
"type": "quantitative",
"field": "y",
"selection": "tooltip"
},
"value": " "
},
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"type": "quantitative",
"field": "y"
}
}
}
]
}
Raw
traces.csv
x category y
0 A -1.59
1 A -1.58
2 A -1.85
3 A -1.8
4 A -2.16
5 A -3.13
6 A -2.5
7 A -2.6
8 A -1.69
9 A -2.71
10 A -3.98
11 A -4.84
12 A -3.35
13 A -4.1
14 A -4.27
15 A -3.87
16 A -3.86
17 A -4.17
18 A -2.91
19 A -4.25
20 A -3.91
21 A -4.06
22 A -5.23
23 A -6.29
24 A -4.53
25 A -3.92
26 A -3.8
27 A -4.22
28 A -4.55
29 A -3.74
30 A -4.16
31 A -4.33
32 A -5.32
33 A -5.64
34 A -4.83
35 A -3.5
36 A -4.39
37 A -4.59
38 A -5.84
39 A -6.96
40 A -7.85
41 A -7.46
42 A -5.88
43 A -7.97
44 A -9.11
45 A -8.51
46 A -8.77
47 A -8.49
48 A -9.09
49 A -9.1
50 A -9.16
51 A -10.97
52 A -9.98
53 A -10.57
54 A -11.66
55 A -12.45
56 A -13.15
57 A -11.64
58 A -11.92
59 A -12.97
60 A -11.75
61 A -12.72
62 A -11.77
63 A -11.81
64 A -11.09
65 A -11.41
66 A -12.22
67 A -11.4
68 A -12.64
69 A -11.78
70 A -10.51
71 A -11.45
72 A -12.24
73 A -12.48
74 A -10.98
75 A -11.85
76 A -10.98
77 A -9.85
78 A -10.99
79 A -10.38
80 A -11.65
81 A -12.39
82 A -11.58
83 A -9.38
84 A -9.4
85 A -9.13
86 A -10.59
87 A -10.79
88 A -10.56
89 A -11.04
90 A -11.68
91 A -12.74
92 A -12.33
93 A -12.58
94 A -11.59
95 A -10.95
96 A -12.59
97 A -12.82
98 A -12.83
99 A -13.91
0 B 0.6
1 B 2.58
2 B 3.05
3 B 1.53
4 B 0.71
5 B -1.21
6 B -1.35
7 B -0.85
8 B 0.52
9 B -0.68
10 B -1.01
11 B -2.44
12 B -1.27
13 B -2.8
14 B -3.53
15 B -2.94
16 B -2.59
17 B -2.27
18 B -2.42
19 B -2.83
20 B -3.73
21 B -4.31
22 B -4.39
23 B -5.17
24 B -3.08
25 B -2.85
26 B -4.42
27 B -4.11
28 B -4.64
29 B -4.16
30 B -3.18
31 B -2.84
32 B -3.55
33 B -3.42
34 B -1.18
35 B 0.21
36 B 0.57
37 B 0.14
38 B -1.7
39 B -2.13
40 B -0.87
41 B -0.63
42 B -1.69
43 B -0.91
44 B -0.79
45 B -1.3
46 B -1.01
47 B 0.39
48 B -0.57
49 B -1.44
50 B -1.78
51 B -1.67
52 B -0.75
53 B -0.83
54 B -1.41
55 B -1.38
56 B -1.74
57 B -3.15
58 B -2.04
59 B -2.61
60 B -3.41
61 B -4.55
62 B -4.15
63 B -3.01
64 B -2.81
65 B -3.04
66 B -2.62
67 B -4.35
68 B -2.61
69 B -3.85
70 B -3.12
71 B -2.51
72 B -2.2
73 B -2.84
74 B -2.96
75 B -2.02
76 B -0.63
77 B -1.03
78 B -1.41
79 B 0.01
80 B 1.77
81 B 1.3
82 B 1.38
83 B 0.2
84 B 0.04
85 B 0.13
86 B 1.03
87 B 0.28
88 B 0.51
89 B -0.9
90 B 1.24
91 B 1.11
92 B 0.66
93 B 0.44
94 B 3.59
95 B 4.21
96 B 5.39
97 B 5.89
98 B 6.49
99 B 4.31
0 C 0.28
1 C 0.27
2 C 0.13
3 C 1.77
4 C 0.62
5 C 1.61
6 C 3.2
7 C 1.65
8 C 0.74
9 C 0.26
10 C -1.15
11 C -2.72
12 C -3.63
13 C -2.65
14 C -2.34
15 C -2.04
16 C -2.3
17 C -1.06
18 C -2.57
19 C -1.92
20 C -0.81
21 C -0.67
22 C 0.86
23 C -0.27
24 C -0.53
25 C -1.3
26 C -0.54
27 C 0.24
28 C -0.21
29 C 0.08
30 C -1.57
31 C -0.7
32 C -2.02
33 C -1.22
34 C -0.45
35 C 0.69
36 C 0.39
37 C 1.98
38 C 3.02
39 C 3.34
40 C 3.14
41 C 3.36
42 C 3.39
43 C 3.97
44 C 5.11
45 C 5.34
46 C 6.79
47 C 6.99
48 C 7.76
49 C 6.99
50 C 5.88
51 C 4.98
52 C 4.88
53 C 4.75
54 C 4.35
55 C 2.31
56 C 0.84
57 C 0.05
58 C 1.19
59 C 0.21
60 C -0.93
61 C 0.13
62 C 0.57
63 C 0.53
64 C 0.58
65 C 2.54
66 C 3.37
67 C 4.1
68 C 4.99
69 C 5.43
70 C 5.13
71 C 5.76
72 C 5.83
73 C 6.58
74 C 7.16
75 C 7.4
76 C 7.88
77 C 7.99
78 C 5.98
79 C 5.8
80 C 7.81
81 C 8.58
82 C 10.06
83 C 11.31
84 C 10.34
85 C 8.87
86 C 9.85
87 C 10.18
88 C 9.66
89 C 11.43
90 C 11.49
91 C 10.44
92 C 9.43
93 C 9.15
94 C 8.73
95 C 8.73
96 C 7.79
97 C 6.85
98 C 8.47
99 C 8.15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment