brian/d3-spring-model
1
0
Fork 0
Code Issues 3 Releases 4 Activity

Init from given files

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2017-11-07 21:33:16 +00:00
commit 61f2be55fe
45 changed files with 34460 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
examples/d3-force-neighbourSampling-papaparsing.html Normal file
View File

@@ -0,0 +1,291 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
h1 {
text-align: center;
margin: 10px 0 10px 0;
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
/*.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}*/
circle:hover {
fill: #8B0000;
opacity: 0.8;
}
.notSelected {
fill: #999;
opacity: 0.8;
}
.highlighted {
fill: black;
}
#svg {
border-style: solid;
margin: auto;
}
.left {
float: left;
width: 32%;
}
.controls {
flex-basis: 200px;
padding: 0 5px;
}
.controls input[type="range"] {
margin: 0 5% 0.5em 5%;
width: 90%;
}
.multiplier {
margin: 10px 0 10px 0;
}
.parameters {
margin: 10px 0 10px 30px;
}
.checkbox {
margin: 10px 0 10px 0;
}
.start {
text-align: center;
}
div.tooltip {
position: absolute;
text-align: center;
padding: 5px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
}
</style>
<body>
<h1>Evaluation</h1>
<svg id="svg" width="100%" height="600">
<div class="left controls">
<div class="input">
<input type="file" id="csv-file" name="files">
</div>
<div class="multiplier">
<label title="The size of the nodes">
Node size
<output id="nodeSizeSliderOutput">10</output>
<input type="range" min="5" max="200" value="10" step="5" oninput="d3.select('#nodeSizeSliderOutput').text(value); NODE_SIZE=value; d3.selectAll('circle').attr('r', value)">
</label>
<br/>
<label title="The number that distance is multiplied by in order to improve the visibility of the graph">
distanceMultiplier
<output id="distanceMultiplierSliderOutput">50</output>
<input type="range" min="5" max="1000" value="50" step="5" oninput="d3.select('#distanceMultiplierSliderOutput').text(value); MULTIPLIER=value;">
</label>
<br/>
<label title="Number of iterations before the simulation is stopped">
Iterations
<output id="iterationsSliderOutput">300</output>
<input type="range" min="5" max="5000" value="300" step="5" oninput="d3.select('#iterationsSliderOutput').text(value); ITERATIONS=value;">
</label>
<br/>
<label title="Attribute used for coloring nodes">
Color attribute
<select id="color_attr" onchange="COLOR_ATTRIBUTE=value; colorToAttribute();">
</select>
</label>
</div>
<div class="checkbox">
<label title="js/">
Rendering
<input type="checkbox" checked onclick="rendering=!rendering;">
</label>
</div>
<div class="start">
<button id="startSimulation" form="algorithmForm">Start</button>
<button id="pauseButton" onclick="pauseUnPause()">Pause</button>
<button onclick="stopSimulation()">Stop</button>
</div>
</div>
<div class="left">
<p>Select algorithm:</p>
<div id="algorithms">
<input id="HLButton" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startHybridSimulation)">Hybrid
layout
<br>
<div id="HLParameters" class="parameters" style="display:none">
<div id="pivots">
<input id="BFButton" type="radio" name="pivots" checked="checked" onclick="PIVOTS=false;">Brute-force<br>
<input id="PButton" type="radio" name="pivots" onclick="PIVOTS=true;">Pivots<br>
<div id="numPivots" class="parameters" style="display:none">
<label title="The number of pivots">
Number of Pivots
<output id="numPivotsSliderOutput">3</output><br/>
<input type="range" min="1" max="50" value="3" step="1" oninput="d3.select('#numPivotsSliderOutput').text(value); NUM_PIVOTS=value;">
</label>
</div>
</div>
<br/>
<label title="Number of iterations done at the end">
Full iterations
<output id="fullIterationsSliderOutput">20</output><br/>
<input type="range" min="1" max="100" value="20" step="1" oninput="d3.select('#fullIterationsSliderOutput').text(value); FULL_ITERATIONS=value;">
</label>
<br/>
<label title="NeighbourSize">
Neighbour Set
<output id="hlneighbourSizeSliderOutput">6</output><br/>
<input type="range" min="1" max="100" value="6" step="1" oninput="d3.select('#hlneighbourSizeSliderOutput').text(value); NEIGHBOUR_SIZE=value;">
</label>
<br/>
<label title="SampleSize">
Sample Set
<output id="hlsampleSizeSliderOutput">3</output><br/>
<input type="range" min="1" max="100" value="3" step="1" oninput="d3.select('#hlsampleSizeSliderOutput').text(value); SAMPLE_SIZE=value;">
</label>
</div>
<input id="NSButton" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startNeighbourSamplingSimulation)">Neighbour
and Sampling<br>
<div id="NSParameters" class="parameters" style="display:none">
<label title="NeighbourSize">
Neighbour Set
<output id="neighbourSizeSliderOutput">6</output><br/>
<input type="range" min="1" max="100" value="6" step="1" oninput="d3.select('#neighbourSizeSliderOutput').text(value); NEIGHBOUR_SIZE=value;">
</label>
<br/>
<label title="SampleSize">
Sample Set
<output id="sampleSizeSliderOutput">3</output><br/>
<input type="range" min="1" max="100" value="3" step="1" oninput="d3.select('#sampleSizeSliderOutput').text(value); SAMPLE_SIZE=value;">
</label>
<br/>
<label title="DistanceRange">
Distance Range
<output id="distanceRangeSliderOutput">10</output><br/>
<input type="range" min="1" max="100" value="10" step="1" oninput="d3.select('#distanceRangeSliderOutput').text(value); SELECTED_DISTANCE=value;">
</label>
</div>
<input class="noParameters" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startLinkSimulation)">Link
force in D3<br>
<input class="noParameters" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startBarnesHutSimulation)">Barnes-Hut<br>
<input id="tSNEButton" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', starttSNE)">t-SNE<br>
<div id="tSNEParameters" class="parameters" style="display:none">
<label title="Perplexity">
Perplexity
<output id="perplexitySliderOutput">30</output><br/>
<input type="range" min="1" max="500" value="30" step="1" oninput="d3.select('#perplexitySliderOutput').text(value); PERPLEXITY=value;">
</label>
<br/>
<label title="LearningRate">
Learning Rate
<output id="learningRateSliderOutput">10</output><br/>
<input type="range" min="1" max="500" value="10" step="1" oninput="d3.select('#learningRateSliderOutput').text(value); LEARNING_RATE=value;">
</label>
</div>
</div>
</div>
<div class="left">
<p>Select distance function:</p>
<div id="distance">
<input type="radio" name="distance" onclick="distanceFunction=calculateDistance"> General<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateEuclideanDistance"> Euclidean<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateManhattanDistance"> Manhattan<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateJaccardDissimilarity"> Jaccard<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateDiceDissimilarity"> Dice<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateCosineSimilarity"> Cosine<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateDistancePoker"> Poker Hands<br>
</div>
</div>
</svg>
</body>
<!-- Load the files and libraries used. -->
<script src="js/lib/d3.v4.min.js"></script>
<script src="js/lib/papaparse.js"></script>
<script src="js/lib/jquery-3.1.1.js"></script>
<script src="js/lib/intercom.js"></script>
<script src="../build/d3-neighbour-sampling.js"></script>
<script src="js/src/neighbourSampling-papaparsing.js"></script>
<script src="js/distances/distancePokerHands.js"></script>
<script src="js/distances/distance.js"></script>
<script src="js/distances/euclideanDistance.js"></script>
<script src="js/distances/euclideanDistanceInTSNE.js"></script>
<script src="js/distances/manhattanDistance.js"></script>
<script src="js/distances/jaccardDissimilarity.js"></script>
<script src="js/distances/diceDissimilarity.js"></script>
<script src="js/distances/cosineSimilarity.js"></script>
<script src="js/distances/normalization.js"></script>
<script src="js/distances/numeric.js"></script>
<script>
$(document).ready(function () {
$("#csv-file").change(function (d) {
parseFile(d);
$("#color_attr option").remove();
$("#pauseButton").text("Pause");
paused = false;
});
$("#startSimulation").click(function () {
$("#pauseButton").text("Pause");
paused = false;
});
$("#tSNEButton").click(function () {
$(".parameters").hide();
$("#tSNEParameters").show();
});
$("#NSButton").click(function () {
$(".parameters").hide();
$("#NSParameters").show();
});
$("#HLButton").click(function () {
$(".parameters").hide();
$("#HLParameters").show();
if ($("#PButton").is(":checked")) {
$("#numPivots").show();
}
});
$("#BFButton").click(function () {
$("#numPivots").hide();
});
$("#PButton").click(function () {
$("#numPivots").show();
});
$(".noParameters").click(function () {
$(".parameters").hide();
});
});
</script>
</html>

110
examples/distribution_bar_graph.html Normal file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* set the CSS */
/* .line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
} */
.chart rect {
fill: steelblue;
stroke: none;
}
text {
font-size: 12px;
}
</style>
<body>
<!-- <svg width="960" height="600"></svg> -->
<!-- load the d3.js library -->
<svg class="chart"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/lib/intercom.js"></script>
<script>
var data,
xDomain,
yDomain;
var intercom = Intercom.getInstance();
intercom.on("passedData", function (d) {
data = [];
var tmp = d.distribution;
for (var i = 0; i < d.l; i++) {
data.push({"index": i, "size": tmp[i]});
}
xDomain = d.l;
yDomain = d.maxSize;
showData(data);
});
// set the dimensions and margins of the graph
var margin = { top: 20, right: 20, bottom: 90, left: 70 },
width = 1500 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function showData(data) {
d3.selectAll(".bar").remove();
d3.selectAll(".xAxis").remove();
d3.selectAll(".yAxis").remove();
// set the ranges
var x = d3.scaleLinear().range([0, width]).domain([0, xDomain]);
var y = d3.scaleLinear().range([height, 0]).domain([0, yDomain]);
var barWidth = width / data.length;
// Add the X Axis
chart.append("g")
.attr("class", "xAxis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
chart.append("g")
.attr("class", "yAxis")
.call(d3.axisLeft(y));
chart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.index); })
.attr("y", function (d) { return y(d.size); })
.attr("height", function (d) { return height - y(d.size); })
.attr("width", barWidth);
}
// Add x axis label
chart.append("text")
.attr("transform",
"translate(" + (width / 2) + " ," +
(height + margin.top + 30) + ")")
.style("text-anchor", "middle")
.style("font-size", "22px")
.text("Points");
// Add y axis label
chart.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-size", "22px")
.text("Number of neighbours");
</script>
</body>

39
examples/js/distances/cosineSimilarity.js Normal file
View File

@@ -0,0 +1,39 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @return {number} the distance between source and target nodes.
*/
function calculateCosineSimilarity(source, target, properties, normArgs) {
var numerator = 0.0;
// console.log(properties);
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (property.toLowerCase() !== "class" && property.toLowerCase() !== "app" && property.toLowerCase() !== "user" && property.toLowerCase() !== "weekday") {
var s = source[property],
t = target[property];
numerator += s * t;
}
}
let denominator = squareRooted(source, properties, normArgs) * squareRooted(target, properties, normArgs);
// console.log(Math.abs(numerator / denominator));
return Math.abs(numerator / denominator);
}
function squareRooted(node, properties, normArgs) {
var sum = 0.0;
for (var i = 0, s; i < properties.length; i++) {
var s = node[properties[i]];
sum += s * s;
}
return Math.sqrt(sum);
}

28
examples/js/distances/diceDissimilarity.js Normal file
View File

@@ -0,0 +1,28 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @return {number} the distance between source and target nodes.
*/
function calculateDiceDissimilarity(source, target, properties, normArgs) {
var notShared = 0.0;
// console.log(properties);
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (property.toLowerCase() !== "class" && property.toLowerCase() !== "app" && property.toLowerCase() !== "user" && property.toLowerCase() !== "weekday") {
var s = source[property],
t = target[property];
if (s !== t) {
notShared++;
}
}
}
// console.log(Math.sqrt(sumDiff)/cols);
// console.log(cols);
return notShared / (notShared + 2 * (properties.length - notShared));
}

70
examples/js/distances/distance.js Normal file
View File

@@ -0,0 +1,70 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @param {object} normArgs - the normalization arguments.
* @return {number} the distance between source and target nodes.
*/
function calculateDistance(source, target, properties, normArgs) {
var val1 = 0.0, val2 = 0.0,
sumDiff = 0.0,
ordDiff = 1.0,
ORD_FACTOR = 0.75,
cols = 0,
average = normArgs.avg,
sigma = normArgs.sig,
st_dev = normArgs.st_d;
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (source.hasOwnProperty(property) && target.hasOwnProperty(property)
&& property.toLowerCase() !== "index" ) {
var s = source[property],
t = target[property];
// Comparing Floats and Integers
if ((isNumeric(s) && isNumeric(t))) {
val1 = parseFloat(s);
val2 = parseFloat(t);
if (sigma[i] != 0) {
val1 = (val1 - average[i]) / (st_dev[i] * sigma[i]);
val2 = (val2 - average[i]) / (st_dev[i] * sigma[i]);
}
sumDiff += (val1-val2) * (val1-val2);
cols++;
// Comparing strings
} else if (/[a-zA-Z]/.test(s) && /[a-zA-Z]/.test(t) && s === t) {
ordDiff *= ORD_FACTOR;
cols++;
} else {
// Comparing Dates
var parsedDateS = Date.parse(s);
var parsedDateT = Date.parse(t);
if (isNaN(s) && !isNaN(parsedDateS)
&& isNaN(t) && !isNaN(parsedDateT)) {
val1 = parsedDateS.valueOf(),
val2 = parsedDateT.valueOf();
if (sigma[i] !== 0) {
val1 = (val1 - average[i]) / (st_dev[i] * sigma[i]);
val2 = (val2 - average[i]) / (st_dev[i] * sigma[i]);
}
sumDiff += (val1-val2) * (val1-val2);
cols++;
}
}
}
}
sumDiff = Math.sqrt(sumDiff);
sumDiff *= ordDiff;
if (cols > 0) {
sumDiff *= properties.length/cols;
}
console.log(sumDiff);
return sumDiff;
}

43
examples/js/distances/distancePokerHands.js Normal file
View File

@@ -0,0 +1,43 @@
/**
* The distance function that is specifically made for Poker Hands data set.
* The suit of the cards does not play an important role when finding
* the differences in poker hands so it was not used in calculations.
* @param {node} source
* @param {node} target
* @return {number} the distance between source and target nodes.
*/
function calculateDistancePoker(source, target) {
var sumDiff = 0.0,
ordDiff = 1.0,
ORD_FACTOR = 1.5,
cards = ["C1", "C2", "C3", "C4", "C5"],
cols = 0;
// Iterate through cards
for (var i = 0; i < cards.length; i++) {
card = cards[i];
if (source.hasOwnProperty(card) && target.hasOwnProperty(card)) {
var s = parseInt(source[card]),
t = parseInt(target[card]);
// Calculate the squared difference.
sumDiff += (s-t) * (s-t);
}
}
// Class of poker hands describes the similarities the best
// so give it more priority than checking the differences between cards.
if (source.hasOwnProperty("CLASS") && target.hasOwnProperty("CLASS")) {
var s = parseInt(source["CLASS"]),
t = parseInt(target["CLASS"]);
// If classes differ, then scale them by a factor.
if (s !== t) {
ordDiff *= (ORD_FACTOR * (Math.abs(s-t)))
}
}
sumDiff = Math.sqrt(sumDiff);
sumDiff *= ordDiff;
return sumDiff;
}

32
examples/js/distances/euclideanDistance.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @return {number} the distance between source and target nodes.
*/
function calculateEuclideanDistance(source, target, properties, normArgs) {
var sumDiff = 0.0;
// console.log(normArgs);
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (property.toLowerCase() !== "class" && property.toLowerCase() !== "app" && property.toLowerCase() !== "user" && property.toLowerCase() !== "weekday") {
var s = source[property],
t = target[property];
if (normArgs.sig[i] !== 0) {
s = (s - normArgs.avg[i]) / (2.0 * normArgs.sig[i]);
t = (t - normArgs.avg[i]) / (2.0 * normArgs.sig[i]);
}
sumDiff += (s - t) * (s - t);
}
}
// console.log(Math.sqrt(sumDiff)/cols);
// console.log(cols);
// sumDiff = Math.sqrt(sumDiff);
// console.log(sumDiff);
return Math.sqrt(sumDiff);
}

33
examples/js/distances/euclideanDistanceInTSNE.js Normal file
View File

@@ -0,0 +1,33 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @return {number} the distance between source and target nodes.
*/
function calculateEuclideanDistanceTSNE(source, target, properties, normArgs) {
var dotProduct = 0.0,
sumX = 0.0,
sumY = 0.0;
// console.log(normArgs);
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (source.hasOwnProperty(property) && target.hasOwnProperty(property) &&
property.toLowerCase() !== "class") {
var s = source[property],
t = target[property];
dotProduct += s * t;
sumX += s * s;
sumY += t * t;
}
}
// console.log("Dot", dotProduct);
// console.log((-2 * dotProduct) + sumX + sumY);
return -2 * dotProduct + sumX + sumY;
}

28
examples/js/distances/jaccardDissimilarity.js Normal file
View File

@@ -0,0 +1,28 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @return {number} the distance between source and target nodes.
*/
function calculateJaccardDissimilarity(source, target, properties, normArgs) {
var notShared = 0.0;
// console.log(properties);
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (property.toLowerCase() !== "class" && property.toLowerCase() !== "app" && property.toLowerCase() !== "user" && property.toLowerCase() !== "weekday") {
var s = source[property],
t = target[property];
if (s !== t) {
notShared++;
}
}
}
// console.log(Math.sqrt(sumDiff)/cols);
// console.log(cols);
return notShared / properties.length;
}

34
examples/js/distances/manhattanDistance.js Normal file
View File

@@ -0,0 +1,34 @@
/**
* Calculate the distances by using the numbers, strings and dates.
* @param {node} source
* @param {node} target
* @param {array} properties - the properties of the nodes.
* @return {number} the distance between source and target nodes.
*/
function calculateManhattanDistance(source, target, properties, normArgs) {
var sum = 0.0,
cols = 0;
// console.log(properties);
// Iterate through every column of data
for (var i = 0; i < properties.length; i++) {
property = properties[i];
if (property.toLowerCase() !== "class" && property.toLowerCase() !== "app" && property.toLowerCase() !== "user" && property.toLowerCase() !== "weekday") {
var s = source[property],
t = target[property];
if (s !== t) {
cols++;
}
if (normArgs.sig[i] !== 0) {
s = (s - normArgs.avg[i]) / (2.0 * normArgs.sig[i]);
t = (t - normArgs.avg[i]) / (2.0 * normArgs.sig[i]);
}
sum += Math.abs(s - t);
}
}
// console.log(Math.sqrt(sumDiff)/cols);
return sum * (cols / properties.length);
}

93
examples/js/distances/normalization.js Normal file
View File

@@ -0,0 +1,93 @@
/**
* Calculate the values that are used for normalizing the data.
* @param {array} nodes
* @return {object} that contains the normalization parameters.
*/
function calculateNormalization(nodes) {
var STANDARD_DEV = 2.0,
properties = Object.keys(nodes[0]),
sums = calculateSums(nodes, properties),
average = [],
sigma = [];
// For each property, calculate mean and sigma.
for (var i = 0; i < properties.length; i++) {
var avg = sums.sumOfVal[i] / nodes.length;
average[i] = avg;
sigma[i] = Math.sqrt((sums.sumOfSq[i] - (nodes.length * Math.pow(avg, 2))) / nodes.length);
}
return {
avg: average,
sig: sigma,
st_d: standardDevation(nodes, properties, average)
};
}
function standardDevation(nodes, properties, avg) {
var stDev = new Array(properties.length).fill(0)
for (var i = 0; i < properties.length; i++) {
var sum = 0;
nodes.forEach(function (node) {
var val = node[properties[i]];
var parsedDate = Date.parse(val);
var propAvg = avg[i];
if (isNaN(val) && !isNaN(parsedDate)) {
val = parsedDate.valueOf();
} else if (isNumeric(val)) {
val = parseFloat(val);
// Ignore the strings.
} else {
val = 0;
}
sum += Math.pow(val - propAvg, 2);
});
stDev[i] = Math.sqrt(sum/nodes.length);
}
return stDev;
}
// Calculate the sum of values and the squared sum
/**
* Calculate the sums of each property.
* @param {array} nodes
* @param {array} properties - list of properties
* @return {object} that contains arrays with sum of values
* and the squared sums.
*/
function calculateSums(nodes, properties) {
var sumOfValues = new Array(properties.length).fill(0),
sumOfSquares = new Array(properties.length).fill(0);
// Calculate the sums for each node.
nodes.forEach(function (node) {
for (var i = 0; i < properties.length; i++) {
var val = node[properties[i]];
var parsedDate = Date.parse(val);
if (isNaN(val) && !isNaN(parsedDate)) {
sumOfValues[i] += parsedDate.valueOf();
sumOfSquares[i] += Math.pow(parsedDate.valueOf(), 2);
} else if (isNumeric(val)) {
sumOfValues[i] += parseFloat(val);
sumOfSquares[i] += Math.pow(parseFloat(val), 2);
// Ignore the strings.
} else {
sumOfValues[i] += 0;
sumOfSquares[i] += 0;
}
}
});
return {
sumOfVal: sumOfValues,
sumOfSq: sumOfSquares
};
}

8
examples/js/distances/numeric.js Normal file
View File

@@ -0,0 +1,8 @@
/**
* Check if the object (string, number, etc.) contains a number.
* @param {object} n - object to check.
* @return {Boolean} true, if it is a number, false otherwise.
*/
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}

16866
examples/js/lib/d3.v4.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

8
examples/js/lib/d3.v4.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

413
examples/js/lib/intercom.js Normal file
View File

@@ -0,0 +1,413 @@
/*! intercom.js | https://github.com/diy/intercom.js | Apache License (v2) */
var Intercom = (function() {
// --- lib/events.js ---
var EventEmitter = function() {};
EventEmitter.createInterface = function(space) {
var methods = {};
methods.on = function(name, fn) {
if (typeof this[space] === 'undefined') {
this[space] = {};
}
if (!this[space].hasOwnProperty(name)) {
this[space][name] = [];
}
this[space][name].push(fn);
};
methods.off = function(name, fn) {
if (typeof this[space] === 'undefined') return;
if (this[space].hasOwnProperty(name)) {
util.removeItem(fn, this[space][name]);
}
};
methods.trigger = function(name) {
if (typeof this[space] !== 'undefined' && this[space].hasOwnProperty(name)) {
var args = Array.prototype.slice.call(arguments, 1);
for (var i = 0; i < this[space][name].length; i++) {
this[space][name][i].apply(this[space][name][i], args);
}
}
};
return methods;
};
var pvt = EventEmitter.createInterface('_handlers');
EventEmitter.prototype._on = pvt.on;
EventEmitter.prototype._off = pvt.off;
EventEmitter.prototype._trigger = pvt.trigger;
var pub = EventEmitter.createInterface('handlers');
EventEmitter.prototype.on = function() {
pub.on.apply(this, arguments);
Array.prototype.unshift.call(arguments, 'on');
this._trigger.apply(this, arguments);
};
EventEmitter.prototype.off = pub.off;
EventEmitter.prototype.trigger = pub.trigger;
// --- lib/localstorage.js ---
var localStorage = window.localStorage;
if (typeof localStorage === 'undefined') {
localStorage = {
getItem : function() {},
setItem : function() {},
removeItem : function() {}
};
}
// --- lib/util.js ---
var util = {};
util.guid = (function() {
var S4 = function() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return function() {
return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
};
})();
util.throttle = function(delay, fn) {
var last = 0;
return function() {
var now = (new Date()).getTime();
if (now - last > delay) {
last = now;
fn.apply(this, arguments);
}
};
};
util.extend = function(a, b) {
if (typeof a === 'undefined' || !a) { a = {}; }
if (typeof b === 'object') {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
}
return a;
};
util.removeItem = function(item, array) {
for (var i = array.length - 1; i >= 0; i--) {
if (array[i] === item) {
array.splice(i, 1);
}
}
return array;
};
// --- lib/intercom.js ---
/**
* A cross-window broadcast service built on top
* of the HTML5 localStorage API. The interface
* mimic socket.io in design.
*
* @author Brian Reavis <brian@thirdroute.com>
* @constructor
*/
var Intercom = function() {
var self = this;
var now = (new Date()).getTime();
this.origin = util.guid();
this.lastMessage = now;
this.bindings = [];
this.receivedIDs = {};
this.previousValues = {};
var storageHandler = function() { self._onStorageEvent.apply(self, arguments); };
if (window.attachEvent) { document.attachEvent('onstorage', storageHandler); }
else { window.addEventListener('storage', storageHandler, false); };
};
Intercom.prototype._transaction = function(fn) {
var TIMEOUT = 1000;
var WAIT = 20;
var self = this;
var executed = false;
var listening = false;
var waitTimer = null;
var lock = function() {
if (executed) return;
var now = (new Date()).getTime();
var activeLock = parseInt(localStorage.getItem(INDEX_LOCK) || 0);
if (activeLock && now - activeLock < TIMEOUT) {
if (!listening) {
self._on('storage', lock);
listening = true;
}
waitTimer = window.setTimeout(lock, WAIT);
return;
}
executed = true;
localStorage.setItem(INDEX_LOCK, now);
fn();
unlock();
};
var unlock = function() {
if (listening) { self._off('storage', lock); }
if (waitTimer) { window.clearTimeout(waitTimer); }
localStorage.removeItem(INDEX_LOCK);
};
lock();
};
Intercom.prototype._cleanup_emit = util.throttle(100, function() {
var self = this;
this._transaction(function() {
var now = (new Date()).getTime();
var threshold = now - THRESHOLD_TTL_EMIT;
var changed = 0;
var messages = JSON.parse(localStorage.getItem(INDEX_EMIT) || '[]');
for (var i = messages.length - 1; i >= 0; i--) {
if (messages[i].timestamp < threshold) {
messages.splice(i, 1);
changed++;
}
}
if (changed > 0) {
localStorage.setItem(INDEX_EMIT, JSON.stringify(messages));
}
});
});
Intercom.prototype._cleanup_once = util.throttle(100, function() {
var self = this;
this._transaction(function() {
var timestamp, ttl, key;
var table = JSON.parse(localStorage.getItem(INDEX_ONCE) || '{}');
var now = (new Date()).getTime();
var changed = 0;
for (key in table) {
if (self._once_expired(key, table)) {
delete table[key];
changed++;
}
}
if (changed > 0) {
localStorage.setItem(INDEX_ONCE, JSON.stringify(table));
}
});
});
Intercom.prototype._once_expired = function(key, table) {
if (!table) return true;
if (!table.hasOwnProperty(key)) return true;
if (typeof table[key] !== 'object') return true;
var ttl = table[key].ttl || THRESHOLD_TTL_ONCE;
var now = (new Date()).getTime();
var timestamp = table[key].timestamp;
return timestamp < now - ttl;
};
Intercom.prototype._localStorageChanged = function(event, field) {
if (event && event.key) {
return event.key === field;
}
var currentValue = localStorage.getItem(field);
if (currentValue === this.previousValues[field]) {
return false;
}
this.previousValues[field] = currentValue;
return true;
};
Intercom.prototype._onStorageEvent = function(event) {
event = event || window.event;
var self = this;
if (this._localStorageChanged(event, INDEX_EMIT)) {
this._transaction(function() {
var now = (new Date()).getTime();
var data = localStorage.getItem(INDEX_EMIT);
var messages = JSON.parse(data || '[]');
for (var i = 0; i < messages.length; i++) {
if (messages[i].origin === self.origin) continue;
if (messages[i].timestamp < self.lastMessage) continue;
if (messages[i].id) {
if (self.receivedIDs.hasOwnProperty(messages[i].id)) continue;
self.receivedIDs[messages[i].id] = true;
}
self.trigger(messages[i].name, messages[i].payload);
}
self.lastMessage = now;
});
}
this._trigger('storage', event);
};
Intercom.prototype._emit = function(name, message, id) {
id = (typeof id === 'string' || typeof id === 'number') ? String(id) : null;
if (id && id.length) {
if (this.receivedIDs.hasOwnProperty(id)) return;
this.receivedIDs[id] = true;
}
var packet = {
id : id,
name : name,
origin : this.origin,
timestamp : (new Date()).getTime(),
payload : message
};
var self = this;
this._transaction(function() {
var data = localStorage.getItem(INDEX_EMIT) || '[]';
var delimiter = (data === '[]') ? '' : ',';
data = [data.substring(0, data.length - 1), delimiter, JSON.stringify(packet), ']'].join('');
localStorage.setItem(INDEX_EMIT, data);
self.trigger(name, message);
window.setTimeout(function() { self._cleanup_emit(); }, 50);
});
};
Intercom.prototype.bind = function(object, options) {
for (var i = 0; i < Intercom.bindings.length; i++) {
var binding = Intercom.bindings[i].factory(object, options || null, this);
if (binding) { this.bindings.push(binding); }
}
};
Intercom.prototype.emit = function(name, message) {
this._emit.apply(this, arguments);
this._trigger('emit', name, message);
};
Intercom.prototype.once = function(key, fn, ttl) {
if (!Intercom.supported) return;
var self = this;
this._transaction(function() {
var data = JSON.parse(localStorage.getItem(INDEX_ONCE) || '{}');
if (!self._once_expired(key, data)) return;
data[key] = {};
data[key].timestamp = (new Date()).getTime();
if (typeof ttl === 'number') {
data[key].ttl = ttl * 1000;
}
localStorage.setItem(INDEX_ONCE, JSON.stringify(data));
fn();
window.setTimeout(function() { self._cleanup_once(); }, 50);
});
};
util.extend(Intercom.prototype, EventEmitter.prototype);
Intercom.bindings = [];
Intercom.supported = (typeof localStorage !== 'undefined');
var INDEX_EMIT = 'intercom';
var INDEX_ONCE = 'intercom_once';
var INDEX_LOCK = 'intercom_lock';
var THRESHOLD_TTL_EMIT = 50000;
var THRESHOLD_TTL_ONCE = 1000 * 3600;
Intercom.destroy = function() {
localStorage.removeItem(INDEX_LOCK);
localStorage.removeItem(INDEX_EMIT);
localStorage.removeItem(INDEX_ONCE);
};
Intercom.getInstance = (function() {
var intercom = null;
return function() {
if (!intercom) {
intercom = new Intercom();
}
return intercom;
};
})();
// --- lib/bindings/socket.js ---
/**
* Socket.io binding for intercom.js.
*
* - When a message is received on the socket, it's emitted on intercom.
* - When a message is emitted via intercom, it's sent over the socket.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
var SocketBinding = function(socket, options, intercom) {
options = util.extend({
id : null,
send : true,
receive : true
}, options);
if (options.receive) {
var watchedEvents = [];
var onEventAdded = function(name, fn) {
if (watchedEvents.indexOf(name) === -1) {
watchedEvents.push(name);
socket.on(name, function(data) {
var id = (typeof options.id === 'function') ? options.id(name, data) : null;
var emit = (typeof options.receive === 'function') ? options.receive(name, data) : true;
if (emit || typeof emit !== 'boolean') {
intercom._emit(name, data, id);
}
});
}
};
for (var name in intercom.handlers) {
for (var i = 0; i < intercom.handlers[name].length; i++) {
onEventAdded(name, intercom.handlers[name][i]);
}
}
intercom._on('on', onEventAdded);
}
if (options.send) {
intercom._on('emit', function(name, message) {
var emit = (typeof options.send === 'function') ? options.send(name, message) : true;
if (emit || typeof emit !== 'boolean') {
socket.emit(name, message);
}
});
}
};
SocketBinding.factory = function(object, options, intercom) {
if (typeof object.socket === 'undefined') { return false };
return new SocketBinding(object, options, intercom);
};
Intercom.bindings.push(SocketBinding);
return Intercom;
})();

12
examples/js/lib/intercom.min.js vendored Normal file
View File

@@ -0,0 +1,12 @@
/*! intercom.js | https://github.com/diy/intercom.js | Apache License (v2) */
var Intercom=function(){var g=function(){};g.createInterface=function(b){return{on:function(a,c){"undefined"===typeof this[b]&&(this[b]={});this[b].hasOwnProperty(a)||(this[b][a]=[]);this[b][a].push(c)},off:function(a,c){"undefined"!==typeof this[b]&&this[b].hasOwnProperty(a)&&i.removeItem(c,this[b][a])},trigger:function(a){if("undefined"!==typeof this[b]&&this[b].hasOwnProperty(a))for(var c=Array.prototype.slice.call(arguments,1),e=0;e<this[b][a].length;e++)this[b][a][e].apply(this[b][a][e],c)}}};
var m=g.createInterface("_handlers");g.prototype._on=m.on;g.prototype._off=m.off;g.prototype._trigger=m.trigger;var n=g.createInterface("handlers");g.prototype.on=function(){n.on.apply(this,arguments);Array.prototype.unshift.call(arguments,"on");this._trigger.apply(this,arguments)};g.prototype.off=n.off;g.prototype.trigger=n.trigger;var f=window.localStorage;"undefined"===typeof f&&(f={getItem:function(){},setItem:function(){},removeItem:function(){}});var i={},h=function(){return(65536*(1+Math.random())|
0).toString(16).substring(1)};i.guid=function(){return h()+h()+"-"+h()+"-"+h()+"-"+h()+"-"+h()+h()+h()};i.throttle=function(b,a){var c=0;return function(){var e=(new Date).getTime();e-c>b&&(c=e,a.apply(this,arguments))}};i.extend=function(b,a){if("undefined"===typeof b||!b)b={};if("object"===typeof a)for(var c in a)a.hasOwnProperty(c)&&(b[c]=a[c]);return b};i.removeItem=function(b,a){for(var c=a.length-1;0<=c;c--)a[c]===b&&a.splice(c,1);return a};var d=function(){var b=this,a=(new Date).getTime();
this.origin=i.guid();this.lastMessage=a;this.bindings=[];this.receivedIDs={};this.previousValues={};a=function(){b._onStorageEvent.apply(b,arguments)};window.attachEvent?document.attachEvent("onstorage",a):window.addEventListener("storage",a,!1)};d.prototype._transaction=function(b){var a=this,c=!1,e=!1,p=null,d=function(){if(!c){var g=(new Date).getTime(),s=parseInt(f.getItem(l)||0);s&&1E3>g-s?(e||(a._on("storage",d),e=!0),p=window.setTimeout(d,20)):(c=!0,f.setItem(l,g),b(),e&&a._off("storage",d),
p&&window.clearTimeout(p),f.removeItem(l))}};d()};d.prototype._cleanup_emit=i.throttle(100,function(){this._transaction(function(){for(var b=(new Date).getTime()-t,a=0,c=JSON.parse(f.getItem(j)||"[]"),e=c.length-1;0<=e;e--)c[e].timestamp<b&&(c.splice(e,1),a++);0<a&&f.setItem(j,JSON.stringify(c))})});d.prototype._cleanup_once=i.throttle(100,function(){var b=this;this._transaction(function(){var a,c=JSON.parse(f.getItem(k)||"{}");(new Date).getTime();var e=0;for(a in c)b._once_expired(a,c)&&(delete c[a],
e++);0<e&&f.setItem(k,JSON.stringify(c))})});d.prototype._once_expired=function(b,a){if(!a||!a.hasOwnProperty(b)||"object"!==typeof a[b])return!0;var c=a[b].ttl||u,e=(new Date).getTime();return a[b].timestamp<e-c};d.prototype._localStorageChanged=function(b,a){if(b&&b.key)return b.key===a;var c=f.getItem(a);if(c===this.previousValues[a])return!1;this.previousValues[a]=c;return!0};d.prototype._onStorageEvent=function(b){var b=b||window.event,a=this;this._localStorageChanged(b,j)&&this._transaction(function(){for(var b=
(new Date).getTime(),e=f.getItem(j),e=JSON.parse(e||"[]"),d=0;d<e.length;d++)if(e[d].origin!==a.origin&&!(e[d].timestamp<a.lastMessage)){if(e[d].id){if(a.receivedIDs.hasOwnProperty(e[d].id))continue;a.receivedIDs[e[d].id]=!0}a.trigger(e[d].name,e[d].payload)}a.lastMessage=b});this._trigger("storage",b)};d.prototype._emit=function(b,a,c){if((c="string"===typeof c||"number"===typeof c?String(c):null)&&c.length){if(this.receivedIDs.hasOwnProperty(c))return;this.receivedIDs[c]=!0}var e={id:c,name:b,origin:this.origin,
timestamp:(new Date).getTime(),payload:a},d=this;this._transaction(function(){var c=f.getItem(j)||"[]",c=[c.substring(0,c.length-1),"[]"===c?"":",",JSON.stringify(e),"]"].join("");f.setItem(j,c);d.trigger(b,a);window.setTimeout(function(){d._cleanup_emit()},50)})};d.prototype.bind=function(b,a){for(var c=0;c<d.bindings.length;c++){var e=d.bindings[c].factory(b,a||null,this);e&&this.bindings.push(e)}};d.prototype.emit=function(b,a){this._emit.apply(this,arguments);this._trigger("emit",b,a)};d.prototype.once=
function(b,a,c){if(d.supported){var e=this;this._transaction(function(){var d=JSON.parse(f.getItem(k)||"{}");e._once_expired(b,d)&&(d[b]={},d[b].timestamp=(new Date).getTime(),"number"===typeof c&&(d[b].ttl=1E3*c),f.setItem(k,JSON.stringify(d)),a(),window.setTimeout(function(){e._cleanup_once()},50))})}};i.extend(d.prototype,g.prototype);d.bindings=[];d.supported="undefined"!==typeof f;var j="intercom",k="intercom_once",l="intercom_lock",t=5E4,u=36E5;d.destroy=function(){f.removeItem(l);f.removeItem(j);
f.removeItem(k)};var q=null;d.getInstance=function(){q||(q=new d);return q};var r=function(b,a,c){a=i.extend({id:null,send:!0,receive:!0},a);if(a.receive){var d=[],f=function(f){-1===d.indexOf(f)&&(d.push(f),b.on(f,function(b){var d="function"===typeof a.id?a.id(f,b):null,e="function"===typeof a.receive?a.receive(f,b):!0;(e||"boolean"!==typeof e)&&c._emit(f,b,d)}))},g;for(g in c.handlers)for(var h=0;h<c.handlers[g].length;h++)f(g,c.handlers[g][h]);c._on("on",f)}a.send&&c._on("emit",function(c,d){var e=
"function"===typeof a.send?a.send(c,d):!0;(e||"boolean"!==typeof e)&&b.emit(c,d)})};r.factory=function(b,a,c){return"undefined"===typeof b.socket?!1:new r(b,a,c)};d.bindings.push(r);return d}();

10220
examples/js/lib/jquery-3.1.1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1403
examples/js/lib/papaparse.js Normal file
View File

File diff suppressed because it is too large Load Diff

390
examples/js/lib/parallel.js Normal file
View File

@@ -0,0 +1,390 @@
(function () {
var isCommonJS = typeof module !== 'undefined' && module.exports;
var isNode = !(typeof window !== 'undefined' && this === window);
var setImmediate = setImmediate || function (cb) {
setTimeout(cb, 0);
};
var Worker = isNode ? require(__dirname + '/Worker.js') : self.Worker;
var URL = typeof self !== 'undefined' ? (self.URL ? self.URL : self.webkitURL) : null;
var _supports = (isNode || self.Worker) ? true : false; // node always supports parallel
function extend(from, to) {
if (!to) to = {};
for (var i in from) {
if (to[i] === undefined) to[i] = from[i];
}
return to;
}
function Operation() {
this._callbacks = [];
this._errCallbacks = [];
this._resolved = 0;
this._result = null;
}
Operation.prototype.resolve = function (err, res) {
if (!err) {
this._resolved = 1;
this._result = res;
for (var i = 0; i < this._callbacks.length; ++i) {
this._callbacks[i](res);
}
} else {
this._resolved = 2;
this._result = err;
for (var iE = 0; iE < this._errCallbacks.length; ++iE) {
this._errCallbacks[iE](err);
}
}
this._callbacks = [];
this._errCallbacks = [];
};
Operation.prototype.then = function (cb, errCb) {
if (this._resolved === 1) { // result
if (cb) {
cb(this._result);
}
return;
} else if (this._resolved === 2) { // error
if (errCb) {
errCb(this._result);
}
return;
}
if (cb) {
this._callbacks[this._callbacks.length] = cb;
}
if (errCb) {
this._errCallbacks[this._errCallbacks.length] = errCb;
}
return this;
};
var defaults = {
evalPath: isNode ? __dirname + '/eval.js' : null,
maxWorkers: isNode ? require('os').cpus().length : (navigator.hardwareConcurrency || 4),
synchronous: true,
env: {},
envNamespace: 'env'
};
function Parallel(data, options) {
this.data = data;
this.options = extend(defaults, options);
this.operation = new Operation();
this.operation.resolve(null, this.data);
this.requiredScripts = [];
this.requiredFunctions = [];
}
// static method
Parallel.isSupported = function () { return _supports; }
Parallel.prototype.getWorkerSource = function (cb, env) {
var that = this;
var preStr = '';
var i = 0;
if (!isNode && this.requiredScripts.length !== 0) {
preStr += 'importScripts("' + this.requiredScripts.join('","') + '");\r\n';
}
for (i = 0; i < this.requiredFunctions.length; ++i) {
if (this.requiredFunctions[i].name) {
preStr += 'var ' + this.requiredFunctions[i].name + ' = ' + this.requiredFunctions[i].fn.toString() + ';';
} else {
preStr += this.requiredFunctions[i].fn.toString();
}
}
env = JSON.stringify(env || {});
var ns = this.options.envNamespace;
if (isNode) {
return preStr + 'process.on("message", function(e) {global.' + ns + ' = ' + env + ';process.send(JSON.stringify((' + cb.toString() + ')(JSON.parse(e).data)))})';
} else {
return preStr + 'self.onmessage = function(e) {var global = {}; global.' + ns + ' = ' + env + ';self.postMessage((' + cb.toString() + ')(e.data))}';
}
};
Parallel.prototype.require = function () {
var args = Array.prototype.slice.call(arguments, 0),
func;
for (var i = 0; i < args.length; i++) {
func = args[i];
if (typeof func === 'string') {
this.requiredScripts.push(func);
} else if (typeof func === 'function') {
this.requiredFunctions.push({ fn: func });
} else if (typeof func === 'object') {
this.requiredFunctions.push(func);
}
}
return this;
};
Parallel.prototype._spawnWorker = function (cb, env) {
var wrk;
var src = this.getWorkerSource(cb, env);
if (isNode) {
wrk = new Worker(this.options.evalPath);
wrk.postMessage(src);
} else {
if (Worker === undefined) {
return undefined;
}
try {
if (this.requiredScripts.length !== 0) {
if (this.options.evalPath !== null) {
wrk = new Worker(this.options.evalPath);
wrk.postMessage(src);
} else {
throw new Error('Can\'t use required scripts without eval.js!');
}
} else if (!URL) {
throw new Error('Can\'t create a blob URL in this browser!');
} else {
var blob = new Blob([src], { type: 'text/javascript' });
var url = URL.createObjectURL(blob);
wrk = new Worker(url);
}
} catch (e) {
if (this.options.evalPath !== null) { // blob/url unsupported, cross-origin error
wrk = new Worker(this.options.evalPath);
wrk.postMessage(src);
} else {
throw e;
}
}
}
return wrk;
};
Parallel.prototype.spawn = function (cb, env) {
var that = this;
var newOp = new Operation();
env = extend(this.options.env, env || {});
this.operation.then(function () {
var wrk = that._spawnWorker(cb, env);
if (wrk !== undefined) {
wrk.onmessage = function (msg) {
wrk.terminate();
that.data = msg.data;
newOp.resolve(null, that.data);
};
wrk.onerror = function (e) {
wrk.terminate();
newOp.resolve(e, null);
};
wrk.postMessage(that.data);
} else if (that.options.synchronous) {
setImmediate(function () {
try {
that.data = cb(that.data);
newOp.resolve(null, that.data);
} catch (e) {
newOp.resolve(e, null);
}
});
} else {
throw new Error('Workers do not exist and synchronous operation not allowed!');
}
});
this.operation = newOp;
return this;
};
Parallel.prototype._spawnMapWorker = function (i, cb, done, env, wrk) {
var that = this;
if (!wrk) wrk = that._spawnWorker(cb, env);
if (wrk !== undefined) {
wrk.onmessage = function (msg) {
that.data[i] = msg.data;
done(null, wrk);
};
wrk.onerror = function (e) {
wrk.terminate();
done(e);
};
wrk.postMessage(that.data[i]);
} else if (that.options.synchronous) {
setImmediate(function () {
that.data[i] = cb(that.data[i]);
done();
});
} else {
throw new Error('Workers do not exist and synchronous operation not allowed!');
}
};
Parallel.prototype.map = function (cb, env) {
env = extend(this.options.env, env || {});
if (!this.data.length) {
return this.spawn(cb, env);
}
var that = this;
var startedOps = 0;
var doneOps = 0;
function done(err, wrk) {
if (err) {
newOp.resolve(err, null);
} else if (++doneOps === that.data.length) {
newOp.resolve(null, that.data);
if (wrk) wrk.terminate();
} else if (startedOps < that.data.length) {
that._spawnMapWorker(startedOps++, cb, done, env, wrk);
} else {
if (wrk) wrk.terminate();
}
}
var newOp = new Operation();
this.operation.then(function () {
for (; startedOps - doneOps < that.options.maxWorkers && startedOps < that.data.length; ++startedOps) {
that._spawnMapWorker(startedOps, cb, done, env);
}
}, function (err) {
newOp.resolve(err, null);
});
this.operation = newOp;
return this;
};
Parallel.prototype._spawnReduceWorker = function (data, cb, done, env, wrk) {
var that = this;
if (!wrk) wrk = that._spawnWorker(cb, env);
if (wrk !== undefined) {
wrk.onmessage = function (msg) {
that.data[that.data.length] = msg.data;
done(null, wrk);
};
wrk.onerror = function (e) {
wrk.terminate();
done(e, null);
}
wrk.postMessage(data);
} else if (that.options.synchronous) {
setImmediate(function () {
that.data[that.data.length] = cb(data);
done();
});
} else {
throw new Error('Workers do not exist and synchronous operation not allowed!');
}
};
Parallel.prototype.reduce = function (cb, env) {
env = extend(this.options.env, env || {});
if (!this.data.length) {
throw new Error('Can\'t reduce non-array data');
}
var runningWorkers = 0;
var that = this;
function done(err, wrk) {
--runningWorkers;
if (err) {
newOp.resolve(err, null);
} else if (that.data.length === 1 && runningWorkers === 0) {
that.data = that.data[0];
newOp.resolve(null, that.data);
if (wrk) wrk.terminate();
} else if (that.data.length > 1) {
++runningWorkers;
that._spawnReduceWorker([that.data[0], that.data[1]], cb, done, env, wrk);
that.data.splice(0, 2);
} else {
if (wrk) wrk.terminate();
}
}
var newOp = new Operation();
this.operation.then(function () {
if (that.data.length === 1) {
newOp.resolve(null, that.data[0]);
} else {
for (var i = 0; i < that.options.maxWorkers && i < Math.floor(that.data.length / 2) ; ++i) {
++runningWorkers;
that._spawnReduceWorker([that.data[i * 2], that.data[i * 2 + 1]], cb, done, env);
}
that.data.splice(0, i * 2);
}
});
this.operation = newOp;
return this;
};
Parallel.prototype.then = function (cb, errCb) {
var that = this;
var newOp = new Operation();
errCb = typeof errCb === 'function' ? errCb : function(){};
this.operation.then(function () {
var retData;
try {
if (cb) {
retData = cb(that.data);
if (retData !== undefined) {
that.data = retData;
}
}
newOp.resolve(null, that.data);
} catch (e) {
if (errCb) {
retData = errCb(e);
if (retData !== undefined) {
that.data = retData;
}
newOp.resolve(null, that.data);
} else {
newOp.resolve(null, e);
}
}
}, function (err) {
if (errCb) {
var retData = errCb(err);
if (retData !== undefined) {
that.data = retData;
}
newOp.resolve(null, that.data);
} else {
newOp.resolve(null, err);
}
});
this.operation = newOp;
return this;
};
if (isCommonJS) {
module.exports = Parallel;
} else {
self.Parallel = Parallel;
}
})();

195
examples/js/src/interpolation.js Normal file
View File

@@ -0,0 +1,195 @@
function doInterpolation(sampleSet, remainderSet, interpSubset, properties) {
var distance = calculateDistancePoker;
// var distance = calculateEuclideanDistance;
console.log("Brute-force");
for (var i = 0; i < remainderSet.length; i++) {
var node = remainderSet[i],
minNode = sampleSet[0],
minDist = 0,
sampleCache = [];
minDist = distance(node, minNode, properties);
for (var j = 1, sample; j < sampleSet.length; j++) {
sample = sampleSet[j];
if ((sample !== node) && (distance(node, sample, properties) < minDist)) {
minDist = distance(node, sample, properties);
minNode = sample;
}
}
// console.log()
for (var k = 0; k < interpSubset.length; k++) {
sampleCache[k] = distance(node, interpSubset[k], properties);
}
var radius = distance(node, minNode, properties);
placeNearToNearestNeighbour(node, minNode, interpSubset, sampleCache, radius);
}
}
function placeNearToNearestNeighbour(node, minNode, sample, sampleCache, radius) {
var
dist0 = 0.0,
dist90 = 0.0,
dist180 = 0.0,
dist270 = 0.0,
lowBound = 0.0,
highBound = 0.0;
dist0 = sumDistToSample(node, centerPoint(0, radius, minNode.x, minNode.y), sample, sampleCache);
dist90 = sumDistToSample(node, centerPoint(90, radius, minNode.x, minNode.y), sample, sampleCache);
dist180 = sumDistToSample(node, centerPoint(180, radius, minNode.x, minNode.y), sample, sampleCache);
dist270 = sumDistToSample(node, centerPoint(270, radius, minNode.x, minNode.y), sample, sampleCache);
// console.log(dist0, dist90, dist180, dist270);
// Determine the closest quadrant
if (dist0 == dist180) {
if (dist90 > dist270)
lowBound = highBound = 270;
else
lowBound = highBound = 90;
} else if (dist90 == dist270) {
if (dist0 > dist180)
lowBound = highBound = 180;
else
lowBound = highBound = 0;
} else if (dist0 > dist180) {
if (dist90 > dist270) {
lowBound = 180;
highBound = 270;
} else {
lowBound = 90;
highBound = 180;
}
} else {
if (dist90 > dist270) {
lowBound = 270;
highBound = 360;
} else {
lowBound = 0;
highBound = 90;
}
}
var angle = binarySearch(lowBound, highBound, minNode.x, minNode.y, radius, node, sample, sampleCache);
var newPoint = centerPoint(angle, radius, minNode.x, minNode.y);
// console.log(newPoint);
node.x = newPoint.x;
node.y = newPoint.y;
// for (var i = 0; i < 20; i++) {
// var forces = sumForcesToSample(node, sample, sampleCache);
// // console.log(forces);
// node.x += forces.x;
// node.y += forces.y;
// }
}
function centerPoint(angle, radius, posX, posY) {
var x = posX + Math.cos(toRadians(angle) * radius);
var y = posY + Math.sin(toRadians(angle) * radius);
return {
x: x,
y: y
};
}
function toRadians(degrees) {
return degrees * (Math.PI / 180);
}
function sumDistToSample(node, point, sample, sampleCache) {
var total = 0.0;
// console.log(total, sample);
for (var i = 0; i < sample.length; i++) {
var s = sample[i];
var realDist = Math.hypot(s.x - point.x, s.y - point.y);
var desDist = sampleCache[i];
total += Math.abs(realDist - desDist);
}
return total;
}
function sumForcesToSample(node, sample, sampleCache) {
var x = 0,
y = 0,
// len = 0,
dist = 0,
force,
SPRING_FORCE = 0.7;
for (var i = 0, unitX, unitY; i < sample.length; i++) {
var s = sample[i];
if (s !== node) {
unitX = s.x - node.x;
unitY = s.y - node.y;
// Normalize coordinates
len = Math.sqrt(unitX * unitX + unitY * unitY);
unitX /= len;
unitY /= len;
console.log(unitX, unitY);
var realDist = Math.sqrt(unitX * unitX + unitY * unitY);
var desDist = sampleCache[i];
dist += realDist - desDist;
force = (SPRING_FORCE * dist);
x += unitX * force;
y += unitY * force;
}
x *= (1.0 / sample.length);
y *= (1.0 / sample.length);
return {
x: x,
y: y
};
}
}
function binarySearch(lb, hb, x, y, r, node, sample, sampleCache) {
while (lb <= hb) {
var mid = Math.round((lb + hb) / 2);
if ((mid === lb) || (mid === hb)) {
if (sumDistToSample(node, centerPoint(lb, r, x, y), sample, sampleCache) >=
sumDistToSample(node, centerPoint(hb, r, x, y), sample, sampleCache)) {
return hb;
} else {
return lb;
}
} else {
var distMidLeft = sumDistToSample(node, centerPoint(mid + 1, r, x, y), sample, sampleCache);
var distMidRight = sumDistToSample(node, centerPoint(mid - 1, r, x, y), sample, sampleCache);
var distMid = sumDistToSample(node, centerPoint(mid, r, x, y), sample, sampleCache);
if (distMid > distMidLeft) {
lb = mid + 1;
} else if (distMid > distMidRight) {
hb = mid - 1;
} else {
return mid;
}
}
}
return -1;
}

269
examples/js/src/interpolationPivots.js Normal file
View File

@@ -0,0 +1,269 @@
function doInterpolationPivots(sampleSet, remainderSet, interpSubset, properties) {
var distance = calculateDistancePoker;
// var distance = calculateEuclideanDistance;
// Pivot based parent finding
var numBuckets = Math.floor(Math.sqrt(sampleSet.length)),
// numPivots = Math.floor(Math.sqrt(sampleSet.length)),
numPivots = 3,
parents = [],
maxDists = [],
bucketWidths = [],
pivotsBuckets = [];
console.log("Parents, pivots=", numPivots);
var pivots = createRandomSample(sampleSet.concat(remainderSet), sampleSet.length, numPivots);
for (var i = 0; i < numPivots; i++) {
pivotsBuckets[i] = [];
for (var j = 0; j < numBuckets; j++) {
pivotsBuckets[i][j] = [];
}
}
// Pre-processing
var fullDists = []
for (var i = 0; i < sampleSet.length; i++) {
fullDists[i] = [];
}
for (var j = 0, maxDist = -1; j < numPivots; j++) {
var c1 = pivots[j];
for (var i = 0; i < sampleSet.length; i++) {
var c2 = sampleSet[i];
if (c1 !== c2) {
var dist = distance(c1, c2, properties);
// console.log(dist, c1, c2);
if (dist > maxDist) {
maxDist = dist;
}
fullDists[i][j] = dist;
} else {
fullDists[i][j] = 0.0001;
}
}
maxDists.push(maxDist);
bucketWidths.push(maxDist / numBuckets);
}
// console.log(fullDists);
for (var j = 0; j < numPivots; j++) {
var bucketWidth = bucketWidths[j];
for (var i = 0; i < sampleSet.length; i++) {
var tmp = pivotsBuckets[j][Math.floor((fullDists[i][j] - 0.0001) / bucketWidth)];
// pivotsBuckets[j][Math.floor((fullDists[i][j] - 0.0001) / bucketWidth)].push(sampleSet[i]);
// console.log(tmp, i, j, bucketWidth, Math.floor((fullDists[i][j] - 0.0001) / bucketWidth));
tmp.push(sampleSet[i]);
}
}
for (var i = 0; i < remainderSet.length; i++) {
var node = remainderSet[i],
minNode = sampleSet[0],
minDist = 0,
sampleCache = [];
// Pivot based parent search
var node = remainderSet[i];
var clDist = Number.MAX_VALUE;
for (var p = 0; p < numPivots; p++) {
var comp = pivots[p];
var bucketWidth = bucketWidths[p];
if (node !== comp) {
var dist = distance(node, comp, properties);
bNum = Math.floor((dist - 0.0001) / bucketWidth);
if (bNum >= numBuckets) {
bNum = numBuckets - 1;
} else if (bNum < 0) {
bNum = 0;
}
var bucketContents = pivotsBuckets[p][bNum];
for (var w = 0; w < bucketContents.length; w++) {
var c1 = bucketContents[w];
if (c1 != node) {
dist = distance(c1, node, properties);
if (dist <= clDist) {
clDist = dist;
minNode = bucketContents[w];
}
}
}
}
}
for (var k = 0; k < interpSubset.length; k++) {
sampleCache[k] = distance(node, interpSubset[k], properties);
}
var radius = distance(node, minNode, properties);
placeNearToNearestNeighbour(node, minNode, interpSubset, sampleCache, radius);
}
}
function placeNearToNearestNeighbour(node, minNode, sample, sampleCache, radius) {
var
dist0 = 0.0,
dist90 = 0.0,
dist180 = 0.0,
dist270 = 0.0,
lowBound = 0.0,
highBound = 0.0;
dist0 = sumDistToSample(node, centerPoint(0, radius, minNode.x, minNode.y), sample, sampleCache);
dist90 = sumDistToSample(node, centerPoint(90, radius, minNode.x, minNode.y), sample, sampleCache);
dist180 = sumDistToSample(node, centerPoint(180, radius, minNode.x, minNode.y), sample, sampleCache);
dist270 = sumDistToSample(node, centerPoint(270, radius, minNode.x, minNode.y), sample, sampleCache);
// console.log(dist0, dist90, dist180, dist270);
// Determine the closest quadrant
if (dist0 == dist180) {
if (dist90 > dist270)
lowBound = highBound = 270;
else
lowBound = highBound = 90;
} else if (dist90 == dist270) {
if (dist0 > dist180)
lowBound = highBound = 180;
else
lowBound = highBound = 0;
} else if (dist0 > dist180) {
if (dist90 > dist270) {
lowBound = 180;
highBound = 270;
} else {
lowBound = 90;
highBound = 180;
}
} else {
if (dist90 > dist270) {
lowBound = 270;
highBound = 360;
} else {
lowBound = 0;
highBound = 90;
}
}
var angle = binarySearch(lowBound, highBound, minNode.x, minNode.y, radius, node, sample, sampleCache);
var newPoint = centerPoint(angle, radius, minNode.x, minNode.y);
// console.log(newPoint);
node.x = newPoint.x;
node.y = newPoint.y;
// for (var i = 0; i < 20; i++) {
// var forces = sumForcesToSample(node, sample, sampleCache);
// // console.log(forces);
// node.x += forces.x;
// node.y += forces.y;
// }
}
function centerPoint(angle, radius, posX, posY) {
var x = posX + Math.cos(toRadians(angle) * radius);
var y = posY + Math.sin(toRadians(angle) * radius);
return {
x: x,
y: y
};
}
function toRadians(degrees) {
return degrees * (Math.PI / 180);
}
function sumDistToSample(node, point, sample, sampleCache) {
var total = 0.0;
// console.log(total, sample);
for (var i = 0; i < sample.length; i++) {
var s = sample[i];
var realDist = Math.hypot(s.x - point.x, s.y - point.y);
var desDist = sampleCache[i];
total += Math.abs(realDist - desDist);
}
return total;
}
function sumForcesToSample(node, sample, sampleCache) {
var x = 0,
y = 0,
// len = 0,
dist = 0,
force,
SPRING_FORCE = 0.7;
for (var i = 0, unitX, unitY; i < sample.length; i++) {
var s = sample[i];
if (s !== node) {
unitX = s.x - node.x;
unitY = s.y - node.y;
// Normalize coordinates
len = Math.sqrt(unitX * unitX + unitY * unitY);
unitX /= len;
unitY /= len;
console.log(unitX, unitY);
var realDist = Math.sqrt(unitX * unitX + unitY * unitY);
var desDist = sampleCache[i];
dist += realDist - desDist;
force = (SPRING_FORCE * dist);
x += unitX * force;
y += unitY * force;
}
x *= (1.0 / sample.length);
y *= (1.0 / sample.length);
return {
x: x,
y: y
};
}
}
function binarySearch(lb, hb, x, y, r, node, sample, sampleCache) {
while (lb <= hb) {
var mid = Math.round((lb + hb) / 2);
if ((mid === lb) || (mid === hb)) {
if (sumDistToSample(node, centerPoint(lb, r, x, y), sample, sampleCache) >=
sumDistToSample(node, centerPoint(hb, r, x, y), sample, sampleCache)) {
return hb;
} else {
return lb;
}
} else {
var distMidLeft = sumDistToSample(node, centerPoint(mid + 1, r, x, y), sample, sampleCache);
var distMidRight = sumDistToSample(node, centerPoint(mid - 1, r, x, y), sample, sampleCache);
var distMid = sumDistToSample(node, centerPoint(mid, r, x, y), sample, sampleCache);
if (distMid > distMidLeft) {
lb = mid + 1;
} else if (distMid > distMidRight) {
hb = mid - 1;
} else {
return mid;
}
}
}
return -1;
}

579
examples/js/src/neighbourSampling-papaparsing-nist-images.js Normal file
View File

@@ -0,0 +1,579 @@
// Get the width and heigh of the SVG element.
var width = +document.getElementById('svg').clientWidth,
height = +document.getElementById('svg').clientHeight;
var svg = d3.select("svg")
.call(d3.zoom().scaleExtent([0.0001, 1000000]).on("zoom", function () {
svg.attr("transform", d3.event.transform);
}))
.append("g");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var brush = d3.brush()
.extent([[-9999999, -9999999], [9999999, 9999999]])
.on("end", brushEnded);
svg.append("g")
.attr("class", "brush")
.call(brush);
var intercom = Intercom.getInstance();
intercom.on("select", unSelectNodes);
var imgs = svg.selectAll("image");
var links = [],
nodes,
node,
props,
norm,
p1 = 0,
p2 = 0,
size,
distanceFunction,
simulation,
velocities = [],
rendering = true, // Rendering during the execution.
forceName = "forces",
springForce = false,
tooltipWidth = 0,
fileName = "",
selectedData,
clickedIndex = -1;
// Default parameters
var MULTIPLIER = 50,
PERPLEXITY = 30,
LEARNING_RATE = 10,
NEIGHBOUR_SIZE = 6,
SAMPLE_SIZE = 3,
PIVOTS = false,
NUM_PIVOTS = 3,
ITERATIONS = 300,
FULL_ITERATIONS = 20,
NODE_SIZE = 10,
COLOR_ATTRIBUTE = "";
// Create a color scheme for a range of numbers.
var color = d3.scaleOrdinal(d3.schemeCategory10);
/**
* Parse the data from the provided csv file using Papa Parse library
* @param {file} evt - csv file.
*/
function parseFile(evt) {
// Clear the previous nodes
d3.selectAll(".nodes").remove();
springForce = false;
fileName = evt.target.files[0].name;
Papa.parse(evt.target.files[0], {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function (results) {
processData(results.data, results.error);
}
});
}
/**
* Process the data and pass it into D3 force simulation.
* @param {array} data
* @param {object} error
*/
function processData(data, error) {
if (error) throw error.message;
nodes = data;
// Number of iterations before stopping.
size = nodes.length;
console.log("Number of iterations: ", ITERATIONS);
// Start by placing the nodes at the center (its starting positions).
simulation = d3.forceSimulation();
console.log("n =", nodes.length);
// Calculate normalization arguments and get the list of
// properties of the nodes.
norm = calculateNormalization(nodes);
props = Object.keys(nodes[0]);
COLOR_ATTRIBUTE = props[0];
var opts = document.getElementById('color_attr').options;
props.forEach(function (d) {
opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE) ? true : false));
});
// Add the nodes to DOM.
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE]);
})
.on("mouseover", function (d) {
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
})
.on("click", function (d) {
if (clickedIndex !== d.index) {
highlightNeighbours(d.index, springForce ? Array.from(simulation.force(forceName).nodeNeighbours(d.index).keys()) : []);
clickedIndex = d.index;
} else {
svg.selectAll("image").remove();
node.attr("r", NODE_SIZE).attr("stroke-width", 0);
clickedIndex = -1;
}
});
// Pass the nodes to the D3 force simulation.
simulation
.nodes(nodes)
.on("tick", ticked)
.on("end", ended);
function ticked() {
// If rendering is selected, then draw at every iteration.
if (rendering === true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
}
function ended() {
if (rendering !== true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
if (p1 !== 0) {
// Performance time measurement
p2 = performance.now();
console.log("Execution time: " + (p2 - p1));
// Do not calculate stress for data sets bigger than 100 000.
// if (nodes.length <= 100000) {
// console.log("Stress: ", simulation.force(forceName).stress());
// }
p1 = 0;
p2 = 0;
}
}
};
function brushEnded() {
var s = d3.event.selection,
results = [];
if (s) {
var x0 = s[0][0] - width / 2,
y0 = s[0][1] - height / 2,
x1 = s[1][0] - width / 2,
y1 = s[1][1] - height / 2;
if (nodes) {
var sel = node.filter(function (d) {
if (d.x > x0 && d.x < x1 && d.y > y0 && d.y < y1) {
return true;
}
return false;
}).data();
results = sel.map(function (a) { return a.index; });
}
intercom.emit("select", { name: fileName, indices: results });
d3.select(".brush").call(brush.move, null);
}
}
/**
* Initialize the Chalmers' 1996 algorithm and start simulation.
*/
function startNeighbourSamplingSimulation() {
springForce = true;
simulation.stop();
p1 = performance.now();
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName, d3.forceNeighbourSamplingDistance()
// Set the parameters for the algorithm (optional).
.neighbourSize(NEIGHBOUR_SIZE)
.sampleSize(SAMPLE_SIZE)
.multiplier(MULTIPLIER)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm);
}));
// Restart the simulation.
console.log(simulation.force(forceName).neighbourSize(), simulation.force(forceName).sampleSize());
simulation.alpha(1).restart();
}
/**
* Initialize the hybrid layout algorithm and start simulation.
*/
function startHybridSimulation() {
springForce = false;
d3.selectAll(".nodes").remove();
simulation.stop();
p1 = performance.now();
hybridSimulation = d3.hybridSimulation(nodes);
hybridSimulation
.multiplier(MULTIPLIER)
.sampleIterations(ITERATIONS)
.pivots(PIVOTS)
.numPivots(NUM_PIVOTS)
.fullIterations(FULL_ITERATIONS)
.neighbourSize(NEIGHBOUR_SIZE)
.sampleSize(SAMPLE_SIZE);
var sample = hybridSimulation.sample();
var remainder = hybridSimulation.remainder();
// Add the nodes to DOM.
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(sample)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTooltip(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - (15 * props.length)) + "px")
.style("width", (6 * tooltipWidth) + "px")
.style("height", (14 * props.length) + "px");
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
});
if (selectedData) {
unSelectNodes(selectedData);
}
hybridSimulation
.distance(distanceFunction);
hybridSimulation
.on("sampleTick", tickedHybrid)
.on("fullTick", tickedHybrid)
.on("startFull", started)
.on("end", endedHybrid);
function tickedHybrid() {
if (rendering === true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
}
function started() {
d3.selectAll(".nodes").remove();
// Add the nodes to DOM.
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTooltip(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - (15 * props.length)) + "px")
.style("width", (6 * tooltipWidth) + "px")
.style("height", (14 * props.length) + "px");
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
});
if (selectedData) {
unSelectNodes(selectedData);
}
}
function endedHybrid() {
if (rendering !== true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
// Performance time measurement
p2 = performance.now();
console.log("Execution time: " + (p2 - p1));
// Do not calculate stress for data sets bigger than 100 000.
// if (nodes.length <= 100000) {
// console.log("Stress: ", hybridSimulation.stress());
// }
p1 = 0;
p2 = 0;
}
}
/**
* Initialize the t-SNE algorithm and start simulation.
*/
function starttSNE() {
springForce = false;
simulation.stop();
p1 = performance.now();
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName, d3.tSNE()
// Set the parameter for the algorithm (optional).
.perplexity(PERPLEXITY)
.learningRate(LEARNING_RATE)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm) * MULTIPLIER;
}));
// Restart the simulation.
console.log(simulation.force(forceName).perplexity(), simulation.force(forceName).learningRate());
simulation.alpha(1).restart();
}
/**
* Initialize the Barnes-Hut algorithm and start simulation.
*/
function startBarnesHutSimulation() {
springForce = false;
simulation.stop();
p1 = performance.now();
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName, d3.forceBarnesHut()
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm) * MULTIPLIER;
}));
// Restart the simulation.
simulation.alpha(1).restart();
}
/**
* Initialize the link force algorithm and start simulation.
*/
function startLinkSimulation() {
springForce = false;
simulation.stop();
p1 = performance.now();
// Initialize link array.
nodes = simulation.nodes();
for (i = 0; i < nodes.length; i++) {
for (j = 0; j < nodes.length; j++) {
if (i !== j) {
links.push({
source: nodes[i],
target: nodes[j],
});
}
}
}
// Add the links to the simulation.
simulation.force(forceName, d3.forceLink().links(links));
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (n) {
return distanceFunction(n.source, n.target, props, norm) * MULTIPLIER;
})
// Set the parameter for the algorithm (optional).
.strength(1);
// Restart the simulation.
simulation.alpha(1).restart();
}
/**
* Halt the execution.
*/
function stopSimulation() {
simulation.stop();
if (typeof hybridSimulation !== 'undefined') {
hybridSimulation.stop();
}
}
/**
* Calculate the average values of the array.
* @param {array} array
* @return {number} the mean of the array.
*/
function getAverage(array) {
var total = 0;
for (var i = 0; i < array.length; i++) {
total += array[i];
}
return total / array.length;
}
/**
* Deselect the nodes to match the selection from other window.
* @param {*} data
*/
function unSelectNodes(data) {
selectedData = data;
if (fileName === data.name && nodes) {
node
.classed("notSelected", function (d) {
if (data.indices.indexOf(d.index) < 0) {
return true;
}
return false;
});
}
}
/**
* Highlight the neighbours for neighbour and sampling algorithm and show the corresponding MNIST images for each node.
* @param {*} indices
*/
function highlightNeighbours(index, indices) {
var selectedNodes = [nodes[index]];
indices.forEach(function (i) {
selectedNodes.push(nodes[i]);
});
var ratio = NODE_SIZE / 10;
svg.selectAll("image").remove();
imgs.data(selectedNodes).enter()
.append("svg:image")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.attr("xlink:href", function (d) {
return "data/mnist/images/" + d.index + ".png";
})
.attr("x", function (d) {
return d.x + (ratio * 20);
})
.attr("y", function (d) {
return d.y - (ratio * 20);
})
.attr("width", ratio * 28)
.attr("height", ratio * 28);
node
.attr("r", function (d) {
if (indices.indexOf(d.index) >= 0) {
return NODE_SIZE * 2;
}
return NODE_SIZE;
})
.attr("stroke-width", function (d) {
if (indices.indexOf(d.index) >= 0) {
return NODE_SIZE * 0.2 + "px";
}
return "0px";
})
.attr("stroke", "white");
}
/**
* Highlight all the nodes with the same class on hover
* @param {*} highlighValue
*/
function highlightOnHover(highlighValue) {
node.attr("opacity", function (d) {
return (highlighValue === d[COLOR_ATTRIBUTE]) ? 1 : 0.3;
});
}
/**
* Color the nodes according to given attribute.
*/
function colorToAttribute() {
node.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
});
}

656
examples/js/src/neighbourSampling-papaparsing.js Normal file
View File

@@ -0,0 +1,656 @@
// Get the width and heigh of the SVG element.
var width = +document.getElementById('svg').clientWidth,
height = +document.getElementById('svg').clientHeight;
var svg = d3.select("svg")
.call(d3.zoom().scaleExtent([0.0001, 1000000]).on("zoom", function () {
svg.attr("transform", d3.event.transform);
}))
.append("g");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var brush = d3.brush()
.extent([[-9999999, -9999999], [9999999, 9999999]])
.on("end", brushEnded);
svg.append("g")
.attr("class", "brush")
.call(brush);
var intercom = Intercom.getInstance();
intercom.on("select", unSelectNodes);
var links = [],
nodes,
node,
props,
norm,
p1 = 0,
p2 = 0,
size,
distanceFunction,
simulation,
velocities = [],
rendering = true, // Rendering during the execution.
forceName = "forces",
springForce = false,
tooltipWidth = 0,
fileName = "",
selectedData,
clickedIndex = -1,
paused = false;
// Default parameters
var MULTIPLIER = 50,
PERPLEXITY = 30,
LEARNING_RATE = 10,
NEIGHBOUR_SIZE = 6,
SAMPLE_SIZE = 3,
PIVOTS = false,
NUM_PIVOTS = 3,
ITERATIONS = 300,
FULL_ITERATIONS = 20,
NODE_SIZE = 10,
COLOR_ATTRIBUTE = "",
SELECTED_DISTANCE = 10;
// Create a color scheme for a range of numbers.
var color = d3.scaleOrdinal(d3.schemeCategory10);
/**
* Parse the data from the provided csv file using Papa Parse library
* @param {file} evt - csv file.
*/
function parseFile(evt) {
// Clear the previous nodes
d3.selectAll(".nodes").remove();
springForce = false;
fileName = evt.target.files[0].name;
Papa.parse(evt.target.files[0], {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete: function (results) {
processData(results.data, results.error);
}
});
}
/**
* Process the data and pass it into D3 force simulation.
* @param {array} data
* @param {object} error
*/
function processData(data, error) {
if (error) throw error.message;
nodes = data;
// Number of iterations before stopping.
size = nodes.length;
console.log("Number of iterations: ", ITERATIONS);
// Start by placing the nodes at the center (its starting positions).
simulation = d3.forceSimulation();
//Put the nodes in random starting positions
nodes.forEach(function (d) {
d.x = (Math.random()-0.5) * 100000;
d.y = (Math.random()-0.5) * 100000;
});
console.log("n =", nodes.length);
// Calculate normalization arguments and get the list of
// properties of the nodes.
norm = calculateNormalization(nodes);
props = Object.keys(nodes[0]);
COLOR_ATTRIBUTE = props[0];
var opts = document.getElementById('color_attr').options;
props.forEach(function (d) {
opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE) ? true : false));
});
// Add the nodes to DOM.
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE]);
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTooltip(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - (15 * props.length)) + "px")
.style("width", (6 * tooltipWidth) + "px")
.style("height", (14 * props.length) + "px");
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
})
.on("click", function (d) {
if (clickedIndex !== d.index) {
if (springForce) {
highlightNeighbours(Array.from(simulation.force(forceName).nodeNeighbours(d.index).keys()));
clickedIndex = d.index;
}
} else {
node.attr("r", NODE_SIZE).attr("stroke-width", 0);
clickedIndex = -1;
}
});
// Pass the nodes to the D3 force simulation.
simulation
.nodes(nodes)
.on("tick", ticked)
.on("end", ended);
function ticked() {
// If rendering is selected, then draw at every iteration.
if (rendering === true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
// Emit the distribution data to allow the drawing of the bar graph
if (springForce) {
intercom.emit("passedData", simulation.force(forceName).distributionData());
}
}
function ended() {
if (rendering !== true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
if (p1 !== 0) {
// Performance time measurement
p2 = performance.now();
console.log("Execution time: " + (p2 - p1));
// Do not calculate stress for data sets bigger than 100 000.
// if (nodes.length <= 100000) {
// console.log("Stress: ", simulation.force(forceName).stress());
// }
// console.log(simulation.force(forceName).nodeNeighbours());
p1 = 0;
p2 = 0;
}
}
};
function brushEnded() {
var s = d3.event.selection,
results = [];
if (s) {
var x0 = s[0][0] - width / 2,
y0 = s[0][1] - height / 2,
x1 = s[1][0] - width / 2,
y1 = s[1][1] - height / 2;
if (nodes) {
var sel = node.filter(function (d) {
if (d.x > x0 && d.x < x1 && d.y > y0 && d.y < y1) {
return true;
}
return false;
}).data();
results = sel.map(function (a) { return a.index; });
}
intercom.emit("select", { name: fileName, indices: results });
d3.select(".brush").call(brush.move, null);
}
}
/**
* Format the tooltip for the data
* @param {*} node
*/
function formatTooltip(node) {
var textString = "",
temp = "";
tooltipWidth = 0;
props.forEach(function (element) {
temp = element + ": " + node[element] + "<br/>";
textString += temp;
if (temp.length > tooltipWidth) {
tooltipWidth = temp.length;
}
});
return textString;
}
/**
* Initialize the Chalmers' 1996 algorithm and start simulation.
*/
function startNeighbourSamplingSimulation() {
springForce = true;
simulation.stop();
p1 = performance.now();
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName, d3.forceNeighbourSamplingDistance()
// Set the parameters for the algorithm (optional).
.neighbourSize(NEIGHBOUR_SIZE)
.sampleSize(SAMPLE_SIZE)
// .freeness(0.5)
.multiplier(MULTIPLIER)
.distanceRange(SELECTED_DISTANCE)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm);
}));
// Restart the simulation.
console.log(simulation.force(forceName).neighbourSize(), simulation.force(forceName).sampleSize());
simulation.alpha(1).restart();
}
/**
* Initialize the hybrid layout algorithm and start simulation.
*/
function startHybridSimulation() {
springForce = false;
d3.selectAll(".nodes").remove();
simulation.stop();
p1 = performance.now();
hybridSimulation = d3.hybridSimulation(nodes);
hybridSimulation
.multiplier(MULTIPLIER)
.sampleIterations(ITERATIONS)
.pivots(PIVOTS)
.numPivots(NUM_PIVOTS)
.fullIterations(FULL_ITERATIONS)
.neighbourSize(NEIGHBOUR_SIZE)
.sampleSize(SAMPLE_SIZE);
var sample = hybridSimulation.sample();
var remainder = hybridSimulation.remainder();
// Add the nodes to DOM.
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(sample)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTooltip(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - (15 * props.length)) + "px")
.style("width", (6 * tooltipWidth) + "px")
.style("height", (14 * props.length) + "px");
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
});
if (selectedData) {
unSelectNodes(selectedData);
}
hybridSimulation
.distance(distanceFunction);
hybridSimulation
.on("sampleTick", tickedHybrid)
.on("fullTick", tickedHybrid)
.on("startFull", started)
.on("end", endedHybrid);
function tickedHybrid() {
if (rendering === true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
}
function started() {
d3.selectAll(".nodes").remove();
// Add the nodes to DOM.
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
})
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(formatTooltip(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - (15 * props.length)) + "px")
.style("width", (6 * tooltipWidth) + "px")
.style("height", (14 * props.length) + "px");
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
});
if (selectedData) {
unSelectNodes(selectedData);
}
}
function endedHybrid() {
if (rendering !== true) {
node
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
}
// Performance time measurement
p2 = performance.now();
console.log("Execution time: " + (p2 - p1));
// Do not calculate stress for data sets bigger than 100 000.
// if (nodes.length <= 100000) {
// console.log("Stress: ", hybridSimulation.stress());
// }
p1 = 0;
p2 = 0;
}
}
/**
* Initialize the t-SNE algorithm and start simulation.
*/
function starttSNE() {
springForce = false;
simulation.stop();
p1 = performance.now();
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName, d3.tSNE()
// Set the parameter for the algorithm (optional).
.perplexity(PERPLEXITY)
.learningRate(LEARNING_RATE)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm) * MULTIPLIER;
}));
// Restart the simulation.
console.log(simulation.force(forceName).perplexity(), simulation.force(forceName).learningRate());
simulation.alpha(1).restart();
}
/**
* Initialize the Barnes-Hut algorithm and start simulation.
*/
function startBarnesHutSimulation() {
springForce = false;
simulation.stop();
p1 = performance.now();
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName, d3.forceBarnesHut()
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm) * MULTIPLIER;
}));
// Restart the simulation.
simulation.alpha(1).restart();
}
/**
* Initialize the link force algorithm and start simulation.
*/
function startLinkSimulation() {
springForce = false;
simulation.stop();
p1 = performance.now();
// Initialize link array.
nodes = simulation.nodes();
for (i = 0; i < nodes.length; i++) {
for (j = 0; j < nodes.length; j++) {
if (i !== j) {
links.push({
source: nodes[i],
target: nodes[j],
});
}
}
}
// Add the links to the simulation.
simulation.force(forceName, d3.forceLink().links(links));
simulation
.alphaDecay(1 - Math.pow(0.001, 1 / ITERATIONS))
.force(forceName)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (n) {
return distanceFunction(n.source, n.target, props, norm) * MULTIPLIER;
})
// Set the parameter for the algorithm (optional).
.strength(1);
// Restart the simulation.
simulation.alpha(1).restart();
}
/**
* Halt the execution.
*/
function stopSimulation() {
simulation.stop();
if (typeof hybridSimulation !== 'undefined') {
hybridSimulation.stop();
}
}
/**
* Calculate the average values of the array.
* @param {array} array
* @return {number} the mean of the array.
*/
function getAverage(array) {
var total = 0;
for (var i = 0; i < array.length; i++) {
total += array[i];
}
return total / array.length;
}
/**
* Deselect the nodes to match the selection from other window.
* @param {*} data
*/
function unSelectNodes(data) {
selectedData = data;
if (fileName === data.name && nodes) {
node
.classed("notSelected", function (d) {
if (data.indices.indexOf(d.index) < 0) {
return true;
}
return false;
});
}
}
/**
* Highlight the neighbours for neighbour and sampling algorithm
* @param {*} indices
*/
function highlightNeighbours(indices) {
node
.attr("r", function (d) {
if (indices.indexOf(d.index) >= 0) {
return NODE_SIZE * 2;
}
return NODE_SIZE;
})
.attr("stroke-width", function (d) {
if (indices.indexOf(d.index) >= 0) {
return NODE_SIZE * 0.2 + "px";
}
return "0px";
})
.attr("stroke", "white");
}
/**
* Highlight all the nodes with the same class on hover
* @param {*} highlighValue
*/
function highlightOnHover(highlighValue) {
node.attr("opacity", function (d) {
return (highlighValue === d[COLOR_ATTRIBUTE]) ? 1 : 0.3;
});
}
/**
* Color the nodes according to given attribute.
*/
function colorToAttribute() {
node.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
});
}
/**
* Update the distance range.
*/
function updateDistanceRange() {
if (springForce) {
simulation.force(forceName).distanceRange(SELECTED_DISTANCE);
}
}
/**
* Implemented pause/resume functionality
*/
function pauseUnPause() {
if (simulation) {
if (paused) {
simulation.force(forceName).distanceRange(SELECTED_DISTANCE);
simulation.restart();
d3.select("#pauseButton").text("Pause");
paused = false;
} else {
simulation.stop();
d3.select("#pauseButton").text("Resume");
paused = true;
}
}
}
/**
* Average distances for each node.
* @param {*} dataNodes
* @param {*} properties
* @param {*} normalization
*/
function calculateAverageDistance(dataNodes, properties, normalization) {
var sum = 0,
n = nodes.length;
for (var i = 0; i < n; i++) {
var sumNode = 0;
for (var j = 0; j < n; j++) {
if (i !== j) {
sumNode += distanceFunction(nodes[i], nodes[j], properties, normalization);
// console.log(sumNode);
}
}
sum += sumNode / (n - 1);
}
return sum / n;
}

109
examples/js/src/pivotFinder.js Normal file
View File

@@ -0,0 +1,109 @@
function findPivots(dataSet, sampleSet, remainderSet) {
var distance = calculateDistancePoker;
// Initialize
var numBuckets = Math.floor(Math.sqrt(sampleSet.length)),
numPivots = Math.floor(Math.sqrt(sampleSet.length)),
parents = [],
maxDists = [],
bucketWidths = [],
pivotsBuckets = [];
var pivots = createRandomSample(dataSet, sampleSet.length, numPivots);
for (var i = 0; i < numPivots; i++) {
pivotsBuckets[i] = [];
for (var j = 0; j < numBuckets; j++) {
pivotsBuckets[i][j] = [];
}
}
// Pre-processing
var fullDists = []
for (var i = 0; i < sampleSet.length; i++) {
fullDists[i] = [];
}
for (var j = 0, maxDist = -1; j < numPivots; j++) {
var c1 = pivots[j];
for (var i = 0; i < sampleSet.length; i++) {
var c2 = sampleSet[i];
if (c1 !== c2) {
var dist = distance(c1, c2);
// console.log(dist, c1, c2);
if (dist > maxDist) {
maxDist = dist;
}
fullDists[i][j] = dist;
} else {
fullDists[i][j] = 0.0001;
}
}
maxDists.push(maxDist);
bucketWidths.push(maxDist / numBuckets);
}
// console.log(fullDists);
for (var j = 0; j < numPivots; j++) {
var bucketWidth = bucketWidths[j];
for (var i = 0; i < sampleSet.length; i++) {
var tmp = pivotsBuckets[j][Math.floor((fullDists[i][j] - 0.0001) / bucketWidth)];
// pivotsBuckets[j][Math.floor((fullDists[i][j] - 0.0001) / bucketWidth)].push(sampleSet[i]);
// console.log(tmp, i, j, bucketWidth, Math.floor((fullDists[i][j] - 0.0001) / bucketWidth));
tmp.push(sampleSet[i]);
}
}
// Find parents
for (var r = 0, bNum, minIndex; r < remainderSet.length; r++) {
var node = remainderSet[r];
var clDist = Number.MAX_VALUE;
for (var p = 0; p < numPivots; p++) {
var comp = pivots[p];
var bucketWidth = bucketWidths[p];
if (node !== comp) {
var dist = distance(node, comp);
bNum = Math.floor((dist - 0.0001) / bucketWidth);
if (bNum >= numBuckets) {
bNum = numBuckets - 1;
} else if (bNum < 0) {
bNum = 0;
}
var bucketContents = pivotsBuckets[p][bNum];
for (var w = 0; w < bucketContents.length; w++) {
var c1 = bucketContents[w];
if (c1 != node) {
dist = distance(c1, node);
if (dist <= clDist) {
clDist = dist;
minIndex = bucketContents[w];
}
}
}
}
}
parents.push(minIndex);
}
return parents;
}
function createRandomSample(nodes, max, size) {
var randElements = [];
for (var i = 0; i < size; ++i) {
// Stop when no new elements can be found.
if (randElements.size >= nodes.length) {
break;
}
var rand = Math.floor((Math.random() * max));
// If the rand is already in random list or in exclude list
// ignore it and get a new value.
while (randElements.includes(rand)) {
rand = Math.floor((Math.random() * max));
}
randElements.push(nodes[rand]);
}
return randElements;
}

274
examples/nist-images.html Normal file
View File

@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
h1 {
text-align: center;
margin: 10px 0 10px 0;
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
/*.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}*/
circle:hover {
fill: #8B0000;
opacity: 0.8;
}
.notSelected {
fill: #999;
opacity: 0.8;
}
.highlighted {
fill: black;
}
#svg {
border-style: solid;
margin: auto;
}
.left {
float: left;
width: 32%;
}
.controls {
flex-basis: 200px;
padding: 0 5px;
}
.controls input[type="range"] {
margin: 0 5% 0.5em 5%;
width: 90%;
}
.multiplier {
margin: 10px 0 10px 0;
}
.parameters {
margin: 10px 0 10px 30px;
}
.checkbox {
margin: 10px 0 10px 0;
}
.start {
text-align: center;
}
div.tooltip {
position: absolute;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<body>
<h1>Evaluation</h1>
<svg id="svg" width="100%" height="600">
<div class="left controls">
<div class="input">
<input type="file" id="csv-file" name="files">
</div>
<div class="multiplier">
<label title="The size of the nodes">
Node size
<output id="nodeSizeSliderOutput">10</output>
<input type="range" min="5" max="200" value="10" step="5" oninput="d3.select('#nodeSizeSliderOutput').text(value); NODE_SIZE=value; d3.selectAll('circle').attr('r', value);">
</label>
<br/>
<label title="The number that distance is multiplied by in order to improve the visibility of the graph">
distanceMultiplier
<output id="distanceMultiplierSliderOutput">50</output>
<input type="range" min="5" max="1000" value="50" step="5" oninput="d3.select('#distanceMultiplierSliderOutput').text(value); MULTIPLIER=value;">
</label>
<br/>
<label title="Number of iterations before the simulation is stopped">
Iterations
<output id="iterationsSliderOutput">300</output>
<input type="range" min="5" max="5000" value="300" step="5" oninput="d3.select('#iterationsSliderOutput').text(value); ITERATIONS=value;">
</label>
<br/>
<label title="Attribute used for coloring nodes">
Color attribute
<select id="color_attr" onchange="COLOR_ATTRIBUTE=value; colorToAttribute();">
</select>
</label>
</div>
<div class="checkbox">
<label title="js/">
Rendering
<input type="checkbox" checked onclick="rendering=!rendering;">
</label>
</div>
<div class="start">
<button id="startSimulation" form="algorithmForm">Start</button>
<button onclick="stopSimulation()">Stop</button>
</div>
</div>
<div class="left">
<p>Select algorithm:</p>
<div id="algorithms">
<input id="HLButton" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startHybridSimulation)">Hybrid
layout
<br>
<div id="HLParameters" class="parameters" style="display:none">
<div id="pivots">
<input id="BFButton" type="radio" name="pivots" checked="checked" onclick="PIVOTS=false;">Brute-force<br>
<input id="PButton" type="radio" name="pivots" onclick="PIVOTS=true;">Pivots<br>
<div id="numPivots" class="parameters" style="display:none">
<label title="The number of pivots">
Number of Pivots
<output id="numPivotsSliderOutput">3</output><br/>
<input type="range" min="1" max="50" value="3" step="1" oninput="d3.select('#numPivotsSliderOutput').text(value); NUM_PIVOTS=value;">
</label>
</div>
</div>
<br/>
<label title="Number of iterations done at the end">
Full iterations
<output id="fullIterationsSliderOutput">20</output><br/>
<input type="range" min="1" max="100" value="20" step="1" oninput="d3.select('#fullIterationsSliderOutput').text(value); FULL_ITERATIONS=value;">
</label>
<br/>
<label title="NeighbourSize">
Neighbour Set
<output id="hlneighbourSizeSliderOutput">6</output><br/>
<input type="range" min="1" max="100" value="6" step="1" oninput="d3.select('#hlneighbourSizeSliderOutput').text(value); NEIGHBOUR_SIZE=value;">
</label>
<br/>
<label title="SampleSize">
Sample Set
<output id="hlsampleSizeSliderOutput">3</output><br/>
<input type="range" min="1" max="100" value="3" step="1" oninput="d3.select('#hlsampleSizeSliderOutput').text(value); SAMPLE_SIZE=value;">
</label>
</div>
<input id="NSButton" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startNeighbourSamplingSimulation)">Neighbour
and Sampling<br>
<div id="NSParameters" class="parameters" style="display:none">
<label title="NeighbourSize">
Neighbour Set
<output id="neighbourSizeSliderOutput">6</output><br/>
<input type="range" min="1" max="100" value="6" step="1" oninput="d3.select('#neighbourSizeSliderOutput').text(value); NEIGHBOUR_SIZE=value;">
</label>
<br/>
<label title="SampleSize">
Sample Set
<output id="sampleSizeSliderOutput">3</output><br/>
<input type="range" min="1" max="100" value="3" step="1" oninput="d3.select('#sampleSizeSliderOutput').text(value); SAMPLE_SIZE=value;">
</label>
</div>
<input class="noParameters" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startLinkSimulation)">Link
force in D3<br>
<input class="noParameters" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', startBarnesHutSimulation)">Barnes-Hut<br>
<input id="tSNEButton" type="radio" name="algorithm" onclick="d3.select('#startSimulation').on('click', starttSNE)">t-SNE<br>
<div id="tSNEParameters" class="parameters" style="display:none">
<label title="Perplexity">
Perplexity
<output id="perplexitySliderOutput">30</output><br/>
<input type="range" min="1" max="500" value="30" step="1" oninput="d3.select('#perplexitySliderOutput').text(value); PERPLEXITY=value;">
</label>
<br/>
<label title="LearningRate">
Learning Rate
<output id="learningRateSliderOutput">10</output><br/>
<input type="range" min="1" max="500" value="10" step="1" oninput="d3.select('#learningRateSliderOutput').text(value); LEARNING_RATE=value;">
</label>
</div>
</div>
</div>
<div class="left">
<p>Select distance function:</p>
<div id="distance">
<input type="radio" name="distance" onclick="distanceFunction=calculateDistance"> General<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateEuclideanDistance"> Euclidean<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateManhattanDistance"> Manhattan<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateJaccardDissimilarity"> Jaccard<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateDiceDissimilarity"> Dice<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateCosineSimilarity"> Cosine<br>
<input type="radio" name="distance" onclick="distanceFunction=calculateDistancePoker"> Poker Hands<br>
</div>
</div>
</svg>
</body>
<!-- Load the files and libraries used. -->
<script src="js/lib/d3.v4.min.js"></script>
<script src="js/lib/papaparse.js"></script>
<script src="js/lib/jquery-3.1.1.js"></script>
<script src="js/lib/intercom.js"></script>
<script src="../build/d3-neighbour-sampling.js"></script>
<script src="js/src/neighbourSampling-papaparsing-nist-images.js"></script>
<script src="js/distances/distancePokerHands.js"></script>
<script src="js/distances/distance.js"></script>
<script src="js/distances/euclideanDistance.js"></script>
<script src="js/distances/euclideanDistanceInTSNE.js"></script>
<script src="js/distances/manhattanDistance.js"></script>
<script src="js/distances/jaccardDissimilarity.js"></script>
<script src="js/distances/diceDissimilarity.js"></script>
<script src="js/distances/cosineSimilarity.js"></script>
<script src="js/distances/normalization.js"></script>
<script src="js/distances/numeric.js"></script>
<script>
$(document).ready(function () {
$("#csv-file").change(function (d) {
parseFile(d);
$("#color_attr option").remove();
});
$("#tSNEButton").click(function () {
$(".parameters").hide();
$("#tSNEParameters").show();
});
$("#NSButton").click(function () {
$(".parameters").hide();
$("#NSParameters").show();
});
$("#HLButton").click(function () {
$(".parameters").hide();
$("#HLParameters").show();
if ($("#PButton").is(":checked")) {
$("#numPivots").show();
}
});
$("#BFButton").click(function () {
$("#numPivots").hide();
});
$("#PButton").click(function () {
$("#numPivots").show();
});
$(".noParameters").click(function () {
$(".parameters").hide();
});
});
</script>
</html>