-
Notifications
You must be signed in to change notification settings - Fork 21
/
wikipedia-pageviews.ojs
129 lines (106 loc) · 3 KB
/
wikipedia-pageviews.ojs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*
FileAttachments:
source_ojs: ./wikipedia-pageviews.ojs
*/
md`# Wikipedia Pageviews
Explore pageviews data for specific Wikipedia pages!`
start = new Date("2020-10-01");
end = new Date("2021-01-01");
//viewof start = html`<input type=date value="2020-10-01">`;
//viewof end = html`<input type=date value="2021-01-01">`;
viewof pagesSource = Inputs.textarea({
rows: 6,
width: 220,
label: md`<b>Pages"`,
value: `Donald_Trump
Mike_Pence
Joe_Biden
Kamala_Harris`,
});
viewof labelsSource = Inputs.textarea({value:`2020-10-02,⬅ Trump tests positive for COVID19,115,20
2020-11-03,Election Day ➡,-50,120
2020-11-07,⬅AP Reports Biden wins,80,10`, label: md`<b>Labels`});
legend = html`<div>
${Object.keys(colors).map(k=>html`<b>
<div style="width: 1rem; height: 1rem; background-color: ${colors[k]}; display: inline-block; border-radius: 50%;"></div>
${k}</b>`)}`
Plot.plot({
grid: true,
width,
marginLeft: 60,
color: {
domain: Object.keys(colors),
range: Object.values(colors),
},
y: {
tickFormat: d3.format(".2s"),
domain: yDomain,
label: " ⬆ pageviews",
nice: true,
},
marks: [
Plot.line(data, { x: "date", y: "value", stroke: (d) => d.page, strokeWidth: 3 }),
...labels.map(d=>Plot.line([
[d.date, yDomain[0]],
[d.date, yDomain[1]]
], {stroke: "#999"})),
...labels.map(label=>Plot.text([label], {
x: label.date,
y: yDomain[1],
text: d => d.label,
dx: label.dx,
dy: label.dy,
fontSize: 14
}))
],
});
md`## Source Code
This is the original source code for this notebook, the \`wikipedia-pageviews.ojs\` file.`
md`~~~javascript
${(await FileAttachment("source_ojs").text()).replace(/~~~/g, "```")}
~~~`
md`## Appendix`
yDomain = d3.scaleLinear()
.domain(d3.extent(data, d=>d.value))
.nice()
.domain();
labels = d3.csvParseRows(labelsSource, d=> ({
date: new Date(d[0]),
label: d[1],
dx: d[2],
dy: d[3]
})).filter(d=>d.date >= start && d.date <= end)
pages = pagesSource.split("\n");
data = d3.merge(
await Promise.all(
pages.map(async (page) =>
Object.assign(await pageviews(page, start, end), { page })
)
)
);
colors = ({
Joe_Biden: "steelblue",
Kamala_Harris: "lightsteelblue",
Donald_Trump: "red",
Mike_Pence: "pink",
});
pageviews = (page, start, end) => {
const site = "en.wikipedia";
if (typeof start === "string")
start = d3.utcFormat("%Y%m%d00")(new Date(start));
if (start instanceof Date) start = d3.utcFormat("%Y%m%d00")(start);
if (typeof end === "string") end = d3.utcFormat("%Y%m%d")(new Date(end));
if (end instanceof Date) end = d3.utcFormat("%Y%m%d")(end);
return fetch(
`https://wikimedia.org/api/rest_v1/metrics/pageviews/per-article/${site}/all-access/user/${page}/daily/${start}/${end}`
)
.then((r) => r.json())
.then((d) =>
d.items.map((item) => ({
date: d3.utcParse("%Y%m%d00")(item.timestamp),
value: item.views,
page,
}))
);
};
document.title = "Wikipedia Pageviews API Example / Dataflow";