From 5706f5e89155c8b00450ae3d37d6fafafae5b1e6 Mon Sep 17 00:00:00 2001
From: Pitchaya Boonsarngsuk <2285135b@student.gla.ac.uk>
Date: Fri, 19 Jan 2018 10:22:16 +0000
Subject: [PATCH] Move distance multiplier to rendering only

---
 ...3-force-neighbourSampling-papaparsing.html |   4 +-
 .../js/src/neighbourSampling-papaparsing.js   | 283 ++----------------
 .../neighbourSampling-papaparsing/hybrid.js   |   6 +-
 .../linkForce.js                              |   2 +-
 .../neighbourSampling.js                      |   6 +-
 5 files changed, 28 insertions(+), 273 deletions(-)

diff --git a/examples/d3-force-neighbourSampling-papaparsing.html b/examples/d3-force-neighbourSampling-papaparsing.html
index 8f0159b..871b5d9 100644
--- a/examples/d3-force-neighbourSampling-papaparsing.html
+++ b/examples/d3-force-neighbourSampling-papaparsing.html
@@ -94,9 +94,9 @@
         </label>
         <br/>
         <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>
-          <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>
         <br/>
         <label title="Number of iterations before the simulation is stopped">
diff --git a/examples/js/src/neighbourSampling-papaparsing.js b/examples/js/src/neighbourSampling-papaparsing.js
index 74f4f7c..991e60b 100644
--- a/examples/js/src/neighbourSampling-papaparsing.js
+++ b/examples/js/src/neighbourSampling-papaparsing.js
@@ -8,7 +8,6 @@ var svg = d3.select("svg")
   }))
   .append("g");
 
-
 var div = d3.select("body").append("div")
   .attr("class", "tooltip")
   .style("opacity", 0);
@@ -118,11 +117,21 @@ function processData(data, error) {
     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")
     .attr("class", "nodes")
     .selectAll("circle")
-    .data(nodes)
+    .data(data)
     .enter().append("circle")
     .attr("r", NODE_SIZE)
     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
@@ -159,24 +168,19 @@ function processData(data, error) {
         clickedIndex = -1;
       }
     });
-
-
-  // Pass the nodes to the D3 force simulation.
-  simulation
-    .nodes(nodes)
-    .on("tick", ticked)
-    .on("end", ended);
-};
+    if (selectedData)
+      unSelectNodes(selectedData);
+}
 
 function ticked() {
   // If rendering is selected, then draw at every iteration.
   if (rendering === true) {
     node // Each sub-circle in the SVG, update cx and cy
       .attr("cx", function (d) {
-        return d.x;
+        return d.x*MULTIPLIER;
       })
       .attr("cy", function (d) {
-        return d.y;
+        return d.y*MULTIPLIER;
       });
   }
   // 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.
     node
       .attr("cx", function (d) {
-        return d.x;
+        return d.x*MULTIPLIER;
       })
       .attr("cy", function (d) {
-        return d.y;
+        return d.y*MULTIPLIER;
       });
   }
 
@@ -258,254 +262,6 @@ function formatTooltip(node) {
   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.
  */
@@ -536,7 +292,6 @@ function getAverage(array) {
 function unSelectNodes(data) {
 
   selectedData = data;
-
   if (fileName === data.name && nodes) {
     node
       .classed("notSelected", function (d) {
diff --git a/examples/js/src/neighbourSampling-papaparsing/hybrid.js b/examples/js/src/neighbourSampling-papaparsing/hybrid.js
index 321c34f..13b45f7 100644
--- a/examples/js/src/neighbourSampling-papaparsing/hybrid.js
+++ b/examples/js/src/neighbourSampling-papaparsing/hybrid.js
@@ -12,12 +12,12 @@ function startHybridSimulation() {
     iteration: ITERATIONS,
     neighbourSize: NEIGHBOUR_SIZE,
     sampleSize: SAMPLE_SIZE,
-    distanceRange: SELECTED_DISTANCE * MULTIPLIER,
+    distanceRange: SELECTED_DISTANCE,
     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;},
+    fullDistanceRange: FULL_SELECTED_DISTANCE,
+    distanceFn: function (s, t) {return distanceFunction(s, t, props, norm);},
     pivots: PIVOTS,
     numPivots: NUM_PIVOTS
   };
diff --git a/examples/js/src/neighbourSampling-papaparsing/linkForce.js b/examples/js/src/neighbourSampling-papaparsing/linkForce.js
index 97f07b5..7e05dc5 100644
--- a/examples/js/src/neighbourSampling-papaparsing/linkForce.js
+++ b/examples/js/src/neighbourSampling-papaparsing/linkForce.js
@@ -31,7 +31,7 @@ function startLinkSimulation() {
     // The distance function that will be used to calculate distances
     //  between nodes.
     .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).
     .strength(1);
diff --git a/examples/js/src/neighbourSampling-papaparsing/neighbourSampling.js b/examples/js/src/neighbourSampling-papaparsing/neighbourSampling.js
index 1376492..0fc01dd 100644
--- a/examples/js/src/neighbourSampling-papaparsing/neighbourSampling.js
+++ b/examples/js/src/neighbourSampling-papaparsing/neighbourSampling.js
@@ -14,13 +14,13 @@ function startNeighbourSamplingSimulation() {
       .neighbourSize(NEIGHBOUR_SIZE)
       .sampleSize(SAMPLE_SIZE)
       // .freeness(0.5)
-      .distanceRange(SELECTED_DISTANCE * 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) * MULTIPLIER;
+        return distanceFunction(s, t, props, norm);
       })
-      .stableVelocity(1.2 * MULTIPLIER)
+      .stableVelocity(1.2)
       .stableVeloHandler( function(){simulation.stop(); ended();} )
       );
   // Restart the simulation.