Hugging Face's logo

Spaces:
christopher
/
emnlp2022-papers
Running

App Files Community
emnlp2022-papers
File size: 4,322 Bytes 
d10a3b4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!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 = data[i].url
			
		if (url == '') {
			url = 'https://2022.emnlp.org/#unavailable'
		} else {
			url = 'https://preview.aclanthology.org/emnlp-22-ingestion/' + url 
		}

		// 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>
	Embeddings 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://www.linkedin.com/in/malteschwarzer/"  target="_blank">Malte Ostendorff</a> 
	<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_with_anthology_urls.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>