Home Reference Source

scripts/experiment-properties/graphing/d3-custom-plots/distractor_scatter_plot.js

  1. import {plot_scatter_points} from "/scripts/experiment-properties/graphing/d3-base-plots/scatter_plot.js";
  2. export {create_distractor_scatter_plot};
  3.  
  4. var BUFFER = 60;
  5. var RANGE_ADJUSTMENT = 15;
  6.  
  7. /**
  8.  * D3 code for setting up scatter plot chart area with distractor dataset (so two-populations per graph)
  9.  *
  10.  * @param {object}   attributes
  11.  */
  12. function create_distractor_scatter_plot(attributes) {
  13.   
  14.     let target_dataset = attributes["target"]["dataset"];
  15.     console.log("target_dataset:  " + JSON.stringify(target_dataset));
  16.     let target_properties = attributes["target"]["graph_attributes"];
  17.     console.log("target_properties:  " + JSON.stringify(target_properties));
  18.  
  19.     let distractor_dataset = attributes["distractor"]["dataset"];
  20.     console.log("distractor_dataset:  " + JSON.stringify(distractor_dataset));
  21.     let distractor_properties = attributes["distractor"]["graph_attributes"];
  22.     console.log("distractor_properties:  " + JSON.stringify(distractor_properties));
  23.  
  24.     // Size of the graph
  25.     var window_height_multiplier = 0.65;
  26.     var window_width_multiplier = 0.5;
  27.  
  28.     if (target_properties.alternate_scaling) {
  29.       BUFFER = 150;
  30.       window_height_multiplier = 1.15;
  31.       window_width_multiplier = .75;
  32.     }
  33.     let height = window.innerHeight * window_height_multiplier;
  34.     let width = height * window_width_multiplier;
  35.  
  36.     // Create scales:
  37.     // ** D3 creates a function that takes in input between [0, 100] and 
  38.     //    outputs between [0, width].
  39.     //    Basically, domain = input, range = ouput. 
  40.     let xscale = d3.scaleLinear()
  41.                    .domain([0, 1]) 
  42.                    .range([0, width - RANGE_ADJUSTMENT]); 
  43.  
  44.     let yscale = d3.scaleLinear()
  45.                    .domain([0, 1])
  46.                    .range([height/2, 0 + RANGE_ADJUSTMENT]);
  47.  
  48.     if (target_properties.alternate_scaling) {
  49.         // Numerosity experiments do not scale the distribution
  50.         // coordinates down to the range of [0,1] so the
  51.         // call to .domain() in the scaleLinear() method is needed
  52.         // scale the domain down into the appropriate range
  53.         var x_max = target_properties.row;
  54.         var y_max = target_properties.col;
  55.  
  56.         xscale = d3.scaleLinear()
  57.                       .domain([0, x_max]) 
  58.                       .range([0, width - RANGE_ADJUSTMENT]); 
  59.                       
  60.         yscale = d3.scaleLinear()
  61.                       .domain([0, y_max])
  62.                       .range([height/2, 0 + RANGE_ADJUSTMENT]);
  63.   }
  64.  
  65.     // Create axes: 
  66.     let x_axis = d3.axisBottom()
  67.                    .scale(xscale)
  68.                    .tickSize([0]);
  69.  
  70.     let y_axis = d3.axisLeft()
  71.                    .scale(yscale)
  72.                    .tickSize([0]);
  73.  
  74.     // Append SVG into graph div
  75.     let chart = d3.select("#graph")
  76.                   .append("svg") 
  77.                     .attr("width", width + BUFFER)
  78.                     .attr("height", height)
  79.                     .attr("style", `margin-right: ${width/2}; margin-top: 25vh; margin-left: ${BUFFER}`);
  80.                     
  81.     // Creating transform SVG elements + append to SVG: 
  82.     let yAxisElements = chart.append("g")
  83.                              .attr("transform", "translate(50, 10)")
  84.                              .call(y_axis);
  85.  
  86.     let xAxisTranslate = height/2 + 10;
  87.  
  88.     let xAxisElements = chart.append("g")
  89.                               .attr("transform", "translate(50, " + xAxisTranslate  +")")
  90.                               .call(x_axis) 
  91.  
  92.     // If dist point color is WHITE, only plot the targets 
  93.     if (distractor_properties["point_color"] === "WHITE") {
  94.       plot_scatter_points(chart, xscale, yscale, target_dataset, target_properties);        
  95.     } 
  96.     else {
  97.  
  98.       let larger_data;
  99.       let smaller_data;
  100.  
  101.       // Handle if the number of points between distractor & target are unequal
  102.       if (attributes["target"]["dataset"].length > attributes["distractor"]["dataset"].length) {
  103.         larger_data = attributes["target"];
  104.         smaller_data = attributes["distractor"];
  105.       } else {
  106.         larger_data = attributes["distractor"];
  107.         smaller_data = attributes["target"];
  108.       }
  109.  
  110.       // Alternate plotting of distractor and main dataset points - want equal chance of one
  111.       // getting occluded over the other
  112.       for (let j in larger_data["dataset"]) {
  113.  
  114.         if ( j < smaller_data["dataset"].length){
  115.           let small_point = smaller_data["dataset"][j];
  116.           plot_scatter_points(chart, xscale, yscale, [small_point], smaller_data["graph_attributes"]);
  117.         }
  118.  
  119.         let large_point = larger_data["dataset"][j];
  120.         plot_scatter_points(chart, xscale, yscale, [large_point], larger_data["graph_attributes"]);  
  121.        
  122.       }
  123.     }
  124.  
  125.     // Set axis color
  126.     chart.selectAll("path")
  127.          .attr("stroke", target_properties["axis_color"]);
  128.  
  129.     // Remove tick labels
  130.     chart.selectAll("text").remove();     
  131.  
  132. }