|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|
|
<title>infinite-dataset-hub/CultureInspiredPrompts</title> |
|
|
|
|
|
|
|
|
<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: Montserrat Thin; |
|
|
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: Montserrat Thin; |
|
|
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: Montserrat Thin; |
|
|
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:Montserrat Thin;font-size:36pt;color:#000000"> |
|
|
infinite-dataset-hub/CultureInspiredPrompts |
|
|
</span><br/> |
|
|
<span style="font-family:Montserrat Thin;font-size:18pt;color:#777777"> |
|
|
|
|
|
</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 = "H4sIAC2SEWcC/22QPU/DMBCG/0p1c7B8/spdNoQYkBgQK2FwU6uKlLqVk0YtiP+Om9AWUba7G97nufftEw5Q3TmhkE0ppTJYwDFfUFhryZGVzhTQ+WXooIKHfTfsk+/qmKc2+nTMU+jCMvmh3cYeCujbjwCVyomSHBpGVgUkqNgVsIYKVY5bQlXmq4fKma9iVjCClEYutTM0K0hhtbKSSWr6T+ElhT6kcSIvfFzV8fGwy7c+71cREnLiE/3wy4mPVt8IGEeGLRlL5w6kcVIza+JbgcVr6HehGeqY2Yv71bhtfHO8gPEMtjiDcX4clfwDtgKJtOPSzt2j0Gg0o8TySn2KTbfv2zHU8Tn4FNu4zv/GsU3buAlx+FW9EiWZU4JhngxQy0nh1Hk24Ev17992EemY/wEAAA=="; |
|
|
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: "Montserrat Thin", |
|
|
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: -0.5501559, |
|
|
longitude: -5.311011, |
|
|
zoom: 6.206194736802086 |
|
|
}, |
|
|
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> |
