You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The **difference mark** compares a metric to another metric.
24
+
The **difference mark** compares a metric. Like the [area mark](./area.md), the region between two lines is filled; unlike the area mark, alternating color shows when the primary metric is above or below the secondary metric.
25
+
26
+
In the simplest case, the difference mark compares a metric to a constant, often zero. For example, the plot below shows the [global surface temperature anomaly](https://data.giss.nasa.gov/gistemp/) from 1880–2016; 0° represents the 1951–1980 average; above-average temperatures are in <spanstyle="border-bottom: solidvar(--vp-c-red) 3px;">red</span>, while below-average temperatures are in <spanstyle="border-bottom: solidvar(--vp-c-blue) 3px;">blue</span>.
27
+
28
+
:::plot
29
+
```js
30
+
Plot.differenceY(gistemp, {
31
+
x:"Date",
32
+
y:"Anomaly",
33
+
positiveFill:"red",
34
+
negativeFill:"blue",
35
+
tip:true
36
+
}).plot({y: {grid:true}})
37
+
```
38
+
:::
39
+
40
+
Applying a 24-month [moving average](../transforms/window.md) improves readability by smoothing the noise.
41
+
42
+
:::plot
43
+
```js
44
+
Plot.differenceY(
45
+
gistemp,
46
+
Plot.windowY(12*2, {
47
+
x:"Date",
48
+
y:"Anomaly",
49
+
positiveFill:"red",
50
+
negativeFill:"blue",
51
+
tip:true
52
+
})
53
+
).plot({y: {grid:true}})
54
+
```
55
+
:::
56
+
57
+
More powerfully, the difference mark compares two metrics.
58
+
59
+
Comparing metrics is most convenient when the data has a column for each. For example, the plot below shows the number of daily travelers through TSA checkpoints in 2020 compared to 2019. In the first two months of 2020, there were on average <spanstyle="border-bottom: solid#01ab633px;">more travelers</span> per day than 2019; yet when COVID-19 hit, there were many <spanstyle="border-bottom: solid#4269d03px;">fewer travelers</span> per day, dropping almost to zero.
25
60
26
61
:::plot
27
62
```js
28
63
Plot.plot({
29
64
x: {tickFormat:"%b"},
30
-
y: {grid:true},
65
+
y: {grid:true, label:"Travelers"},
31
66
marks: [
32
-
Plot.ruleY([32]),
33
-
Plot.differenceY(temperature, Plot.windowY(14, {
34
-
filter: (d) =>d.station==="SF",
35
-
x:"date",
36
-
y:"tmin",
37
-
y1: (d, i) => temperature[i +1]?.tmin,
38
-
tip:true
39
-
}))
67
+
Plot.axisY({label:"Daily travelers (thousands, 2020 vs. 2019)", tickFormat: (d) => d /1000}),
68
+
Plot.ruleY([0]),
69
+
Plot.differenceY(tsa, {
70
+
x:"Date",
71
+
y1:"2019",
72
+
y2:"2020",
73
+
tip:{format: {x:"%B %-d"}}
74
+
})
40
75
]
41
76
})
42
77
```
43
78
:::
44
79
80
+
If the data is “tall” rather than “wide” — TK explain what this means — you can use the [group transform](../transforms/group.md) with the [find reducer](../transforms/group.md#find): group the rows by date, and then for the two output columns **y1** and **y2**, find the desired corresponding row. The plot below shows daily minimum temperature for San Francisco compared to San Jose. The insulating effect of the fog keeps San Francisco warmer in winter and cooler in summer, reducing seasonal variation.
81
+
45
82
:::plot
46
83
```js
47
84
Plot.plot({
85
+
x: {tickFormat:"%b"},
48
86
y: {grid:true},
49
87
marks: [
50
-
Plot.ruleY([1]),
51
-
Plot.differenceY(aapl, Plot.normalizeY({
52
-
x:"Date",
53
-
y:"Close",
54
-
y1:Plot.valueof(goog, "Close"),
55
-
tip:true
56
-
}))
88
+
Plot.ruleY([32]),
89
+
Plot.differenceY(
90
+
temperature,
91
+
Plot.windowY(
92
+
14,
93
+
Plot.groupX(
94
+
{
95
+
y1:Plot.find((d) =>d.station==="SJ"),
96
+
y2:Plot.find((d) =>d.station==="SF")
97
+
},
98
+
{
99
+
x:"date",
100
+
y:"tmin",
101
+
tip:true
102
+
}
103
+
)
104
+
)
105
+
)
57
106
]
58
107
})
59
108
```
60
109
:::
61
110
111
+
The difference mark can also be used to compare a metric *to itself* using the [shift transform](../transforms/shift.md). This is especially useful for time series that exhibit [periodicity](https://en.wikipedia.org/wiki/Seasonality) — which is most of them, and certainly ones that involve human behavior. In this way a difference mark can show week-over-week or year-over-year growth.
TK Something about if you sold Apple stock after holding it for a year, you’d tend to do pretty well. But if you hold it for less time, you see more blue. And even if you held it for a year, you could have still lost money if you sold in most of 2016. Even the unluckiest person would have made money if they held Apple stock for 780+ days (in 2015–2018).
0 commit comments