Hugging Face's logo

Spaces:
malteos
/
some-tests
Running

App Files Community
malteos commited on
Commit
12311da
·
verified ·
1 Parent(s): 6eda012

Uploading paper explorer

Browse files
Files changed (3) hide show
  1. index.html +141 -0
  2. papers.js +0 -0
  3. style.css +126 -0
index.html ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <title>Common Crawl citations</title>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
7
+ <link rel="stylesheet" href="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.css" />
8
+ <link rel="stylesheet" href="./style.css" />
9
+
10
+ <meta charset="utf-8" />
11
+ <meta name="viewport" content="width=device-width" />
12
+
13
+
14
+ <script>
15
+ function showFullLegend() {
16
+ [].forEach.call(document.querySelectorAll('.legend-more'), function (el) {
17
+ el.style.display = 'inline';
18
+ });
19
+ }
20
+
21
+ document.addEventListener('DOMContentLoaded', function() {
22
+ // your code here
23
+ document.getElementById('loading').style.display = 'none';
24
+
25
+ //sample data values for populate map
26
+ var _data = [];
27
+
28
+ // Calculate center as the mean of all locations
29
+ var sumLat = 0, sumLng = 0;
30
+ for (let i = 0; i < data.length; i++) {
31
+ sumLat += data[i].loc[0];
32
+ sumLng += data[i].loc[1];
33
+ }
34
+ var centerLat = sumLat / data.length;
35
+ var centerLng = sumLng / data.length;
36
+
37
+ var map = new L.Map('map', {
38
+ zoom: 7,
39
+ zoomControl: false,
40
+ center: new L.latLng([centerLat, centerLng])
41
+ }); //set center from mean of all locations
42
+ L.control.zoom({
43
+ position: 'topright'
44
+ }).addTo(map);
45
+ // map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
46
+
47
+ var markersLayer = new L.LayerGroup(); //layer contain searched elements
48
+
49
+ map.addLayer(markersLayer);
50
+
51
+ var controlSearch = new L.Control.Search({
52
+ position:'topleft',
53
+ collapsed: false,
54
+ textPlaceholder: 'Search papers ...',
55
+ layer: markersLayer,
56
+ initial: false,
57
+ zoom: 12,
58
+ marker: false,
59
+ });
60
+
61
+ map.addControl( controlSearch );
62
+
63
+ ////////////populate map with markers from sample data
64
+ var legendHtml = '<b>Legend:</b> '
65
+ var moreFrom = 15;
66
+
67
+ for (let i = 0; i < labels.length; i++) {
68
+ if (i >= moreFrom) {
69
+ cls = 'legend-more';
70
+ } else {
71
+ cls = '';
72
+ }
73
+
74
+ legendHtml += '<span class="legend-item ' + cls +'"><span class="legend-icon" style="background: ' + colors[i]+ '"></span>' + labels[i] + '</span> ';
75
+
76
+ if (i == moreFrom) {
77
+ legendHtml += '<a href="javascript:showFullLegend();">...</a>';
78
+ }
79
+ }
80
+ document.getElementById('legendContainer').innerHTML = legendHtml;
81
+
82
+
83
+ for(i in data) {
84
+ var title = data[i].title, //value searched
85
+ loc = data[i].loc, //position found
86
+ abstract = data[i].abstract,
87
+ venue = data[i].venue,
88
+ authors = data[i].authors,
89
+ label = data[i].label
90
+ url = data[i].openalex_id
91
+
92
+ if (url == '') {
93
+ url = 'https://github.com/commoncrawl/cc-citations'
94
+ }
95
+ // else {
96
+ // url = openalex_id
97
+ // }
98
+
99
+ // circleMarker, Marker
100
+ marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + label} );//se property searched
101
+ marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> [' + labels[label] + '] <i>' + authors + '. Published at ' + venue + ':<br />' + abstract );
102
+ //marker.setStyle({fillColor: colors[label]});
103
+ marker.bindTooltip(title)
104
+ marker.setStyle({color: colors[label]});
105
+
106
+ markersLayer.addLayer(marker);
107
+ }
108
+
109
+ }, false);
110
+
111
+
112
+ </script>
113
+
114
+ </head>
115
+ <body>
116
+
117
+
118
+
119
+ <div id="header">
120
+ <h1>Common Crawl citations</h1>
121
+ <a href="https://github.com/commoncrawl/cc-citations" target="_blank">Scientific articles using or citing Common Crawl data</a>. Built with <a href="https://github.com/malteos/scincl" target="_blank">SciNCL</a>,
122
+ <a href="https://github.com/lmcinnes/umap" target="_blank">UMAP</a>, and <a href="https://scikit-learn.org/stable/modules/generated/sklearn.decomposition.LatentDirichletAllocation.html" target="_blank">LDA</a>.
123
+
124
+ <div id="legendContainer"></div>
125
+ </div>
126
+
127
+ <div id="loading">
128
+ <h2>Loading ...</h2>
129
+ </div>
130
+
131
+
132
+ <div id="mapContainer">
133
+ <div id="map"></div>
134
+ </div>
135
+
136
+ <script src="./papers.js"></script>
137
+ <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
138
+ <script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script>
139
+
140
+ </body>
141
+ </html>
papers.js ADDED
The diff for this file is too large to render. See raw diff
 
style.css ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html, body {
2
+ height: 100%;
3
+ margin: 0;
4
+ padding: 0;
5
+ }
6
+
7
+ html {
8
+ font-size: 11px;
9
+ }
10
+
11
+ body {
12
+ color:#e5e5e5;
13
+ font-family:Arial;
14
+ text-align: center;
15
+ }
16
+
17
+ a {
18
+ color:#3287c5;
19
+ }
20
+ a:hover {
21
+ color:#3faaf7;
22
+ }
23
+ h1 {
24
+ color: #152a47;
25
+ margin: 0.5rem;
26
+ font-size: 1.4rem;
27
+ /* font-size: 46px; */
28
+ }
29
+
30
+ #map {
31
+ border:2px solid #696969;
32
+ margin: 4px auto;
33
+ /* float:left; */
34
+ /* height: 100%; */
35
+
36
+
37
+ position: absolute;
38
+
39
+ right: 0;
40
+ bottom: 0;
41
+ left: 0;
42
+
43
+ top: 150px;
44
+ height: calc(100% - 150px - 10px);
45
+
46
+ /* top: 150px;
47
+ height: calc(100% - 150px - 10px); */
48
+ }
49
+
50
+ #header {
51
+ height: 150px;
52
+ /* height: 180px; */
53
+
54
+ padding: 0.5rem;
55
+ font-size: 1rem;
56
+ /* float:left; */
57
+ background:#ffffff;
58
+ /* border:1px solid #c6bb58; */
59
+ /* box-shadow: 2px 2px 6px #999; */
60
+ color:#666;
61
+
62
+ overflow: auto;
63
+ }
64
+
65
+ #legendContainer {
66
+ font-size: 0.9rem;
67
+ margin: 0 4px;
68
+ padding: 1rem;
69
+
70
+ }
71
+
72
+ .legend-item {
73
+ padding: 3px;
74
+ margin: 3px;
75
+ /* white-space: nowrap; */
76
+ }
77
+
78
+ .legend-icon {
79
+ margin: 0 2px;
80
+ width: 7px;
81
+ display: inline-block;
82
+ height: 7px;
83
+ }
84
+
85
+ .legend-more {
86
+ display: none;
87
+ }
88
+
89
+ .leaflet-container {
90
+ background: rgb(221, 229, 241);
91
+ outline: 0;
92
+ }
93
+
94
+ .leaflet-popup-content {
95
+ max-height: 240px;
96
+ overflow-y: auto;
97
+ }
98
+
99
+ @media only screen and (min-width: 500px) {
100
+ /* Medium screen */
101
+ html {
102
+ font-size: 12px;
103
+ }
104
+
105
+ #map {
106
+ height: calc(100% - 160px - 10px);
107
+ top: 160px;
108
+ }
109
+ #header {
110
+ height: 160px;
111
+ }
112
+ }
113
+
114
+ @media only screen and (min-width: 768px) {
115
+ /* Large screen */
116
+ html {
117
+ font-size: 14px;
118
+ }
119
+ #map {
120
+ height: calc(100% - 130px - 10px);
121
+ top: 130px;
122
+ }
123
+ #header {
124
+ height: 130px;
125
+ }
126
+ }