-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
126 lines (107 loc) · 5.06 KB
/
main.js
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
import "bootswatch/dist/flatly/bootstrap.min.css";
import "./style.css";
import Scatterplot from "deepscatter";
// this file is where we configure details about our tile displays (colors, positions, etc.)
import {tileConfig} from './tileconfig.js';
// import { select } from "d3-selection";
let tilesSource = './tiles';
let maxPoints = 2000000;
let zoomBalance = 0.7;
let pointSize = 2;
let backgroundColor = "#FFFFFF";
let layout = 0;
console.log(Object.values(tileConfig.colors)[0]);
let colorScheme = Object.values(tileConfig.colors)[0].encoding;
let xPosition = Object.values(tileConfig.positions)[0].encoding.x;
let yPosition = Object.values(tileConfig.positions)[0].encoding.y;
document.getElementById("tiles-source").value = tilesSource;
document.getElementById("max-points").value = maxPoints;
document.getElementById("zoom-balance").value = zoomBalance;
document.getElementById("point-size").value = pointSize;
document.getElementById("background-color").value = backgroundColor;
// add each key in tileConfig.colors to the color-scheme dropdown
for (const [key, value] of Object.entries(tileConfig.colors)) {
var colorOption = document.createElement("option");
colorOption.text = value.title;
colorOption.value = key;
document.getElementById("color-scheme").appendChild(colorOption);
}
// add each key in tileConfig.positions to the dots-layout dropdown
for (const [key, value] of Object.entries(tileConfig.positions)) {
var positionOption = document.createElement("option");
positionOption.text = value.title;
positionOption.value = key;
document.getElementById("dots-layout").appendChild(positionOption);
}
document.getElementById("update-source-button").addEventListener("click", function () {
// set tileSource equal to the element with id 'tiles-source'
tilesSource = document.getElementById("tiles-source").value;
prefs.source_url = tilesSource;
// remove everything from inside the element with id #deepscatter
document.querySelector('#deepscatter').innerHTML = ``;
const scatterplot = new Scatterplot("#deepscatter");
scatterplot.plotAPI(prefs);
});
document.getElementById("max-points").addEventListener("input", function () {
maxPoints = parseInt(this.value);
scatterplot.plotAPI({max_points: maxPoints})
// Call your function here or do something with the updated value
});
document.getElementById("zoom-balance").addEventListener("input", function () {
zoomBalance = parseFloat(this.value);
scatterplot.plotAPI({zoom_balance: zoomBalance})
// Call your function here or do something with the updated value
});
document.getElementById("point-size").addEventListener("input", function () {
pointSize = parseInt(this.value);
scatterplot.plotAPI({point_size: pointSize})
// Call your function here or do something with the updated value
});
document.getElementById("update-background-color-button").addEventListener("click", function () {
// Call your function here or do something when the button is clicked
backgroundColor = document.getElementById("background-color").value;
prefs.background_color = backgroundColor;
document.querySelector('#deepscatter').innerHTML = ``;
const scatterplot = new Scatterplot("#deepscatter");
scatterplot.plotAPI(prefs);
});
document.getElementById("color-scheme").addEventListener("change", function () {
colorScheme = this.value;
console.log(colorScheme);
scatterplot.plotAPI({encoding: {color: tileConfig.colors[colorScheme].encoding}});
// Call your function here or do something with the updated value
});
document.getElementById("dots-layout").addEventListener("change", function () {
layout = this.value;
// Call your function here or do something with the updated value
scatterplot.plotAPI({encoding: tileConfig.positions[layout].encoding});
});
const prefs = {
source_url: tilesSource, // the output of the quadfeather tiling engine. Note, this could be local, or something that you host somewhere like an s3 bucket
max_points: maxPoints, // a full cap.
alpha: 100, // Target saturation for the full page.
zoom_balance: zoomBalance, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
point_size: pointSize, // Default point size before application of size scaling
background_color: backgroundColor,
tooltip_opacity: 1,
// encoding API based roughly on Vega Lite: https://vega.github.io/vega-lite/docs/encoding.html
encoding: {
x: xPosition,
y: yPosition,
color: colorScheme,
},
};
const scatterplot = new Scatterplot("#deepscatter");
scatterplot.plotAPI(prefs);
// if tileConfig.geographic is true, then print hello world
if (tileConfig.geographic) {
scatterplot.tooltip_html = (datum) => {
var img_link = `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/static/${datum.lon},${datum.lat},15,0/256x256?access_token=pk.eyJ1IjoicGxvdGxpbmUiLCJhIjoiY2xqajRvYmZ2MDVhMzNlbzM5Z3A0N2lhYiJ9.aiP35po9eHbKfqMWVnuD4A`
return `<img src="${img_link}"></img>`;
}
} else {
scatterplot.tooltip_html = (datum) => {
return `<p>${datum}</p>`;
}
};
// setupCounter(document.querySelector('#counter'))