File size: 21,812 Bytes
5d1ad6f 9fc4ee6 5d1ad6f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 |
<!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,
// CollideExtension options
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> |