-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
49 lines (36 loc) · 2.34 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
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="css/pure-min.css" />
<link rel="stylesheet" href="css/style.css" />
<body>
<h1>Testing Visualizations of Uncertainty</h1>
<p>In the next minutes, you will be shown different visualizations of uncertainty. That data you will see is a series of points that could be generated from a GPS, for example, overlaid on top of a simple street map. You will be asked to identify the most or least uncertain of those points based on their visualization, which will indicate uncertainty in different ways.</p>
<p>Please not that this test <strong>does not work on touchscreen devices</strong> such as smart phones or tablets. Please make sure that you are using a laptop or desktop computer if you would like to participate.</p>
<p>Try moving your mouse pointer on the map. It will turn into a circle. You will be asked to place this circle on the point that you believe is the most or least uncertain on the map, and then click.
</p>
<div id="js-geojson-example"></div>
<p>Try to solve this task quickly, but do not rush it – we want you to consider the different points shown and then make a decision. There are no right or wrong answers – please select the point that you believe is most or least uncertain, based on the respective visualization. Participation should not take more than 10 minutes.</p>
<p><strong>Contact</strong>: If you have any questions about this experiment, please contact <a href="http://carsten.io/contact">Carsten Kessler</a>.</p>
<h1><a href="index1.html">START</a></h1>
<script src="js/jquery.js"></script>
<script src="js/d3.js"></script>
<script src="js/common.js"></script>
<script src="js/js.cookie.js"></script>
<script>
Cookies.set('session', Date.now(), { expires: 7, path: '' });
console.log(Cookies.get('session'));
// load the car data
d3.json("Data/car.json", function(carjson) {
car.selectAll('path')
.data(carjson.features)
.enter()
.append('svg:circle')
.attr("transform", function(d) {
return "translate(" + projection(d.geometry.coordinates) + ")";
})
.attr('r', function(d) {
return 3;
});
});
</script>
</body>