Hugging Face's logo

Spaces:
malteos
/
emnlp2022-papers
Running

App Files Community
emnlp2022-papers
File size: 4,110 Bytes 
d714cc7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46481c8
17fd582
 
 
46481c8
17fd582
 
 
d714cc7
 
 
 
 
 
 
 
17fd582
50004c4
d714cc7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e0cf198
17fd582
 
d714cc7
 
 
 
 
 
17fd582
 
 
46481c8
d714cc7
 
 
 
 
 
 
 
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
 
<!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>EMNLP 2022 papers on a map</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/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 = [];

	var map = new L.Map('map', {
		zoom: 7, 
		zoomControl: false,
		center: new L.latLng([4, 7])   // data[0].loc
	});	//set center from first location
	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,
			track =  data[i].track,
			authors =  data[i].authors,
			label = data[i].label
			url = 'https://2022.emnlp.org/#unavailable'


		// 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> [' + track + '] <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>EMNLP 2022 Papers</h1>
	All EMNLP 2022 papers on a map.
	Embeddings are generated with <a href="https://github.com/malteos/scincl" target="_blank">SciNCL (EMNLP paper)</a> and <a href="https://github.com/lmcinnes/umap"  target="_blank">UMAP</a>. Created by <a href="https://twitter.com/xyou"  target="_blank">@XYOU</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/leaflet@1.3.0/dist/leaflet.js"></script>
<script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script>

</body>
</html>