This repository was archived by the owner on Jun 8, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
315 lines (302 loc) · 20 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Graph Interface </title>
<!-- favicon -->
<link rel="shortcut icon" type="image/jpg" href="https://jayedrafi.com/graph-interface/Website/resources/main/assets/logo.png">
<!-- Custom bootstrap css - CONTAINS ONLY MARGIN AND PADDING CLASSES -->
<link rel="stylesheet" href="https://jayedrafi.com/graph-interface/Website/resources/main/css/customBootstrap.css">
<!-- Main css -->
<link rel="stylesheet" href="https://jayedrafi.com/graph-interface/Website/resources/main/css/style.css">
<!-- Custom icons - Ionicons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>
<body>
<!-- Start of Header -->
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center flex-direction-column">
<!--<a id="logo" class="navbar-brand text-info ms-md-5" href="index.html">
<img alt="logo" src="./website/resources/main/assets/logo.png">
</a>-->
<div class="collapse navbar-collapse text-center mt-2 mt-md-0" id="navbarColor01">
<ul class="navbar-nav ms-auto d-flex flex-wrap">
<li class="nav-item d-block me-2">
<a href="#about" class="nav-link active d-flex align-items-center">
<ion-icon class="me-1" name="home-outline"></ion-icon> About
</a>
</li>
<li class="nav-item d-block me-2">
<a href="#instruction" class="nav-link d-flex align-items-center"> <ion-icon class="me-1" name="pencil-outline"></ion-icon> Instruction</a>
</li>
<li class="nav-item d-block me-2">
<a href="#download" class="nav-link d-flex align-items-center"> <ion-icon class="me-1" name="download-outline"></ion-icon> Download, Installation & Development</a>
</li>
<li class="nav-item d-block me-2">
<a href="#team" class="nav-link d-flex align-items-center"> <ion-icon name="people-circle-outline"></ion-icon> Team</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- End of Header -->
<!-- Heading -->
<p class="top my-5">Graph Interface</p>
<section id="home">
<div class="container my-5">
<!-- About -->
<div id="about">
<a href="#main-navbar" class="bg-light bordered-10 mb-3 p-3 mt-5 heading heading-font">
About the Project <ion-icon size="large" name="arrow-up-circle-outline"></ion-icon>
</a>
<p class="text-justify">
Graph Interface is an open-source analysis tool based on the desktop environment. It can be used as individual analysis software and interface library. This software helps the user visualize and statistically analyze data based on inserted information. From a small set of values to big data, our Graph Interface software can analyze any numbers and visualize the information on the graph frame. We use our set range compression algorithm, which helps the software compress complete data inside the graph frame. The control panel uses statistical evaluation functions to get basic analytics. We stumbled upon many situations where we realized the importance of graphical data analysis and an automated system to help with the process. That is why we came up with this system for helping the labs or any institution that needs automation for statistical analysis and has an open development environment (open-source code). This software contains primary tools and has the potential for further development. Read development instruction for getting started.
</p>
</div>
<!-- Manual -->
<div id="instruction">
<a href="#main-navbar" class="bg-light bordered-10 mb-3 p-3 mt-5 heading heading-font">
Instructions Manual <ion-icon size="large" name="arrow-up-circle-outline"></ion-icon>
</a>
<p class="text-justify">
<b>Data Input</b> <br> <br>
Graph Interface is an open-source analysis tool based on the desktop environment. It can be used as individual analysis software and interface library. This software helps the user visualize and statistically analyze data based on inserted information. From a small set of values to big data, our Graph Interface software can analyze any numbers and visualize the information on the graph frame. We use our set range compression algorithm, which helps the software compress complete data inside the graph frame. The control panel uses statistical evaluation functions to get basic analytics. We stumbled upon many situations where we realized the importance of graphical data analysis and an automated system to help with the process. That is why we came up with this system for helping the labs or any institution that needs automation for statistical analysis and has an open development environment (open-source code). This software contains primary tools and has the potential for further development. Read development instruction for getting started.
</p>
<img src="./website/resources/main/assets/text-file.png" class="mx-auto d-block img-fluid" alt="data-input">
<code class="text-primary">QUANTITY[<span class="text-danger">the number of inputs in x/y</span>]</code>
<p>Type the number of values in x & y. The number you type = quantity x = quantity y.</p>
<br>
<code class="text-primary">X[<span class="text-danger">What X represents</span>]</code>
<p>Type what x-axis represents in your data.</p>
<br>
<code class="text-primary">X[<span class="text-danger">values of x</span>]</code>
<p>Type the numeric values of the x-axis separated by a comma (,).</p>
<br>
<code class="text-primary">Y[<span class="text-danger">What Y represents</span>]</code>
<p>Type the numeric values of the y-axis separated by a comma (,).</p>
<code class="text-primary">Y[<span class="text-danger">values of y</span>]</code>
<p>Type the numeric values of the y-axis separated by a comma (,).</p>
<p class="text-danger"> <b> Note: </b> Make sure the file name is dataset.txt & brackets before and after your inputs.</p>
<br>
<p><b>Analysis</b></p>
<p>The interface contains two parts to help you analyze the data: the graphical representation and the information panel. The graph panel is a single line display where your provided value gets displayed. Here the vertical line represents the y-axis and the horizontal line represents the x-axis.</p>
<img src="./website/resources/main/assets/interface.png" class="mx-auto d-block img-fluid" alt="data-input" width="80%">
<br>
<br>
<br>
<!-- Table -->
<div id="table">
<div class="row">
<div class="col">
<code>Topic:</code><br>
It displays the content you typed on the TOPIC[ ] section in the text file.<br><br>
</div>
<div class="col">
<code>Mean(x):</code><br>
It displays the mean value of the x-axis.<br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>x represents:</code><br>
It displays the content you typed on the X[ ] section in the text file.<br><br>
</div>
<div class="col">
<code>Mean(y):</code><br>
It displays the mean value of the y-axis.<br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>y represents:</code><br>
It displays the content you typed on the Y[ ] section in the text file.<br><br>
</div>
<div class="col">
<code>Growth(x):</code><br>
It displays the characteristic of the x-axis. <br>
If values are going upwards: Upwards. <br>
If values are going downwards: Downwards. <br>
If the set contains ups & downs: Fluctuate. <br>
If the values are same: Stable.<br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>Max(x):</code><br>
It displays the maximum value in the x-axis.<br><br>
</div>
<div class="col">
<code>Growth(y):</code><br>
It displays the characteristic of the y-axis. <br>
If values are going upwards: Upwards. <br>
If values are going downwards: Downwards. <br>
If the set contains ups & downs: Fluctuate. <br>
If the values are same: Stable.<br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>Mix(x):</code><br>
It displays the minimum value in the x-axis.<br><br>
</div>
<div class="col">
<code>Total x value:</code><br>
It displays the total value in the x-axis. <br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>Max(y):</code><br>
It displays the maximum value in the y-axis.<br><br>
</div>
<div class="col">
<code>Total y value:</code><br>
It displays the total value in the y-axis. <br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>Min(y):</code><br>
It displays the minimum value in the y-axis. <br><br>
</div>
<div class="col">
<code>Sum(x):</code><br>
It displays the summation of all values in x-axis. <br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>Med(x):</code><br>
It displays the median value in the x-axis. <br><br>
</div>
<div class="col">
<code>Sum(y):</code><br>
It displays the summation of all values in y-axis. <br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>Med(y):</code><br>
It displays the median value in the y-axis. <br><br>
</div>
<div class="col">
<code>Optional:</code><br>
It is extra space for the user if they want to add something extra. <br><br>
</div>
</div>
<div class="row">
<div class="col">
<code>FILE TEST:</code><br>
It displays if the user input is validated. Condition: QUANTITY[ ] = quantity(x) = quantity(y). <br><br>
</div>
<div class="col">
<code>Software Information:</code><br>
Contains Version number and last update time of the software. <br><br>
</div>
</div>
</div>
<!-- Table - end -->
</div>
<!-- Instruction - end -->
<div id="download">
<a href="#main-navbar" class="bg-light bordered-10 mb-3 p-3 mt-5 heading heading-font">
Download, Installation & Development Instruction <ion-icon size="large" name="arrow-up-circle-outline"></ion-icon>
</a>
<p>The installation process is pretty simple. We recommend you use the Java file installation link. Create a project on your compiler and use GUI.java & Process.java files. Run GUI.java and make sure you have included the provided dataset.txt file outside of src. This software is open-source for all non-commercial use. Modify according to your needs and let us know if you need any extra features that may help in the research process. We do not permit anyone to use this project for any commercial purpose. While developing, please do not change the version number and year.</p>
<img src="./website/resources/main/assets/java-file.png" class="mx-auto d-block" alt="data-input">
<div class="text-center">
<a target="_blank" href="https://jayedrafi.com/graph-interface/download/gi-software.zip" class="btn btn-success my-5 d-inline-block">Download (Java file with txt version 1.0) <ion-icon name="cloud-download-outline"></ion-icon> </a>
</div>
<br>
<!-- Video -->
<div class="d-flex justify-content-center my-5">
<iframe width="800px" height="410px" src="https://www.youtube.com/embed/nywFxN3id1M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<br><br><br>
<section id="team">
<div class="container my-5">
<a href="#main-navbar" class="bg-light bordered-10 mb-3 p-3 mt-5 heading heading-font">
Team <ion-icon size="large" name="arrow-up-circle-outline"></ion-icon>
</a>
<div class="row" style="border: none">
<!-- Start of 1st Profile -->
<div class="col" style="border: none">
<div class="row profile mt-5 bg-light bordered-10 p-4">
<div class="mt-5">
<div class="d-flex">
<img class="me-5" src="./website/resources/main/assets/jayed_profile.jfif" alt="jayed-rafi" style="width: 150px; height: 150px;">
<div class="mt-2">
<h3>Jayed Rafi</h3> <small></small>
<p class="lead text-left">Software Development</p>
<p><a href="mailto:[email protected]">Email: [email protected]</a></p>
<a class="text-light btn btn-success" href="https://jayedrafi.com/" target="_blank"> <ion-icon name="person-outline"></ion-icon></a>
<a class="text-light btn btn-dark" href="https://github.com/JayedRafiProjects" target="_blank"> <ion-icon name="logo-github"></ion-icon></a>
<a class="text-light btn btn-info" href="https://www.linkedin.com/in/jayed-rafi/" target="_blank"> <ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
</div>
</div>
<!-- End of 1st Profile -->
<!-- Start of 2nd Profile -->
<div class="col" style="border: none">
<div class="row profile mt-5 bg-light bordered-10 p-4">
<div class="mt-5">
<div class="d-flex">
<img class="me-5" src="./website/resources/main/assets/jashan_profile.jfif" alt="jashan-gill" style="width: 150px; height: 150px;">
<div class="mt-2">
<h3>Jashanjot Singh Gill</h3>
<p class="lead text-left">Web Development</p>
<p ><a href="mailto:[email protected]">Email: [email protected]</a></p>
<a class="text-light btn btn-success" href="https://jashann.github.io" target="_blank"> <ion-icon name="person-outline"></ion-icon></a>
<a class="text-light btn btn-dark" href="https://github.com/Jashann" target="_blank"> <ion-icon name="logo-github"></ion-icon></a>
<a class="text-light btn btn-info" href="https://www.linkedin.com/in/jashan7/" target="_blank"> <ion-icon name="logo-linkedin"></ion-icon></a>
</div>
</div>
</div>
</div>
</div>
<!-- End of 2nd Profile -->
</div>
</div>
</section>
<section id="news">
<div class="container">
<a href="#main-navbar" class="bg-light bordered-10 mb-3 p-3 mt-5 heading heading-font">
News and Updates <ion-icon size="large" name="arrow-up-circle-outline"></ion-icon>
</a>
<div class="single-news">
<b>14 February 2022 - Web Update: </b>
<p class="content">
Website updated.
</p>
<b>12 February 2022 - Bug fixed: </b>
<p class="content">
Software won’t crash even if the data size is zero or size(x) != size(y).
</p>
</div>
</div>
</section>
<!-- Start of Footer -->
<footer class="bg-dark d-flex flex-wrap justify-content-between bg-light align-items-center my-4">
<div class="container text-center">
<div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
<img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" />
</a>
<br/>
This work is licensed under a <a id="license" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
</div>
</div>
</footer>
<!-- End of Footer -->
</body>
</html>