-
Notifications
You must be signed in to change notification settings - Fork 24
/
vrpatients.html
98 lines (90 loc) · 2.96 KB
/
vrpatients.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="apple-touch-icon" href="vrpatients.png"/>
<meta property="og:image" content="vrpatients.png"/>
<title>VR-Patients COVID-19 Tokyo</title>
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
<script>"use strict"
const addText = function(s) {
const scene = document.querySelector('a-scene')
const title = document.createElement('a-text')
title.setAttribute('position', { x: -1.5, y: 2.2, z: -2.5 })
title.setAttribute('value', s)
title.setAttribute('scale', "1.5 1.5 1.5")
title.setAttribute('rotation', "0 90 0")
title.setAttribute('align', 'left')
title.setAttribute('color', '#FFF')
scene.appendChild(title)
}
const addCaption = function(s, x, z) {
const scene = document.querySelector('a-scene')
const title = document.createElement('a-text')
title.setAttribute('position', { x: x, y: .01, z: z })
title.setAttribute('value', s)
title.setAttribute('scale', ".8 .8 .8")
title.setAttribute('rotation', "-90 90 0")
title.setAttribute('align', 'left')
title.setAttribute('color', '#FFF')
scene.appendChild(title)
}
const addPerson = function(x, z, height, color) {
const r = .3
const scene = document.querySelector('a-scene')
const box = document.createElement('a-cylinder')
box.setAttribute('position', { x: x, y: (height - r) / 2, z: z })
box.setAttribute('radius', .15)
box.setAttribute('height', height - r)
box.setAttribute('color', color)
scene.appendChild(box)
const sphere = document.createElement('a-sphere')
sphere.setAttribute('position', { x: x, y: height - r, z: z })
sphere.setAttribute('radius', r)
sphere.setAttribute('color', color)
scene.appendChild(sphere)
}
window.onload = async function() {
const url = "https://raw.githubusercontent.com/tokyo-metropolitan-gov/covid19/master/data/data.json"
const coviddata = await (await fetch(url)).json()
//console.log(coviddata)
addText("VR-Patients COVID-19 Tokyo")
const data = coviddata.patients.data
const days = []
let ps = []
let day = null
for (let i = 0; i < data.length; i++) {
if (data[i]['リリース日'] != day) {
day = data[i]['リリース日']
ps = [ data[i] ]
days.push(ps)
} else {
ps.push(data[i])
}
}
//console.log(days)
const pw = .8
const py = -3
const offx = -days.length * pw - 1
for (let i = 0; i < days.length; i++) {
const ps = days[i]
const x = offx + i * pw
for (let j = 0; j < ps.length; j++) {
const female = ps[j]['性別'] == '女性'
const hfix = female ? 1 : 1
addPerson(x, py - j * pw, ps[j]['年代'].indexOf('10') >= 0 ? 1.3 : 1.7 * hfix, female ? 'red' : 'blue')
}
const day = ps[0]['リリース日'].substring(0, 10)
addCaption(day, x, py + 1.5)
}
}
</script>
<a-scene id="scene">
<a-sky color="#000000"></a-sky>
<a-plane rotation="-90 0 0" width="50" height="50" color="#333333"></a-plane>
</a-scene>
</body>
</html>