generated from simonw/shot-scraper-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
83 lines (72 loc) · 2.71 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datavis screenshots</title>
<!-- Include D3.js from CDN -->
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Datavis Screenshots</h1>
<!-- Visualization container -->
<div id="sections"></div>
<!-- Script to fetch JSON and create visualization -->
<script>
// Fetch JSON data
fetch('articles-and-dvcs.json')
.then(response => response.json())
.then(go)
function go(articlesAndDvcs) {
fetch('screenshot-filenames.json')
.then(response => response.json())
.then(screenshotFilenames => {
createPage(articlesAndDvcs, screenshotFilenames)
});
}
function extractDvcNumbers(vis_urls) {
dvc_numbers = new Set();
for (const vis_url of vis_urls) {
const tokens = vis_url.split('/');
for (const token of tokens) {
if (token.startsWith('dvc')) {
dvc_numbers.add(token);
}
}
}
return [...dvc_numbers];
}
function createPage(articlesAndDvcs, screenshotFilenames) {
articlesAndDvcs = articlesAndDvcs.filter(d => d.vis_urls.length > 0);
console.log({articlesAndDvcs, screenshotFilenames});
articlesAndDvcs = [...articlesAndDvcs].sort((a, b) => b.release_date.localeCompare(a.release_date));
const sections = d3.select('#sections')
.selectAll('section')
.data(articlesAndDvcs)
.join('section');
sections.append('h2')
.append('a')
.attr('href', d => d.doc_uri.replace('ons.gov.uk//', 'ons.gov.uk/'))
.text(d => d.title);
sections.append('p')
.text(d => d.release_date.slice(0, 10));
sections
.append('div')
.selectAll('p')
.data(d => extractDvcNumbers(d.vis_urls))
.join('p')
.text(d => d);
sections
.append('div')
.selectAll('a')
.data(d => d.vis_urls.filter(d => d in screenshotFilenames))
.join('a')
.attr('href', d => `https://www.ons.gov.uk/${d}`)
.append('img')
.style('width', '100%')
.style('max-width', '500px')
.attr('src', d => `screenshots/${screenshotFilenames[d]}.png`);
}
</script>
</body>
</html>