แก้ coding style ภาค 11

examples/js/example-papaparsing.js

@@ -2,27 +2,27 @@
 var width = +document.getElementById('svg').clientWidth,
   height = +document.getElementById('svg').clientHeight;
 
-var svg = d3.select("svg")
+var svg = d3.select('svg')
-  .call(d3.zoom().scaleExtent([0.0001, 1000000]).on("zoom", function () {
+  .call(d3.zoom().scaleExtent([0.0001, 1000000]).on('zoom', function () {
-    svg.attr("transform", d3.event.transform);
+    svg.attr('transform', d3.event.transform);
   }))
-  .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);
 
 var brush = d3.brush()
   .extent([[-9999999, -9999999], [9999999, 9999999]])
-  .on("end", brushEnded);
+  .on('end', brushEnded);
 
-svg.append("g")
+svg.append('g')
-  .attr("class", "brush")
+  .attr('class', 'brush')
   .call(brush);
 
-//var intercom = Intercom.getInstance();
+// var intercom = Intercom.getInstance();
 
-//intercom.on("select", unSelectNodes);
+// intercom.on("select", unSelectNodes);
 
 var nodes, // as in Data points
   node, // as in SVG object that have all small circles on screen
@@ -35,10 +35,10 @@ var nodes, // as in Data points
   simulation,
   velocities = [],
   rendering = true, // Rendering during the execution.
-  forceName = "forces",
+  forceName = 'forces',
   springForce = false,
   tooltipWidth = 0,
-  fileName = "",
+  fileName = '',
   selectedData,
   clickedIndex = -1,
   paused = false,
@@ -57,7 +57,7 @@ var MULTIPLIER = 50,
   ITERATIONS = 300,
   FULL_ITERATIONS = 20,
   NODE_SIZE = 10,
-  COLOR_ATTRIBUTE = "",
+  COLOR_ATTRIBUTE = '',
   FULL_NEIGHBOUR_SIZE = 10,
   FULL_SAMPLE_SIZE = 10,
   INTERP_ENDING_ITS = 20;
@@ -65,19 +65,19 @@ var MULTIPLIER = 50,
 // Create a color scheme for a range of numbers.
 var color = d3.scaleOrdinal(d3.schemeCategory10);
 
-$(document).ready(function() {
+$(document).ready(function () {
   distanceFunction = calculateDistance;
   d3.select('#startSimulation').on('click', startHybridSimulation);
-  $("#HLParameters").show();
+  $('#HLParameters').show();
 });
 
 /**
  * Parse the data from the provided csv file using Papa Parse library
  * @param  {file} evt - csv file.
  */
-function parseFile(evt) {
+function parseFile (evt) {
   // Clear the previous nodes
-  d3.selectAll(".nodes").remove();
+  d3.selectAll('.nodes').remove();
   springForce = false;
 
   fileName = evt.target.files[0].name;
@@ -96,7 +96,7 @@ function parseFile(evt) {
  * @param  {array} data
  * @param  {object} error
  */
-function processData(data, error) {
+function processData (data, error) {
   if (error) throw error.message;
 
   nodes = data;
@@ -107,18 +107,17 @@ function processData(data, error) {
   norm = calculateNormalization(nodes);
   props = Object.keys(nodes[0]); // Properties to consider by distance fn
 
-  COLOR_ATTRIBUTE = props[props.length-1];
+  COLOR_ATTRIBUTE = props[props.length - 1];
 
   var opts = document.getElementById('color_attr').options;
 
   props.forEach(function (d) {
-    opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE) ? true : false));
+    opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE)));
   });
-  opts.selectedIndex = props.length-1;
+  opts.selectedIndex = props.length - 1;
-  //props.pop(); //Hide Iris index / last column from the distance function
+  // props.pop(); //Hide Iris index / last column from the distance function
 
-
+  // Put the nodes at (0,0)
-  //Put the nodes at (0,0)
   nodes.forEach(function (d) {
     d.x = 0;
     d.y = 0;
@@ -134,101 +133,99 @@ function processData(data, error) {
   ticked();
 };
 
-function addNodesToDOM(data) {
+function addNodesToDOM (data) {
-  node = svg.append("g")
+  node = svg.append('g')
-    .attr("class", "nodes")
+    .attr('class', 'nodes')
-    .selectAll("circle")
+    .selectAll('circle')
     .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 + ')')
     // Color code the data points by a property (for Poker Hands,
     // it is a CLASS property).
-    .attr("fill", function (d) {
+    .attr('fill', function (d) {
       return color(d[COLOR_ATTRIBUTE]);
     })
-    .on("mouseover", function (d) {
+    .on('mouseover', function (d) {
       div.transition()
         .duration(200)
-        .style("opacity", .9);
+        .style('opacity', 0.9);
       div.html(formatTooltip(d))
-        .style("left", (d3.event.pageX) + "px")
+        .style('left', (d3.event.pageX) + 'px')
-        .style("top", (d3.event.pageY - (15 * props.length)) + "px")
+        .style('top', (d3.event.pageY - (15 * props.length)) + 'px')
-        .style("width", (6 * tooltipWidth) + "px")
+        .style('width', (6 * tooltipWidth) + 'px')
-        .style("height", (14 * props.length) + "px");
+        .style('height', (14 * props.length) + 'px');
       highlightOnHover(d[COLOR_ATTRIBUTE]);
     })
-    .on("mouseout", function (d) {
+    .on('mouseout', function (d) {
       div.transition()
         .duration(500)
-        .style("opacity", 0);
+        .style('opacity', 0);
-      node.attr("opacity", 1);
+      node.attr('opacity', 1);
     })
-    .on("click", function (d) {
+    .on('click', function (d) {
-      console.log("click", clickedIndex);
+      console.log('click', clickedIndex);
       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);
+        node.attr('r', NODE_SIZE).attr('stroke-width', 0);
         clickedIndex = -1;
       }
     });
-    if (selectedData)
+  if (selectedData) { unSelectNodes(selectedData); }
-      unSelectNodes(selectedData);
 }
 
-function ticked() {
+function ticked () {
   alreadyRanIterations++;
   // 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) {
+      .attr('cx', function (d) {
-        return d.x*MULTIPLIER;
+        return d.x * MULTIPLIER;
       })
-      .attr("cy", function (d) {
+      .attr('cy', function (d) {
-        return d.y*MULTIPLIER;
+        return d.y * MULTIPLIER;
       });
   }
   // Legacy: Emit the distribution data to allow the drawing of the bar graph
-  //if (springForce) {
+  // if (springForce) {
   //  intercom.emit("passedData", simulation.force(forceName).distributionData());
-  //}
+  // }
-  if(manualStop && alreadyRanIterations == ITERATIONS) {
+  if (manualStop && alreadyRanIterations == ITERATIONS) {
     ended();
   }
 }
 
-function ended() {
+function ended () {
   simulation.stop();
   simulation.force(forceName, null);
   if (rendering !== true) { // Never drawn anything before? Now it's time.
     node
-      .attr("cx", function (d) {
+      .attr('cx', function (d) {
-        return d.x*MULTIPLIER;
+        return d.x * MULTIPLIER;
       })
-      .attr("cy", function (d) {
+      .attr('cy', function (d) {
-        return d.y*MULTIPLIER;
+        return d.y * MULTIPLIER;
       });
   }
 
   if (p1 !== 0) {
     // Performance time measurement
     p2 = performance.now();
-    console.log("Execution time: " + (p2 - p1));
+    console.log('Execution time: ' + (p2 - p1));
     p1 = 0;
     p2 = 0;
   }
 }
 
-function brushEnded() {
+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,
@@ -245,24 +242,23 @@ function brushEnded() {
       results = sel.map(function (a) { return a.index; });
     }
 
-    //intercom.emit("select", { name: fileName, indices: results });
+    // intercom.emit("select", { name: fileName, indices: results });
 
-    d3.select(".brush").call(brush.move, null);
+    d3.select('.brush').call(brush.move, null);
   }
 }
 
-
 /**
  * Format the tooltip for the data
  * @param {*} node
  */
-function formatTooltip(node) {
+function formatTooltip (node) {
-  var textString = "",
+  var textString = '',
-    temp = "";
+    temp = '';
 
   tooltipWidth = 0;
   props.forEach(function (element) {
-    temp = element + ": " + node[element] + "<br/>";
+    temp = element + ': ' + node[element] + '<br/>';
     textString += temp;
     if (temp.length > tooltipWidth) {
       tooltipWidth = temp.length;
@@ -274,7 +270,7 @@ function formatTooltip(node) {
 /**
  * Halt the execution.
  */
-function stopSimulation() {
+function stopSimulation () {
   simulation.stop();
   if (typeof hybridSimulation !== 'undefined') {
     hybridSimulation.stop();
@@ -286,8 +282,8 @@ function stopSimulation() {
  * @param  {array} array
  * @return {number}  the mean of the array.
  */
-function getAverage(array) {
+function getAverage (array) {
-  console.log("getAverage", array);
+  console.log('getAverage', array);
   var total = 0;
   for (var i = 0; i < array.length; i++) {
     total += array[i];
@@ -299,11 +295,11 @@ function getAverage(array) {
  * Deselect the nodes to match the selection from other window.
  * @param {*} data
  */
-function unSelectNodes(data) {
+function unSelectNodes (data) {
   selectedData = data;
   if (fileName === data.name && nodes) {
     node
-      .classed("notSelected", function (d) {
+      .classed('notSelected', function (d) {
         if (data.indices.indexOf(d.index) < 0) {
           return true;
         }
@@ -312,35 +308,33 @@ function unSelectNodes(data) {
   }
 }
 
-
 /**
  * Highlight the neighbours for neighbour and sampling algorithm
  * @param {*} indices
  */
-function highlightNeighbours(indices) {
+function highlightNeighbours (indices) {
   node
-    .attr("r", function (d) {
+    .attr('r', function (d) {
       if (indices.indexOf(d.index) >= 0) {
         return NODE_SIZE * 2;
       }
       return NODE_SIZE;
     })
-    .attr("stroke-width", function (d) {
+    .attr('stroke-width', function (d) {
       if (indices.indexOf(d.index) >= 0) {
-        return NODE_SIZE * 0.2 + "px";
+        return NODE_SIZE * 0.2 + 'px';
       }
-      return "0px";
+      return '0px';
     })
-    .attr("stroke", "white");
+    .attr('stroke', 'white');
 }
 
-
 /**
  * Highlight all the nodes with the same class on hover
  * @param {*} highlighValue
  */
-function highlightOnHover(highlighValue) {
+function highlightOnHover (highlighValue) {
-  node.attr("opacity", function (d) {
+  node.attr('opacity', function (d) {
     return (highlighValue === d[COLOR_ATTRIBUTE]) ? 1 : 0.3;
   });
 }
@@ -348,13 +342,12 @@ function highlightOnHover(highlighValue) {
 /**
  * Color the nodes according to given attribute.
  */
-function colorToAttribute() {
+function colorToAttribute () {
-  node.attr("fill", function (d) {
+  node.attr('fill', function (d) {
-    return color(d[COLOR_ATTRIBUTE])
+    return color(d[COLOR_ATTRIBUTE]);
   });
 }
 
-
 /**
  * Update the distance range.
 
@@ -364,26 +357,24 @@ function updateDistanceRange() {
   }
 }
 
-
 /**
  * Implemented pause/resume functionality
  */
-function pauseUnPause() {
+function pauseUnPause () {
   if (simulation) {
     if (paused) {
       simulation.force(forceName);
       simulation.restart();
-      d3.select("#pauseButton").text("Pause");
+      d3.select('#pauseButton').text('Pause');
       paused = false;
     } else {
       simulation.stop();
-      d3.select("#pauseButton").text("Resume");
+      d3.select('#pauseButton').text('Resume');
       paused = true;
     }
   }
 }
 
-
 /**
  * Average distances for each node.
  * @param {*} dataNodes
@@ -406,4 +397,4 @@ function calculateAverageDistance(dataNodes, properties, normalization) {
   }
 
   return sum / n;
-}*/
+} */