-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstockassist.html
99 lines (80 loc) · 2.28 KB
/
stockassist.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
99
<!DOCTYPE html>
<html>
<head>
<title>Madhav is bae</title>
<script>
var jsonCircles = [
{ "x_axis": 800, "y_axis": 300, "radius": 10, "color" : "red" },
{ "x_axis": 800, "y_axis": 340, "radius": 10, "color" : "orange"},
{ "x_axis": 800, "y_axis": 380, "radius": 10, "color" : "yellow"},
{ "x_axis": 800, "y_axis": 420, "radius": 10, "color" : "green"},
{ "x_axis": 800, "y_axis": 460, "radius": 10, "color" : "blue"},
{ "x_axis": 800, "y_axis": 500, "radius": 10, "color" : "purple"}];
var svgContainer = d3.select("body").append("svg")
.attr("width", 2000)
.attr("height", 1000);
var circles = svgContainer.selectAll("circle")
.data(jsonCircles)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx", function (d) { return d.x_axis; })
.attr("cy", function (d) { return d.y_axis; })
.attr("r", function (d) { return d.radius; })
.attr("fill-opacity", .7)
.style("fill", function(d) { return d.color; });
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x != "Apple") {
alert("Name must be a stock");
return false;
}
}
d3.select("#input").on("input", function() {
update(+this.value);
});
function update(input){
d3.selectAll("circle").transition()
.delay(function(d, i) { return i * 300 })
.duration(600)
.attr("transform","translate(-500)")
.ease("elastic");
}
</script>
<style>
div{
width: 100%;
height: 100vh;
}
form{
position: relative;
margin: 0 auto;
width: 20%;
top: 40%;
padding: 0px;
}
img{
width: 50px;
height: 50px;
float: left;
}
input{
height: 100%;
width: 70%;
top: 10%;
position: relative;
float: left;
margin-top: 15px;
margin-left: 10px;
}
</style>
</head>
<body>
<div>
<form autocomplete = "on" name="myForm" onsubmit="return validateForm()">
<img src = "stockAssist.png">
<input type="text" name="fname" id = "input">
</form>
</div>
</body>
</html>