File size: 25,537 Bytes
8b035aa 782aedc 8b035aa |
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 290 291 292 293 294 |
<!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,
// 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: 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> |