|
|
|
|
|
<!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/////0AUAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAASAQAAAQAAAABAAAADAAAAAgADAAEAAgACAAAACAEAAAEAAAAEAQAAHsiaW5kZXhfY29sdW1ucyI6IFt7ImtpbmQiOiAicmFuZ2UiLCAibmFtZSI6IG51bGwsICJzdGFydCI6IDAsICJzdG9wIjogMTAwLCAic3RlcCI6IDF9XSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogIngiLCAiZmllbGRfbmFtZSI6ICJ4IiwgInBhbmRhc190eXBlIjogImZsb2F0MzIiLCAibnVtcHlfdHlwZSI6ICJmbG9hdDMyIiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJ5IiwgImZpZWxkX25hbWUiOiAieSIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiciIsICJmaWVsZF9uYW1lIjogInIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiZyIsICJmaWVsZF9uYW1lIjogImciLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYiIsICJmaWVsZF9uYW1lIjogImIiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiYSIsICJmaWVsZF9uYW1lIjogImEiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAic2VsZWN0ZWQiLCAiZmllbGRfbmFtZSI6ICJzZWxlY3RlZCIsICJwYW5kYXNfdHlwZSI6ICJ1aW50OCIsICJudW1weV90eXBlIjogInVpbnQ4IiwgIm1ldGFkYXRhIjogbnVsbH1dLCAiY3JlYXRvciI6IHsibGlicmFyeSI6ICJweWFycm93IiwgInZlcnNpb24iOiAiMTcuMC4wIn0sICJwYW5kYXNfdmVyc2lvbiI6ICIyLjIuMiJ9AAAAAAYAAABwYW5kYXMAAAcAAAAoAQAA7AAAALwAAACQAAAAZAAAADgAAAAEAAAABP///wAAAQIQAAAAHAAAAAQAAAAAAAAACAAAAHNlbGVjdGVkAAAAAGL///8IAAAANP///wAAAQIQAAAAFAAAAAQAAAAAAAAAAQAAAGEAAACK////CAAAAFz///8AAAECEAAAABQAAAAEAAAAAAAAAAEAAABiAAAAsv///wgAAACE////AAABAhAAAAAUAAAABAAAAAAAAAABAAAAZwAAANr///8IAAAArP///wAAAQIQAAAAGAAAAAQAAAAAAAAAAQAAAHIABgAIAAQABgAAAAgAAADY////AAABAxAAAAAUAAAABAAAAAAAAAABAAAAeQAAAMr///8AAAEAEAAUAAgABgAHAAwAAAAQABAAAAAAAAEDEAAAABgAAAAEAAAAAAAAAAEAAAB4AAYACAAGAAYAAAAAAAEAAAAAAP////+oAQAAFAAAAAAAAAAMABYABgAFAAgADAAMAAAAAAMEABgAAAAoBQAAAAAAAAAACgAYAAwABAAIAAoAAAD8AAAAEAAAAGQAAAAAAAAAAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAQAAAAAAAJABAAAAAAAAAAAAAAAAAACQAQAAAAAAAJABAAAAAAAAIAMAAAAAAAAAAAAAAAAAACADAAAAAAAAZAAAAAAAAACIAwAAAAAAAAAAAAAAAAAAiAMAAAAAAABkAAAAAAAAAPADAAAAAAAAAAAAAAAAAADwAwAAAAAAAGQAAAAAAAAAWAQAAAAAAAAAAAAAAAAAAFgEAAAAAAAAZAAAAAAAAADABAAAAAAAAAAAAAAAAAAAwAQAAAAAAABkAAAAAAAAAAAAAAAHAAAAZAAAAAAAAAAAAAAAAAAAAGQAAAAAAAAAAAAAAAAAAABkAAAAAAAAAAAAAAAAAAAAZAAAAAAAAAAAAAAAAAAAAGQAAAAAAAAAAAAAAAAAAABkAAAAAAAAAAAAAAAAAAAAZAAAAAAAAAAAAAAAAAAAALCgyb8wwI2/0HV6PwBsYT0InI2/KPxuv9gkJ7+QqiA/MBENv6hylr9oKt2/QF2TvxB/Tj+A2KY+gMCRvzgp3b+Q2kO/2NtOP0DULr9gxb2/QKN0vpiHcb+4LZA/gOSSPQBxo7+YLzW/2M5/vyCvi74AtRg+EEe1v0CY6L/g+Pe+AN4iP5AECb88iNi/QB+RvlBmv7+wOSw/oJTjPpAO77989aG/AKfKv4Cooj9gn+2+mMePvyBQZ7+wI4K/mFWqv4A8FT+gmaW/vFKOv0zInr/Q1I2/AFiQvTjXrr9aUAHAAI7wvrjAjD+gWBI/cKHFv0hoGr8AvrW/2DOQP4C6Hb7A9uK/6ASpv/CqG78wHxu/oGSdPoBw7b9oJtG/oExrv7BblT+wkhM/CBbOv/BlC78grsq/QK/8PgBMfT2A+HO/4PTGv+D4E79w3HQ/AP8GPpAKz784nFi/0EXhv+i7jj/A2B0/pHDLv7Ahg77gdMu/MBypPwBk773IeJq/oDVTv+DKrb84fWc/ENmsPpDnn78UlZTAIA/TvgBPcL+41NE/cOanwHRngsAAcHi+4Hixv4hT7D9QnIvApExxwEDUF7+gyGW/aIwVQPAdlMByioTA8Gp7PwBTkr9ACfg/uJuYwMRpjsDAGRW/0KlvvzjJzz/ol7DA6Lydv6DmtD4gAZm/wBTiPwh2psCOIIfAOO+4PzDDlb9wPPQ/eHiWwIHhkMDQRgy/8LUAv9gqDEBcZYLAlHeAwKAPVr9wH6a/8LfuP04IqsA84IHAgOSVvQiFRMAoGA5AhISzwHCbZ8CgiIa/AOE4v6jsBkDwO6bAOk6XwOBbyb5QdS2/OGcNQFBg0r/o+XTAcLQUv+ippr/w6qQ/skGlwFzkdcCASfO9kN2RwNjfnj+soafAeuiJwMBCmz7g0nG/DDETQFgxbcDwTce/AEgbv6B3Vb8o9as/oA2gwBCCdcDgPq4/gHV1vzgDyz/0LabA4pWMwIAug78MXbq/sPMIQJCxrsD40Y/AIMynvlxCiL/Yj+E/QLCVv3RTlsDAI8q+4CYLv5AvpD+cR6vA6tfqgurq1+qC6urX6oLq6oLqgurq1+qC6urq6oLq6oLqgurq1+rq6urX6oLq6tfqgurq19eC6urq6oLq6tfqgurq1+rq6urX6oLq6tfq6urqguqC6urX6oLq6tfqgurq1+qC6gAAAADRXtF50dFe0XnR0V7RedHRedF50dFe0XnR0dHRedHRedF50dFe0dHR0V7RedHRXtF50dFeXnnR0dHRedHRXtF50dFe0dHR0V7RedHRXtHR0dF50XnR0V7RedHRXtF50dFe0XnRAAAAAKaMpuqmpoym6qamjKbqpqbqpuqmpoym6qampqbqpqbqpuqmpoympqamjKbqpqaMpuqmpoyM6qampqbqpqaMpuqmpoympqamjKbqpqaMpqampuqm6qamjKbqpqaMpuqmpoym6qYAAAAAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tAAAAAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAAAAAP////8AAAAAEAAAAAwAFAAGAAgADAAQAAwAAAAAAAQAPAAAACgAAAAEAAAAAQAAAOAFAAAAAAAAsAEAAAAAAAAoBQAAAAAAAAAAAAAAAAAAAAAKAAwAAAAEAAgACgAAAEgEAAAEAAAAAQAAAAwAAAAIAAwABAAIAAgAAAAgBAAABAAAABAEAAB7ImluZGV4X2NvbHVtbnMiOiBbeyJraW5kIjogInJhbmdlIiwgIm5hbWUiOiBudWxsLCAic3RhcnQiOiAwLCAic3RvcCI6IDEwMCwgInN0ZXAiOiAxfV0sICJjb2x1bW5faW5kZXhlcyI6IFt7Im5hbWUiOiBudWxsLCAiZmllbGRfbmFtZSI6IG51bGwsICJwYW5kYXNfdHlwZSI6ICJ1bmljb2RlIiwgIm51bXB5X3R5cGUiOiAib2JqZWN0IiwgIm1ldGFkYXRhIjogeyJlbmNvZGluZyI6ICJVVEYtOCJ9fV0sICJjb2x1bW5zIjogW3sibmFtZSI6ICJ4IiwgImZpZWxkX25hbWUiOiAieCIsICJwYW5kYXNfdHlwZSI6ICJmbG9hdDMyIiwgIm51bXB5X3R5cGUiOiAiZmxvYXQzMiIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAieSIsICJmaWVsZF9uYW1lIjogInkiLCAicGFuZGFzX3R5cGUiOiAiZmxvYXQzMiIsICJudW1weV90eXBlIjogImZsb2F0MzIiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInIiLCAiZmllbGRfbmFtZSI6ICJyIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImciLCAiZmllbGRfbmFtZSI6ICJnIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImIiLCAiZmllbGRfbmFtZSI6ICJiIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogImEiLCAiZmllbGRfbmFtZSI6ICJhIiwgInBhbmRhc190eXBlIjogInVpbnQ4IiwgIm51bXB5X3R5cGUiOiAidWludDgiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogInNlbGVjdGVkIiwgImZpZWxkX25hbWUiOiAic2VsZWN0ZWQiLCAicGFuZGFzX3R5cGUiOiAidWludDgiLCAibnVtcHlfdHlwZSI6ICJ1aW50OCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjE3LjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMi4yLjIifQAAAAAGAAAAcGFuZGFzAAAHAAAAKAEAAOwAAAC8AAAAkAAAAGQAAAA4AAAABAAAAAT///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, |
|
|
|
|
|
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> |
