File size: 23,227 Bytes
0f0e560 fea2f7c 0f0e560 1ce83c4 0f0e560 1ce83c4 0f0e560 1ce83c4 0f0e560 1ce83c4 0f0e560 |
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/ArtificialIntelligenceEthics</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/ArtificialIntelligenceEthics
</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/ArtificialIntelligenceEthics/viewer/default/train' target='_blank'>dataset</a> (100 rows) using the column 'text'
</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 = "H4sIAMO8G2cC/13P0QrCMAwF0H/Jcy1N2jRJf0V8qDJkICJTxCn+u7PiJj4FLuQe7voBNyir4Nkis2hM2cE4JeRNMwdTB4e67Q5QoPbg4NzfOyikPjgYoGBKDvbTRXawhcLmoELJ6em+zSEZZooo2JrRi4ZoSYzy0n0a+mvdjTOA5qNyyEmJrEnv9wnK0hykfwg9EYYoUUU/E4JPqjTxnHGRLkM9nk916I6/3LwHrTEcGyPyVTYvkK/cRioBAAA=";
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: -1.6333998,
longitude: -0.58507556,
zoom: 5.8234396956796495
},
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> |