Spaces:
Running
Running
| <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: 6, | |
| center: new L.latLng([5, 5]) // 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" 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> | |
| <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/leaflet@1.3.0/dist/leaflet.js"></script> | |
| <script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script> | |
| </body> | |
| </html> | |