Hugging Face's logo

Spaces:
commoncrawl
/
cc-citations
Running

App Files Community
malteos commited on
Commit
fbdd4cf
·
verified ·
1 Parent(s): aa67f45

Uploading paper explorer

Browse files
Files changed (3) hide show
  1. index.html +150 -19
  2. papers.js +0 -0
  3. style.css +115 -17
index.html CHANGED
@@ -1,19 +1,150 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 colors = [
65
+ "#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177", "#0d5ac1",
66
+ "#f205e6", "#1c0365", "#14a9ad", "#4ca2f9", "#a4e43f", "#d298e2", "#6119d0",
67
+ "#d2737d", "#c0a43c", "#f2510e", "#651be6", "#79806e", "#61da5e", "#cd2f00",
68
+ "#9348af", "#01ac53", "#c5a4fb", "#996635", "#b11573", "#4bb473", "#75d89e",
69
+ "#2f3f94", "#2f7b99", "#da967d", "#34891f", "#b0d87b", "#ca4751", "#7e50a8",
70
+ "#c4d647", "#e0eeb8", "#11dec1", "#289812", "#566ca0", "#ffdbe1", "#2f1179",
71
+ ];
72
+
73
+ var legendHtml = '<b>Legend:</b> '
74
+ var moreFrom = 10;
75
+
76
+ for (let i = 0; i < labels.length; i++) {
77
+ if (i >= moreFrom) {
78
+ cls = 'legend-more';
79
+ } else {
80
+ cls = '';
81
+ }
82
+
83
+ legendHtml += '<span class="legend-item ' + cls +'"><span class="legend-icon" style="background: ' + colors[i]+ '"></span>' + labels[i] + '</span> ';
84
+
85
+ if (i == moreFrom) {
86
+ legendHtml += '<a href="javascript:showFullLegend();">...</a>';
87
+ }
88
+ }
89
+ document.getElementById('legendContainer').innerHTML = legendHtml;
90
+
91
+
92
+ for(i in data) {
93
+ var title = data[i].title, //value searched
94
+ loc = data[i].loc, //position found
95
+ abstract = data[i].abstract,
96
+ venue = data[i].venue,
97
+ authors = data[i].authors,
98
+ label = data[i].label
99
+ url = data[i].openalex_id
100
+
101
+ if (url == '') {
102
+ url = 'https://github.com/commoncrawl/cc-citations'
103
+ }
104
+ // else {
105
+ // url = openalex_id
106
+ // }
107
+
108
+ // circleMarker, Marker
109
+ marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + label} );//se property searched
110
+ marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> [' + venue + '] <i>' + authors + ':<br />' + abstract );
111
+ //marker.setStyle({fillColor: colors[label]});
112
+ marker.bindTooltip(title)
113
+ marker.setStyle({color: colors[label]});
114
+
115
+ markersLayer.addLayer(marker);
116
+ }
117
+
118
+ }, false);
119
+
120
+
121
+ </script>
122
+
123
+ </head>
124
+ <body>
125
+
126
+
127
+
128
+ <div id="header">
129
+ <h1>Common Crawl citations</h1>
130
+ <a href="https://github.com/commoncrawl/cc-citations">Scientific articles using or citing Common Crawl data</a>. Built with <a href="https://github.com/malteos/scincl" target="_blank">SciNCL</a>
131
+ and <a href="https://github.com/lmcinnes/umap" target="_blank">UMAP</a>.
132
+
133
+ <div id="legendContainer"></div>
134
+ </div>
135
+
136
+ <div id="loading">
137
+ <h2>Loading ...</h2>
138
+ </div>
139
+
140
+
141
+ <div id="mapContainer">
142
+ <div id="map"></div>
143
+ </div>
144
+
145
+ <script src="./papers.js"></script>
146
+ <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
147
+ <script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script>
148
+
149
+ </body>
150
+ </html>
papers.js ADDED
The diff for this file is too large to render. See raw diff
 
style.css CHANGED
@@ -1,28 +1,126 @@
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
 
 
 
 
 
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ }