|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|
|
<title>infinite-dataset-hub/HistoricalEventsImportance</title> |
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> |
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> |
|
|
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script> |
|
|
|
|
|
<script src="https://unpkg.com/[email protected]"></script> |
|
|
|
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow: hidden; |
|
|
background: #ffffff; |
|
|
} |
|
|
|
|
|
#deck-container { |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
#deck-container canvas { |
|
|
z-index: 1; |
|
|
background: #ffffff; |
|
|
} |
|
|
|
|
|
.deck-tooltip { |
|
|
|
|
|
font-size: 0.8em; |
|
|
font-family: Roboto; |
|
|
font-weight: 300; |
|
|
color: #000000 !important; |
|
|
background-color: #ffffffaa !important; |
|
|
border-radius: 12px; |
|
|
box-shadow: 2px 3px 10px #aaaaaa44; |
|
|
max-width: 25%; |
|
|
} |
|
|
|
|
|
#loading { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
top: 0px; |
|
|
left: 0px; |
|
|
position: absolute; |
|
|
display: block; |
|
|
z-index: 99 |
|
|
} |
|
|
|
|
|
#loading-image { |
|
|
position: absolute; |
|
|
top: 45%; |
|
|
left: 47.5%; |
|
|
z-index: 100 |
|
|
} |
|
|
|
|
|
#title-container { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
margin: 16px; |
|
|
padding: 12px; |
|
|
border-radius: 16px; |
|
|
line-height: 0.95; |
|
|
z-index: 2; |
|
|
font-family: Roboto; |
|
|
color: #000000; |
|
|
background: #ffffffaa; |
|
|
box-shadow: 2px 3px 10px #aaaaaa44; |
|
|
} |
|
|
|
|
|
|
|
|
#search-container{ |
|
|
position: absolute; |
|
|
left: -16px; |
|
|
margin: 16px; |
|
|
padding: 12px; |
|
|
border-radius: 16px; |
|
|
z-index: 2; |
|
|
font-family: Roboto; |
|
|
color: #000000; |
|
|
background: #ffffffaa; |
|
|
width: fit-content; |
|
|
box-shadow: 2px 3px 10px #aaaaaa44; |
|
|
} |
|
|
input { |
|
|
margin: 2px; |
|
|
padding: 4px; |
|
|
border-radius: 8px; |
|
|
color: #000000; |
|
|
background: #ffffffdd; |
|
|
border: 1px solid #ddddddff; |
|
|
transition: 0.5s; |
|
|
outline: none; |
|
|
} |
|
|
input:focus { |
|
|
border: 2px solid #555; |
|
|
} |
|
|
|
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="loading"> |
|
|
<img id="loading-image" src="https://i.gifer.com/ZKZg.gif" alt="Loading..." width="5%"/> |
|
|
</div> |
|
|
|
|
|
<div id="title-container"> |
|
|
<span style="font-family:Roboto;font-size:36pt;color:#000000"> |
|
|
infinite-dataset-hub/HistoricalEventsImportance |
|
|
</span><br/> |
|
|
<span style="font-family:Roboto;font-size:18pt;color:#777777"> |
|
|
Data map for the entire <a href='https://huggingface.co/datasets/infinite-dataset-hub/HistoricalEventsImportance/viewer/default/train' target='_blank'>dataset</a> (100 rows) using the column 'description' |
|
|
</span> |
|
|
|
|
|
<div id="search-container"> |
|
|
<input autocomplete="off" type="search" id="search" placeholder="🔍"> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="deck-container"> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
<script type="module"> |
|
|
import { ArrowLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/+esm' |
|
|
import { JSONLoader } from 'https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/+esm' |
|
|
|
|
|
|
|
|
|
|
|
const pointDataBase64 = "QVJST1cxAAD/////0AUAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAASAQAAAQAAAABAAAADAAAAAgADAAEAAgACAAAACAEAAAEAAAAEAQAAHsiaW5kZXhfY29sdW1ucyI6IFt7ImtpbmQiOiAicmFuZ2UiLCAibmFtZSI6IG51bGwsICJzdGFydCI6IDAsICJzdG9wIjogMTAwLCAic3RlcCI6IDF9XSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogIngiLCAiZmllbGRfbmFtZSI6ICJ4IiwgInBhbmRhc190eXBlIjogImZsb2F0MzIiLCAibnVtcHlfdHlwZSI6ICJmbG9hdDMyIiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJ5IiwgImZpZWxkX25hbWUiOiAieSIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiciIsICJmaWVsZF9uYW1lIjogInIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiZyIsICJmaWVsZF9uYW1lIjogImciLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYiIsICJmaWVsZF9uYW1lIjogImIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYSIsICJmaWVsZF9uYW1lIjogImEiLCAicGFuZGFzX3R5cGUiOiAidWludDgi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bmNvZGluZyI6ICJVVEYtOCJ9fV0sICJjb2x1bW5zIjogW3sibmFtZSI6ICJ4IiwgImZpZWxkX25hbWUiOiAieCIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAieSIsICJmaWVsZF9uYW1lIjogInkiLCAicGFuZGFzX3R5cGUiOiAiZmxvYXQzMiIsICJudW1weV90eXBlIjogImZsb2F0MzIiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInIiLCAiZmllbGRfbmFtZSI6ICJyIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImciLCAiZmllbGRfbmFtZSI6ICJnIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImIiLCAiZmllbGRfbmFtZSI6ICJiIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImEiLCAiZmllbGRfbmFtZSI6ICJhIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInNlbGVjdGVkIiwgImZpZWxkX25hbWUiOiAic2VsZWN0ZWQiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjE3LjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMi4yLjIifQAAAAAGAAAAcGFuZGFzAAAHAAAAKAEAAOwAAAC8AAAAkAAAAGQAAAA4AAAABAAAAAT///8AAAECEAAAABwAAAAEAAAAAAAAAAgAAABzZWxlY3RlZAAAAABi////CAAAADT///8AAAECEAAAABQAAAAEAAAAAAAAAAEAAABhAAAAiv///wgAAABc////AAABAhAAAAAUAAAABAAAAAAAAAABAAAAYgAAALL///8IAAAAhP///wAAAQIQAAAAFAAAAAQAAAAAAAAAAQAAAGcAAADa////CAAAAKz///8AAAECEAAAABgAAAAEAAAAAAAAAAEAAAByAAYACAAEAAYAAAAIAAAA2P///wAAAQMQAAAAFAAAAAQAAAAAAAAAAQAAAHkAAADK////AAABABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAxAAAAAYAAAABAAAAAAAAAABAAAAeAAGAAgABgAGAAAAAAABAPgFAABBUlJPVzE="; |
|
|
const pointDataBuffer = fflate.strToU8(atob(pointDataBase64), true); |
|
|
const pointData = await loaders.parse(pointDataBuffer, ArrowLoader); |
|
|
const hoverDataBase64 = "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"; |
|
|
const hoverDataBuffer = fflate.strToU8(atob(hoverDataBase64), true); |
|
|
const unzippedHoverData = fflate.gunzipSync(hoverDataBuffer); |
|
|
const hoverData = await loaders.parse(unzippedHoverData, ArrowLoader); |
|
|
const labelDataBase64 = "H4sIANbvIGcC/23Sy07kMBAF0F9p1TptucouV5wdms2sRiMeYjGZhYEAltIOSoKgQfz7OA5D81pll3uub/15hkdotkZ5Jra1JqlgDw0pLcRsEZEr6MNF10MDP+M0D+N+M1y36egujPNtF6+ggik+ddBgrXQFIzTGV3ADjc+fC2gEKwjQOPtSlSxWvvZE3onHkoWkxBttnWc034c9xLHru2lq0+Ww292neBnmOKS3aGJFjk3NnP9dDIgrgs2KkI+IXBixFuOR6lVhlKB4qa3Iu8a/h2nenodxczp2Yd63KaSrza8S3qbjLkuuv1icYjKudtbYVwutFrHFwvzF4nJ34wwTFcuWlNOsyaN2eMCc3IUUp9s2/Rj6IcWnklveJw+xOdp1Y7ZMB4jNL83eUG6J6zBUHE6KI1f/BLFK2HlLssCXZfIw3jurRb8b5uxkEaRpjvP9Igh9m17HOmT/v4Vl/SVyvQV8u4W//wA/RoSoeQIAAA=="; |
|
|
const labelDataBuffer = fflate.strToU8(atob(labelDataBase64), true); |
|
|
const unzippedLabelData = fflate.gunzipSync(labelDataBuffer); |
|
|
const labelData = await loaders.parse(unzippedLabelData, JSONLoader); |
|
|
|
|
|
|
|
|
const DATA = {src: pointData.data, length: pointData.data.x.length} |
|
|
|
|
|
const container = document.getElementById('deck-container'); |
|
|
const pointLayer = new deck.ScatterplotLayer({ |
|
|
id: 'dataPointLayer', |
|
|
data: DATA, |
|
|
getPosition: (object, {index, data}) => { |
|
|
return [data.src.x[index], data.src.y[index]]; |
|
|
}, |
|
|
|
|
|
getRadius: 0.1, |
|
|
|
|
|
getFillColor: (object, {index, data}) => { |
|
|
return [ |
|
|
data.src.r[index], |
|
|
data.src.g[index], |
|
|
data.src.b[index], |
|
|
180 |
|
|
] |
|
|
}, |
|
|
getLineColor: (object, {index, data}) => { |
|
|
return [ |
|
|
data.src.r[index], |
|
|
data.src.g[index], |
|
|
data.src.b[index], |
|
|
32 |
|
|
] |
|
|
}, |
|
|
getLineColor: [250, 250, 250, 128], |
|
|
getLineWidth: 0.001, |
|
|
highlightColor: [170, 0, 0, 187], |
|
|
lineWidthMaxPixels: 8, |
|
|
lineWidthMinPixels: 0.1, |
|
|
radiusMaxPixels: 24, |
|
|
radiusMinPixels: 0.01, |
|
|
radiusUnits: "common", |
|
|
lineWidthUnits: "common", |
|
|
autoHighlight: true, |
|
|
pickable: true, |
|
|
stroked: true |
|
|
}); |
|
|
const labelLayer = new deck.TextLayer({ |
|
|
id: "textLabelLayer", |
|
|
data: labelData, |
|
|
pickable: false, |
|
|
getPosition: d => [d.x, d.y], |
|
|
getText: d => d.label, |
|
|
getColor: d => [d.r, d.g, d.b], |
|
|
getSize: d => d.size, |
|
|
sizeScale: 1, |
|
|
sizeMinPixels: 18, |
|
|
sizeMaxPixels: 36, |
|
|
outlineWidth: 8, |
|
|
outlineColor: [238, 238, 238, 221], |
|
|
getBackgroundColor: [255, 255, 255, 64], |
|
|
getBackgroundPadding: [15, 15, 15, 15], |
|
|
background: true, |
|
|
characterSet: "auto", |
|
|
fontFamily: "Roboto", |
|
|
fontWeight: 900, |
|
|
lineHeight: 0.95, |
|
|
fontSettings: {"sdf": true}, |
|
|
getTextAnchor: "middle", |
|
|
getAlignmentBaseline: "center", |
|
|
lineHeight: 0.95, |
|
|
elevation: 100, |
|
|
|
|
|
collisionEnabled: true, |
|
|
getCollisionPriority: d => d.size, |
|
|
collisionTestProps: { |
|
|
sizeScale: 3, |
|
|
sizeMaxPixels: 36 * 2, |
|
|
sizeMinPixels: 18 * 2 |
|
|
}, |
|
|
extensions: [new deck.CollisionFilterExtension()], |
|
|
}); |
|
|
|
|
|
|
|
|
const deckgl = new deck.DeckGL({ |
|
|
container: container, |
|
|
initialViewState: { |
|
|
latitude: 3.6520393, |
|
|
longitude: -1.9593744, |
|
|
zoom: 4.800615646683678 |
|
|
}, |
|
|
controller: true, |
|
|
|
|
|
layers: [pointLayer, labelLayer], |
|
|
|
|
|
|
|
|
getTooltip: ({index}) => hoverData.data.hover_text[index] |
|
|
}); |
|
|
|
|
|
document.getElementById("loading").style.display = "none"; |
|
|
|
|
|
|
|
|
function selectPoints(item, conditional) { |
|
|
var layerId; |
|
|
if (item) { |
|
|
for (var i = 0; i < DATA.length; i++) { |
|
|
if (conditional(i)) { |
|
|
DATA.src.selected[i] = 1; |
|
|
} else { |
|
|
DATA.src.selected[i] = 0; |
|
|
} |
|
|
} |
|
|
layerId = 'selectedPointLayer' + item; |
|
|
} else { |
|
|
for (var i = 0; i < DATA.length; i++) { |
|
|
DATA.src.selected[i] = 1; |
|
|
} |
|
|
layerId = 'dataPointLayer'; |
|
|
} |
|
|
const selectedPointLayer = pointLayer.clone( |
|
|
{ |
|
|
id: layerId, |
|
|
data: DATA, |
|
|
getFilterValue: (object, {index, data}) => data.src.selected[index], |
|
|
filterRange: [1, 2], |
|
|
extensions: [new deck.DataFilterExtension({filterSize: 1})] |
|
|
} |
|
|
); |
|
|
deckgl.setProps( |
|
|
{layers: |
|
|
[selectedPointLayer].concat(deckgl.props.layers.slice(1,)) |
|
|
} |
|
|
); |
|
|
} |
|
|
|
|
|
const search = document.getElementById("search"); |
|
|
search.addEventListener("input", (event) => { |
|
|
const search_term = event.target.value.toLowerCase(); |
|
|
selectPoints(search_term, (i) => hoverData.data.hover_text[i].toLowerCase().includes(search_term)); |
|
|
} |
|
|
); |
|
|
|
|
|
|
|
|
</script> |
|
|
</html> |
