responsive + full screen

README.md

@@ -12,7 +12,16 @@ license: mit
 
 EMNLP 2022 papers on a map. Paper embeddings via [SciNCL](https://github.com/malteos/scincl). 2D reduction via [UMAP](https://github.com/lmcinnes/umap). Created by [@XYOU](https://twitter.com/xyou).
 
-See also:
+## See also
+
 - [Neighborhood Contrastive Learning for Scientific Document Representations with Citation Embeddings (PDF on Arxiv)](http://arxiv.org/abs/2202.06671)
 - https://github.com/malteos/scincl
 - https://huggingface.co/malteos/scincl
+
+
+## Run locally
+
+```bash
+# via local web server at http://localhost
+python -m http.server 80
+```

index.html

@@ -26,10 +26,13 @@ document.addEventListener('DOMContentLoaded', function() {
 	var _data = [];
 
 	var map = new L.Map('map', {
-		zoom: 6, 
-		center: new L.latLng([5, 5])   // data[0].loc
+		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
@@ -38,7 +41,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
 	var controlSearch = new L.Control.Search({
 		position:'topleft',		
-		collapsed: true,
+		collapsed: false,
 		layer: markersLayer,
 		initial: false,
 		zoom: 12,
@@ -57,8 +60,6 @@ document.addEventListener('DOMContentLoaded', function() {
 "#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;
 
@@ -87,7 +88,6 @@ document.addEventListener('DOMContentLoaded', function() {
 			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
@@ -96,7 +96,6 @@ document.addEventListener('DOMContentLoaded', function() {
 		marker.bindTooltip(title)
 		marker.setStyle({color: colors[label]});
 		
-
 		markersLayer.addLayer(marker);
 	}
 
@@ -114,14 +113,17 @@ document.addEventListener('DOMContentLoaded', function() {
 	<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="legendContainer"></div>
-<div id="map">
+
+<div id="mapContainer">
+	<div id="map"></div>
 </div>
 
 <script src="./papers.js"></script>

style.css

@@ -1,3 +1,10 @@
+html, body {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+ }
+
+ 
 body {
 	color:#373737;
 	font-family:Arial;
@@ -24,19 +31,20 @@ h3 a,
 h3 a:hover {
 	text-decoration:none;
 }
-#desc {
-	/* float: left; */
-	margin-bottom: 1em;
-	position: relative;
-	white-space:nowrap;
-	font-size:1em;
-}
+
 #map {
 	border-radius:.125em;
 	border:2px solid #696969;
 	margin: 4px auto;
 	/* float:left; */
-	min-height: 600px;
+	/* height: 100%; */
+	height: calc(100% - 250px - 10px);
+
+	position: absolute;
+	top: 250px;
+	right: 0;
+	bottom: 0;
+	left: 0;
 }
 ul {
 	font-size:.85em;
@@ -49,13 +57,15 @@ li {
 #header {
 	/* width:9em; */
 	/* height:9em; */
-	margin: 4px;
+	/* margin: 4px; */
 	padding:1em;
 	/* float:left; */
 	background:#fbf5bf;
-	border:1px solid #c6bb58;
-	box-shadow: 2px 2px 6px #999;
+	/* border:1px solid #c6bb58; */
+	/* box-shadow: 2px 2px 6px #999; */
 	color:#666;
+	height: 250px;
+	overflow: auto;
 }
 #copy {
 	position:fixed;
@@ -117,3 +127,29 @@ li {
 .legend-more {
     display: none;
 }
+
+.leaflet-container {
+    background: rgb(41, 41, 41);
+    outline: 0;
+}
+
+
+@media only screen and (min-width: 500px) {
+	#map {
+		height: calc(100% - 220px - 10px);
+		top: 220px;
+	}
+	#header {
+		height: 220px;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	#map {
+		height: calc(100% - 150px - 10px);
+		top: 150px;
+	}
+	#header {
+		height: 150px;
+	}
+}