Hugging Face's logo

Spaces:
commoncrawl
/
cc-citations
Running

App Files Community
cc-citations
File size: 4,462 Bytes 
fbdd4cf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Common Crawl citations</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.css" />
<link rel="stylesheet" href="./style.css" />

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />


<script>
function showFullLegend() {
	[].forEach.call(document.querySelectorAll('.legend-more'), function (el) {
	el.style.display = 'inline';
	});
}

document.addEventListener('DOMContentLoaded', function() {
	// your code here
	document.getElementById('loading').style.display = 'none';

	//sample data values for populate map
	var _data = [];

	// Calculate center as the mean of all locations
	var sumLat = 0, sumLng = 0;
	for (let i = 0; i < data.length; i++) {
		sumLat += data[i].loc[0];
		sumLng += data[i].loc[1];
	}
	var centerLat = sumLat / data.length;
	var centerLng = sumLng / data.length;

	var map = new L.Map('map', {
		zoom: 7,
		zoomControl: false,
		center: new L.latLng([centerLat, centerLng])
	});	//set center from mean of all locations
	L.control.zoom({
		position: 'topright'
	}).addTo(map);
	// map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));	//base layer

	var markersLayer = new L.LayerGroup();	//layer contain searched elements
	
	map.addLayer(markersLayer);

	var controlSearch = new L.Control.Search({
		position:'topleft',		
		collapsed: false,
		textPlaceholder: 'Search papers ...',
		layer: markersLayer,
		initial: false,
		zoom: 12,
		marker: false,
	});

	map.addControl( controlSearch );

	////////////populate map with markers from sample data
	var colors = [
	"#63b598", 	"#ce7d78", 	"#ea9e70", 	"#a48a9e", 	"#c6e1e8", 	"#648177", 	"#0d5ac1",
"#f205e6", 	"#1c0365", 	"#14a9ad", 	"#4ca2f9", 	"#a4e43f", 	"#d298e2", 	"#6119d0",
"#d2737d", 	"#c0a43c", 	"#f2510e", 	"#651be6", 	"#79806e", 	"#61da5e", 	"#cd2f00",
"#9348af", 	"#01ac53", 	"#c5a4fb", 	"#996635", 	"#b11573", 	"#4bb473", 	"#75d89e",
"#2f3f94", 	"#2f7b99", 	"#da967d", 	"#34891f", 	"#b0d87b", 	"#ca4751", 	"#7e50a8",
"#c4d647", 	"#e0eeb8", 	"#11dec1", 	"#289812", 	"#566ca0", 	"#ffdbe1", 	"#2f1179",
	];

	var legendHtml = '<b>Legend:</b> '
	var moreFrom = 10;

	for (let i = 0; i < labels.length; i++) {
		if (i >= moreFrom) {
			cls = 'legend-more';
		} else {
			cls = '';
		}

		legendHtml += '<span class="legend-item ' + cls +'"><span class="legend-icon" style="background: ' + colors[i]+ '"></span>' + labels[i] + '</span> ';

		if (i == moreFrom) {
			legendHtml += '<a href="javascript:showFullLegend();">...</a>';
		}
	} 
	document.getElementById('legendContainer').innerHTML = legendHtml;


	for(i in data) {
		var title = data[i].title,	//value searched
			loc = data[i].loc,		//position found
			abstract =  data[i].abstract,
			venue =  data[i].venue,
			authors =  data[i].authors,
			label = data[i].label
			url = data[i].openalex_id
			
		if (url == '') {
			url = 'https://github.com/commoncrawl/cc-citations'
		} 
        // else {
		// 	url = openalex_id
		// }

		// circleMarker, Marker
		marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + label} );//se property searched
		marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> [' + venue + '] <i>' + authors + ':<br />' + abstract );
		//marker.setStyle({fillColor: colors[label]});
		marker.bindTooltip(title)
		marker.setStyle({color: colors[label]});
		
		markersLayer.addLayer(marker);
	}

}, false);


</script>

</head>
<body>



<div id="header">
	<h1>Common Crawl citations</h1>
	<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> 
	and <a href="https://github.com/lmcinnes/umap"  target="_blank">UMAP</a>. 

	<div id="legendContainer"></div>
</div>

<div id="loading">
	<h2>Loading ...</h2>
</div>


<div id="mapContainer">
	<div id="map"></div>
</div>

<script src="./papers.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script>

</body>
</html>