-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathinteractionExperiment.html
84 lines (80 loc) · 3.54 KB
/
interactionExperiment.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Page</title>
<link rel="stylesheet" href="vendor/tachyons/tachyons.min.css">
<script src="js/d3.v6.js"></script>
</head>
<body class="Roboto pa1">
<section class="cf w-100 pv3 ba flex flex-wrap">
<div class="fl w-100 f4">
<h1>Experimenting Interaction </h1>
</div>
<div class="pv3 ba w-50 w-100-m">
<svg width="500" height="300" id="circle"></svg>
<script>
const svg = d3.select("#circle")
svg.on('mouseover',dotted)
svg.append('circle')
.attr('r',75)
.attr('cx',250)
.attr('cy',150)
.attr('fill','green')
.on('click',interact)
function dotted(d){
console.log(d)
}
function interact(d,index){
localCircle = d3.select(this)
localCircle
.transition()
.duration(1000)
.attr('fill','yellow')
localData = d3.select('#data')
localData.append('p')
.attr('class','f6 b ttc red')
.append('text')
.text('This is displayed after clicking.The circle turns yellow. transition fades in, do you see?')
}
</script>
</div>
<div class="pv3 ba w-50 w-100-m" id="data">
<p class="f6 b ttc bg-green">This is always displayed</p>
</div>
</section>
<section class="cf w-100 pv1 ph3 ph4-ns ba">
<div class="flex">
<div class="fl w-third">
<p class="f6 b ttc pv0">Question 1</p>
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(https://picsum.photos/id/20/200/300);" class="cover bg-center aspect-ratio--object"></span>
</div>
<p class="lh-copy f7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis</p>
</div>
<div class="fl w-third">
<p class="f6 b ttc pv0">Question 2</p>
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(https://picsum.photos/id/80/200/300);" class="cover bg-center aspect-ratio--object"></span>
</div>
<p class="lh-copy f7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis</p>
</div>
<div class="fl w-third">
<p class="f6 b ttc pv0">Question 3</p>
<div class="aspect-ratio aspect-ratio--3x4">
<span style="background-image:url(https://picsum.photos/id/10/200/300);" class="cover bg-center aspect-ratio--object"></span>
</div>
<p class="lh-copy f7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis</p>
</div>
</div>
</section>
</body>
</html>