emnlp2022-papers / index.html
malteos
anthology urls
4e0231c
<!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>