Spaces:
Running
Running
File size: 5,698 Bytes
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 |
<!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/[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 = [];
var map = new L.Map('map', {zoom: 9, center: new L.latLng(data[0].loc) }); //set center from first location
// 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: true,
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 labels = ["Commonsense Reasoning", "Computational Social Science and Cultural Analytics", "Dialogue and Interactive Systems", "Discourse and Pragmatics", "Efficient Methods for NLP", "Ethic Concerns:Computational Social Science and Cultural Analytics", "Ethic Concerns:Dialogue and Interactive Systems", "Ethic Concerns:Discourse and Pragmatics", "Ethic Concerns:Efficient Methods for NLP", "Ethic Concerns:Ethics", "Ethic Concerns:Language Modeling and Analysis of Language Models", "Ethic Concerns:Linguistic Theories, Cognitive Modeling and Psycholinguistics", "Ethic Concerns:Multilinguality", "Ethic Concerns:NLP Applications", "Ethic Concerns:Resources and Evaluation", "Ethic Concerns:Sentiment Analysis, Stylistic Analysis, and Argument Mining", "Ethic Concerns:Speech, Vision, Robotics, Multimodal Grounding", "Ethic Concerns:Summarization", "Ethic Concerns:Theme Track", "Ethic Concerns:Unsupervised and Weakly-Supervised Methods in NLP", "Ethics", "Information Extraction", "Information Retrieval and Text Mining", "Interpretability, Interactivity and Analysis of Models for NLP", "Language Modeling and Analysis of Language Models", "Linguistic Theories, Cognitive Modeling and Psycholinguistics", "Machine Learning for NLP", "Machine Translation", "Multilinguality", "NLP Applications", "Natural Language Generation", "Phonology, Morphology and Word Segmentation", "Question Answering", "Resources and Evaluation", "Semantics: Lexical, Sentence level, Textual Inference and Other areas", "Sentiment Analysis, Stylistic Analysis, and Argument Mining", "Speech, Vision, Robotics, Multimodal Grounding", "Summarization", "Syntax, Parsing and their Applications", "Theme Track", "Unsupervised and Weakly-Supervised Methods in NLP"];
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'
// trackLabel = track.replace(' ', '-').replace(':', '')
// 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">SciNCL (EMNLP paper)</a> and <a href="https://github.com/lmcinnes/umap">UMAP</a>. Created by <a href="https://twitter.com/xyou">@XYOU</a>.
</div>
<div id="loading">
<h2>Loading ...</h2>
</div>
<div id="legendContainer"></div>
<div id="map"></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>
|