-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (132 loc) · 6.11 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
<!DOCTYPE html>
<html>
<head>
<title>Code Mapper</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png" />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="header">
<h1>Code Mapper</h1>
</div>
<div id="container">
<h2>Track Your Repository Contributions</h2>
<p>Enter the repository below to visualize its contributions.</p>
<form id="search-form">
<div class="input-group mb-3">
<input type="text" class="form-control" id="package_name" placeholder="Enter package name or ID" placeholder="apache/spark">
<button class="btn btn-primary" onclick="generate()" id="generate_button">Track</button>
</div>
</form>
<div id="map">
<div id="data">
<div id="mapDiv" width = "1000" height="500">
<svg id="my_dataviz" width="1000" height="500"></svg>
</div>
<div id="rawData">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Contribution</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<div id="features">
<div class="container">
<h2>Key Features</h2>
<div class="row">
<div class="col-md-4">
<div class="feature">
<i class="bi bi-search feature-icon"></i>
<p class="feature-text">Visualize repository contributions by entering a package repository.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature">
<i class="bi bi-globe feature-icon"></i>
<p class="feature-text">Discover the countries or regions involved in open source development.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature">
<i class="bi bi-list feature-icon"></i>
<p class="feature-text">View detailed information about each repository's origin.</p>
</div>
</div>
</div>
</div>
</div>
<div id="stats" class="row">
<div class="col-md-4">
<div class="card stat-card">
<div class="card-body">
<h5 class="card-title">Total Repositories Tracked</h5>
<p class="card-text" id="total-packages"></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card stat-card">
<div class="card-body">
<p class="card-text" id="average-contributions"></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card stat-card">
<div class="card-body">
<p class="card-text" id="best-package"></p>
</div>
</div>
</div>
<div class="steps-container">
<h3>How It Works</h3>
<div class="card step-card">
<div class="card-body">
<span class="step-icon"><i class="bi bi-search"></i></span>
<span class="step-text">Get repository users and information</span>
</div>
<div class="card-body">
<p>Using github API we get the repository data and users to find the location of the contributors</p>
</div>
</div>
<div class="card step-card">
<div class="card-body">
<span class="step-icon"><i class="bi bi-globe"></i></span>
<span class="step-text">Find contributors location using Machine Learning model</span>
</div>
<div class="card-body">
<p>Using some data processing and Machine Learning Model we predict the location of the contributors</p>
</div>
</div>
<div class="card step-card">
<div class="card-body">
<span class="step-icon"><i class="bi bi-list"></i></span>
<span class="step-text">Dislay statistics of the repository on interactive map</span>
</div>
<div class="card-body">
<p>See the data on this website with the interactive map, get global statistics on all the repositories analysed</p>
</div>
</div>
</div>
<div id="result"></div>
</div>
<div id="result"></div>
</div>
<script src="js/worldmap.js"></script>
</body>
</html>