Init from given files
This commit is contained in:
Pitchaya Boonsarngsuk
579
examples/js/src/neighbourSampling-papaparsing-nist-images.js
Normal file
579
examples/js/src/neighbourSampling-papaparsing-nist-images.js
Normal 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])
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user