SHARE
TWEET

Untitled

a guest Feb 23rd, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title> Pre-attentive Visualizations </title>
  5. <script type="text/javascript" src="d3/d3.min.js"></script>
  6.  
  7. <style>
  8. .axis text {
  9.     font: 15px sans-serif;
  10.     }
  11.  
  12. .axis path,
  13. .axis line {
  14.     fill: none;
  15.     stroke: #000;
  16.     shape-rendering: crispEdges;
  17.     }
  18. </style>
  19.  
  20. </head>
  21.  
  22. <body>
  23.  
  24. <div>
  25.     <label for="number">Number of elements to visualize: <span id="numberField"></span></label>
  26.     <input type="range" min="1" max="100" name="number" id="number" />
  27. </div>
  28. <div>
  29.     <label for="ms">Number of ms to see: <span id="numberMs"></span></label>
  30.     <input type="range" min="100" max="1000" step="100" name="ms" id="ms" />
  31. </div>
  32. <div>
  33.     <label for="shows">Number of shows: <span id="numberShows"></span></label>
  34.     <input type="range" name="shows" min="1" max="10" id="shows" />
  35. </div>
  36. <div>
  37.     <input type="button" value="Run applet" id="run">
  38. </div>
  39.  
  40. <script>
  41.     var numberSlider = document.getElementById("number");
  42.     var outputField = document.getElementById("numberField");
  43.     outputField.innerHTML = numberSlider.value;
  44.  
  45.     numberSlider.oninput = function() {
  46.         outputField.innerHTML = this.value;
  47.     };
  48.  
  49.     var msSlider = document.getElementById("ms");
  50.     var outputMs = document.getElementById("numberMs");
  51.     outputMs.innerHTML = msSlider.value;
  52.  
  53.     msSlider.oninput = function() {
  54.         outputMs.innerHTML = this.value;
  55.     };
  56.  
  57.     var showsSlider = document.getElementById("shows");
  58.     var outputShows = document.getElementById("numberShows");
  59.     outputShows.innerHTML = showsSlider.value;
  60.  
  61.     showsSlider.oninput = function() {
  62.         outputShows.innerHTML = this.value;
  63.     };
  64. //1
  65.  
  66. var width = 600;
  67. var height = 600;
  68.  
  69. let svg = d3.select('body').append("svg")
  70.     .attr("width", width)
  71.     .attr("height", height);
  72.  
  73. function createNonCollidingPoints(width, height, radius, numPoints){
  74.     var points = [];
  75.     let aantalGeplaatst = 0;
  76.  
  77.     while(numPoints > aantalGeplaatst){
  78.         nok = true;
  79.         let xVal;
  80.         let yVal;
  81.         while(nok){
  82.             nok = false;
  83.             xVal = Math.random() * width;
  84.             yVal = Math.random() * height;
  85.             for(let point of points) {
  86.                 let dist = Math.sqrt((point.x - xVal)*(point.x - xVal) + (point.y - yVal)*(point.y - yVal));
  87.                 if(dist < 2*radius){
  88.                     nok = true;
  89.                     break;
  90.                 }
  91.             }
  92.         }
  93.         points.push({x: xVal,y: yVal});
  94.         aantalGeplaatst++;
  95.     }
  96.     return points;
  97. }
  98.  
  99. //2 join the points with the svg circles, how does a circle now its color? (red or gray)
  100. function scatterPlot(pointData, radius, width, height){
  101.     var xScale = d3.scaleLinear()
  102.         .domain([-1*radius, width + radius])
  103.         .range([0, width]);
  104.  
  105.     var yScale = d3.scaleLinear()
  106.         .domain([-1*radius, width + radius])
  107.         .range([0, width]);
  108.  
  109.     var scatter = svg.selectAll("circle").data(pointData).enter();
  110.  
  111.     scatter.append("circle")
  112.         .attr("cx", punt => xScale(punt.x))
  113.         .attr("cy", punt => yScale(punt.y))
  114.         .attr("r", radius)
  115.         .attr("stroke", "black")
  116.         .attr("fill", "red");
  117.     let rodeCirkel = svg.selectAll("circle").filter(function(d, i) { return i == 0; })
  118.     let getal = Math.round(Math.random()*1000);
  119.     if (getal % 2 == 0){
  120.         rodeCirkel.attr("fill","blue");
  121.         return true;
  122.     }
  123.     return false;
  124. }
  125.  
  126. function drawPoints(radius, numberOfPoints){
  127.     let points = createNonCollidingPoints(width,height,radius,numberOfPoints);
  128.     return scatterPlot(points,radius,width,height);
  129. }
  130.  
  131. //3 use setTimeOut and setInterval to control the blinking of the applet
  132.  
  133. function blinking(aantalMS,aantalCirkels) {
  134.     svg.selectAll("text").remove();
  135.     let isPresent = drawPoints(10,aantalCirkels);
  136.     setTimeout(function() {clearSVG(isPresent);},aantalMS);
  137. }
  138.  
  139. function clearSVG(isPresent) {
  140.     svg.selectAll("circle").remove();
  141.     console.log(isPresent);
  142.     writeText(isPresent);
  143. }
  144. function writeText(isPresent) {
  145.     let tekst = isPresent ? "Present" : "Absent";
  146.     svg.append("text")
  147.         .attr("text-anchor", "middle")
  148.         .attr("x", width/2)
  149.         .attr("y", height/2)
  150.         .attr("font-size",30)
  151.         .text(tekst)
  152. }
  153.  
  154.  
  155.  
  156.  
  157. //4 make the visualization configurable from the brower.
  158. //  a useful tutorial is: http://www.d3noob.org/2014/04/using-html-inputs-with-d3js.html
  159.  
  160. document.getElementById('run').onclick = function () {
  161.     document.getElementById('run').disabled = true;
  162.     let aantalShows = showsSlider.value;
  163.     let aantalMS = parseInt(msSlider.value);
  164.     let aantalCirkels = parseInt(numberSlider.value);
  165.     blinking(aantalMS,aantalCirkels);
  166.     var timer = setInterval(function () {blinking(aantalMS,aantalCirkels);},1000+aantalMS); // laat uitkomst altijd 1 sec zien
  167.     setTimeout(function (){
  168.         svg.selectAll("text").remove();
  169.         document.getElementById('run').disabled = false;
  170.         clearInterval(timer);
  171.     }, (999+aantalMS)*(aantalShows))
  172. };
  173.  
  174.  
  175.  
  176. </script>
  177.  
  178.  
  179. </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top