Spaces:
Running
Running
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>Common Crawl citations</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> | |
| // Global variables for marker filtering | |
| var allMarkers = []; | |
| var activeLabelFilter = null; | |
| var legendExpanded = false; | |
| function toggleLegend() { | |
| legendExpanded = !legendExpanded; | |
| [].forEach.call(document.querySelectorAll('.legend-more'), function (el) { | |
| el.style.display = legendExpanded ? 'inline' : 'none'; | |
| }); | |
| document.getElementById('legendToggleMore').style.display = legendExpanded ? 'none' : 'inline'; | |
| document.getElementById('legendToggleLess').style.display = legendExpanded ? 'inline' : 'none'; | |
| } | |
| function toggleLabelFilter(labelIndex) { | |
| // Toggle the filter | |
| if (activeLabelFilter === labelIndex) { | |
| // Clicking the same label again - deactivate filter | |
| activeLabelFilter = null; | |
| } else { | |
| // Activate filter for this label | |
| activeLabelFilter = labelIndex; | |
| } | |
| // Update marker visibility | |
| for (let i = 0; i < allMarkers.length; i++) { | |
| var marker = allMarkers[i]; | |
| if (activeLabelFilter === null) { | |
| // Reset to default state | |
| marker.marker.setStyle({opacity: 1, fillOpacity: 0.2, radius: 5, weight: 1}); | |
| } else if (marker.labelIndex === activeLabelFilter) { | |
| // Highlight selected markers | |
| marker.marker.setStyle({opacity: 1, fillOpacity: 0.8, radius: 7, weight: 2}); | |
| } else { | |
| // Fade inactive markers | |
| marker.marker.setStyle({opacity: 0.1, fillOpacity: 0.05, radius: 5, weight: 1}); | |
| } | |
| } | |
| // Update legend visual state | |
| var legendItems = document.querySelectorAll('.legend-item'); | |
| for (let i = 0; i < legendItems.length; i++) { | |
| if (activeLabelFilter === null) { | |
| legendItems[i].classList.remove('legend-inactive'); | |
| legendItems[i].classList.remove('legend-active'); | |
| } else if (i === activeLabelFilter) { | |
| legendItems[i].classList.add('legend-active'); | |
| legendItems[i].classList.remove('legend-inactive'); | |
| } else { | |
| legendItems[i].classList.add('legend-inactive'); | |
| legendItems[i].classList.remove('legend-active'); | |
| } | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // your code here | |
| document.getElementById('loading').style.display = 'none'; | |
| //sample data values for populate map | |
| var _data = []; | |
| // Calculate center as the mean of all locations | |
| var sumLat = 0, sumLng = 0; | |
| for (let i = 0; i < data.length; i++) { | |
| sumLat += data[i].loc[0]; | |
| sumLng += data[i].loc[1]; | |
| } | |
| var centerLat = sumLat / data.length; | |
| var centerLng = sumLng / data.length; | |
| var map = new L.Map('map', { | |
| zoom: 6, | |
| zoomControl: false, | |
| center: new L.latLng([centerLat, centerLng]) | |
| }); //set center from mean of all locations | |
| L.control.zoom({ | |
| position: 'topright' | |
| }).addTo(map); | |
| 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 loaded data including a legend | |
| var legendHtml = '<b>Legend:</b> ' | |
| var moreFrom = 15; | |
| // Legend for labels | |
| for (let i = 0; i < labels.length; i++) { | |
| if (i >= moreFrom) { | |
| cls = 'legend-more'; | |
| } else { | |
| cls = ''; | |
| } | |
| // Legend item - now clickable | |
| legendHtml += '<span class="legend-item ' + cls +'" onclick="toggleLabelFilter(' + i + ')" style="cursor: pointer;"><span class="legend-icon" style="background: ' + colors[i]+ '"></span>' + labels[i] + '</span> '; | |
| } | |
| // Add toggle links - "more" visible by default, "less" hidden | |
| legendHtml += '<a href="javascript:void(0);" id="legendToggleMore" onclick="toggleLegend();">more ...</a>'; | |
| legendHtml += '<a href="javascript:void(0);" id="legendToggleLess" onclick="toggleLegend();" style="display: none;">less ...</a>'; | |
| document.getElementById('legendContainer').innerHTML = legendHtml; | |
| // Add markers to map | |
| for(i in data) { | |
| var title = data[i].title, //value searched | |
| loc = data[i].loc, //position found | |
| abstract = data[i].abstract, | |
| venue = data[i].venue, | |
| authors = data[i].authors, | |
| label = data[i].label | |
| url = data[i].url | |
| if (url == '') { | |
| url = 'https://github.com/commoncrawl/cc-citations' | |
| } | |
| if (!abstract) { | |
| abstract = "<i>No abstract available.</i>"; | |
| } | |
| if (!venue) { | |
| venue = "<i>Unknown</i>"; | |
| } | |
| // Circle marker with popup on click / tooltip | |
| marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + label} ); | |
| marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> [' + labels[label] + '] <i>' + authors + '. Published at ' + venue + ':<br />' + abstract ); | |
| marker.bindTooltip(title) | |
| marker.setStyle({color: colors[label], opacity: 1, fillOpacity: 0.2, weight: 1}); | |
| markersLayer.addLayer(marker); | |
| // Store marker with its label for filtering | |
| allMarkers.push({marker: marker, labelIndex: label}); | |
| } | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <h1>Common Crawl citations</h1> | |
| <a href="https://github.com/commoncrawl/cc-citations" target="_blank">Scientific articles using or citing Common Crawl data</a>. Built with <a href="https://github.com/malteos/scincl" target="_blank">SciNCL</a>, | |
| <a href="https://github.com/lmcinnes/umap" target="_blank">UMAP</a>, and <a href="https://scikit-learn.org/stable/modules/generated/sklearn.decomposition.LatentDirichletAllocation.html" target="_blank">LDA</a>. | |
| <div id="legendContainer"></div> | |
| </div> | |
| <div id="loading"> | |
| <h2>Loading ...</h2> | |
| </div> | |
| <div id="mapContainer"> | |
| <div id="map"></div> | |
| </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> |