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

Move distance multiplier to rendering only

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2018-01-19 10:22:16 +00:00
parent feec778c62
commit 5706f5e891
5 changed files with 28 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/d3-force-neighbourSampling-papaparsing.html
View File

@@ -94,9 +94,9 @@
</label> </label>
<br/> <br/>
<label title="The number that distance is multiplied by in order to improve the visibility of the graph"> <label title="The number that distance is multiplied by in order to improve the visibility of the graph">
distanceMultiplier Render Distance Multiplier
<output id="distanceMultiplierSliderOutput">50</output> <output id="distanceMultiplierSliderOutput">50</output>
<input type="range" min="5" max="1000" value="50" step="5" oninput="d3.select('#distanceMultiplierSliderOutput').text(value); MULTIPLIER=value;"> <input type="range" min="5" max="1000" value="50" step="5" oninput="d3.select('#distanceMultiplierSliderOutput').text(value); MULTIPLIER=value;ticked();">
</label> </label>
<br/> <br/>
<label title="Number of iterations before the simulation is stopped"> <label title="Number of iterations before the simulation is stopped">

283
examples/js/src/neighbourSampling-papaparsing.js
View File

@@ -8,7 +8,6 @@ var svg = d3.select("svg")
})) }))
.append("g"); .append("g");
var div = d3.select("body").append("div") var div = d3.select("body").append("div")
.attr("class", "tooltip") .attr("class", "tooltip")
.style("opacity", 0); .style("opacity", 0);
@@ -118,11 +117,21 @@ function processData(data, error) {
d.y = (Math.random()-0.5) * 100000; d.y = (Math.random()-0.5) * 100000;
}); });
// Add the nodes to DOM. addNodesToDOM(nodes);
// Pass the nodes to the D3 force simulation.
simulation
.nodes(nodes)
.on("tick", ticked)
.on("end", ended)
.stop();
};
function addNodesToDOM(data) {
node = svg.append("g") node = svg.append("g")
.attr("class", "nodes") .attr("class", "nodes")
.selectAll("circle") .selectAll("circle")
.data(nodes) .data(data)
.enter().append("circle") .enter().append("circle")
.attr("r", NODE_SIZE) .attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
@@ -159,24 +168,19 @@ function processData(data, error) {
clickedIndex = -1; clickedIndex = -1;
} }
}); });
if (selectedData)
unSelectNodes(selectedData);
// Pass the nodes to the D3 force simulation. }
simulation
.nodes(nodes)
.on("tick", ticked)
.on("end", ended);
};
function ticked() { function ticked() {
// If rendering is selected, then draw at every iteration. // If rendering is selected, then draw at every iteration.
if (rendering === true) { if (rendering === true) {
node // Each sub-circle in the SVG, update cx and cy node // Each sub-circle in the SVG, update cx and cy
.attr("cx", function (d) { .attr("cx", function (d) {
return d.x; return d.x*MULTIPLIER;
}) })
.attr("cy", function (d) { .attr("cy", function (d) {
return d.y; return d.y*MULTIPLIER;
}); });
} }
// Emit the distribution data to allow the drawing of the bar graph // Emit the distribution data to allow the drawing of the bar graph
@@ -189,10 +193,10 @@ function ended() {
if (rendering !== true) { // Never drawn anything before? Now it's time. if (rendering !== true) { // Never drawn anything before? Now it's time.
node node
.attr("cx", function (d) { .attr("cx", function (d) {
return d.x; return d.x*MULTIPLIER;
}) })
.attr("cy", function (d) { .attr("cy", function (d) {
return d.y; return d.y*MULTIPLIER;
}); });
} }
@@ -258,254 +262,6 @@ function formatTooltip(node) {
return textString; 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)
.distanceRange(SELECTED_DISTANCE * MULTIPLIER)
// The distance function that will be used to calculate distances
// between nodes.
.distance(function (s, t) {
return distanceFunction(s, t, props, norm) * MULTIPLIER;
})
.stableVelocity(1.2 * MULTIPLIER)
.stableVeloHandler( function(){simulation.stop(); ended();} )
);
// 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();
configuration = {
iteration: ITERATIONS,
neighbourSize: NEIGHBOUR_SIZE,
sampleSize: SAMPLE_SIZE,
distanceRange: SELECTED_DISTANCE * MULTIPLIER,
fullIterations: FULL_ITERATIONS,
fullNeighbourSize: FULL_NEIGHBOUR_SIZE,
fullSampleSize: FULL_SAMPLE_SIZE,
fullDistanceRange: FULL_SELECTED_DISTANCE * MULTIPLIER,
distanceFn: function (s, t) {return distanceFunction(s, t, props, norm) * MULTIPLIER;},
pivots: PIVOTS,
numPivots: NUM_PIVOTS
};
console.log(configuration);
hybridSimulation = d3.hybridSimulation(nodes, configuration);
let sample = hybridSimulation.sample();
let 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
.on("sampleTick", ticked)
.on("fullTick", ticked)
.on("startFull", startedFull)
.on("end", endedHybrid);
function startedFull() {
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();
let links = [];
// 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. * Halt the execution.
*/ */
@@ -536,7 +292,6 @@ function getAverage(array) {
function unSelectNodes(data) { function unSelectNodes(data) {
selectedData = data; selectedData = data;
if (fileName === data.name && nodes) { if (fileName === data.name && nodes) {
node node
.classed("notSelected", function (d) { .classed("notSelected", function (d) {

6
examples/js/src/neighbourSampling-papaparsing/hybrid.js
View File

@@ -12,12 +12,12 @@ function startHybridSimulation() {
iteration: ITERATIONS, iteration: ITERATIONS,
neighbourSize: NEIGHBOUR_SIZE, neighbourSize: NEIGHBOUR_SIZE,
sampleSize: SAMPLE_SIZE, sampleSize: SAMPLE_SIZE,
distanceRange: SELECTED_DISTANCE * MULTIPLIER, distanceRange: SELECTED_DISTANCE,
fullIterations: FULL_ITERATIONS, fullIterations: FULL_ITERATIONS,
fullNeighbourSize: FULL_NEIGHBOUR_SIZE, fullNeighbourSize: FULL_NEIGHBOUR_SIZE,
fullSampleSize: FULL_SAMPLE_SIZE, fullSampleSize: FULL_SAMPLE_SIZE,
fullDistanceRange: FULL_SELECTED_DISTANCE * MULTIPLIER, fullDistanceRange: FULL_SELECTED_DISTANCE,
distanceFn: function (s, t) {return distanceFunction(s, t, props, norm) * MULTIPLIER;}, distanceFn: function (s, t) {return distanceFunction(s, t, props, norm);},
pivots: PIVOTS, pivots: PIVOTS,
numPivots: NUM_PIVOTS numPivots: NUM_PIVOTS
}; };

2
examples/js/src/neighbourSampling-papaparsing/linkForce.js
View File

@@ -31,7 +31,7 @@ function startLinkSimulation() {
// The distance function that will be used to calculate distances // The distance function that will be used to calculate distances
// between nodes. // between nodes.
.distance(function (n) { .distance(function (n) {
return distanceFunction(n.source, n.target, props, norm) * MULTIPLIER; return distanceFunction(n.source, n.target, props, norm);
}) })
// Set the parameter for the algorithm (optional). // Set the parameter for the algorithm (optional).
.strength(1); .strength(1);

6
examples/js/src/neighbourSampling-papaparsing/neighbourSampling.js
View File

@@ -14,13 +14,13 @@ function startNeighbourSamplingSimulation() {
.neighbourSize(NEIGHBOUR_SIZE) .neighbourSize(NEIGHBOUR_SIZE)
.sampleSize(SAMPLE_SIZE) .sampleSize(SAMPLE_SIZE)
// .freeness(0.5) // .freeness(0.5)
.distanceRange(SELECTED_DISTANCE * MULTIPLIER) .distanceRange(SELECTED_DISTANCE)
// The distance function that will be used to calculate distances // The distance function that will be used to calculate distances
// between nodes. // between nodes.
.distance(function (s, t) { .distance(function (s, t) {
return distanceFunction(s, t, props, norm) * MULTIPLIER; return distanceFunction(s, t, props, norm);
}) })
.stableVelocity(1.2 * MULTIPLIER) .stableVelocity(1.2)
.stableVeloHandler( function(){simulation.stop(); ended();} ) .stableVeloHandler( function(){simulation.stop(); ended();} )
); );
// Restart the simulation. // Restart the simulation.