-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (67 loc) · 2.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--customize the display of the page or of the surrounding UI-->
<meta name="theme-color" content="#D0221F" />
<meta name="robots" content="noindex" />
<title>.bibVis</title>
<meta name="description" content="bibTex visualizer" />
<meta name="keywords" content="graph, plot, bibTex, JSON, d3.js, visualization" />
<!--icon-->
<link rel="icon" type="image/jpg" href="src/Logo.png" />
<link rel="apple-touch-icon" type="image/jpg" href="src/Logo.png" />
<!--d3.js-->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<link href="src/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h1>.bibVis</h1>
<div class="inputt">
<label for="readfile" id="dragAndDrop">
Drag & Drop your BibTex file here
</label>
<input type="file" id="readfile" name="bibTex" accept=".bib" onchange="readFile(this)" />
</div>
<!-- graph-->
<div class="graph" id="graph">
<div>
<svg id="Yrviz" width="1000" height="300"></svg>
<p id="TopYr"></p>
</div>
<div>
<svg id="Jrviz" width="300" height="300"></svg>
<p id="TopJr"></p>
</div>
<div>
<p id="TopAth"></p>
<span id="Ath"></span>
</div>
</div>
<!--about-->
<input type="checkbox" id="active">
<label for="active" class="menu-btn">?</label>
<div class="about">
<h1>
a tool for scholars and academics to evaluate
BibTex files and to generate charts by
Year, Top Journals, and Top Authors.
These visualizations make it simple to spot
trends and patterns in the data.<br>
<br> made by Ithar K. (Feb 2023) with d3.js
</h1>
</div>
<!--escape-->
<div id="press-esc">
<p>press escape ↻</p>
</div>
</div>
<!-- custom script -->
<script src="src/main.js"></script>
</body>
</html>