function overlay_touchdown()

in src/chart.js [1582:2034]


      function overlay_touchdown() {        
        
        d3.event.preventDefault();
        d3.event.stopPropagation();
        touching = true;
        var d = d3.touches(this);
        var x = d[0][0];
        var y = d[0][1];

        d3.select('#y_picker').remove();
        d3.select('#x_picker').remove();        

        circlefit.resetPoints();
        touch_points = [];

        last_touch = new Date();
        touch_counter = 0;

        var touch_point = {
          'x': x,
          'y': y
        };  

        touch_points.push(touch_point);

        scroll_year = current_year;               

        if (animation == 'on') {
          this_chart.interrupt();
        }
        
        d3.select('#focus_rect_x').style('display',null);
        d3.select('#focus_rect_y').style('display',null);

        focus_x = Math.floor(x / facet_dim);
        focus_y = Math.floor(y / facet_dim);

        if (focus_x > (num_facet_cols - 1) || focus_x < 0) {
          focus_x = -1;
        }

        if (focus_y > (num_facet_cols - 1) || focus_y < 0) {
          focus_y = -1;
        }

        focus_x_lower = facets == 'on' ? scale_x.domain()[0] : Math.floor(scale_x.invert(focus_x * facet_dim));      
        focus_x_upper = facets == 'on' ? scale_x.domain()[1] : Math.ceil(scale_x.invert((focus_x + 1) * facet_dim));

        focus_y_lower = facets == 'on' ? scale_y.domain()[0] : Math.floor(scale_y.invert((focus_y + 1) * facet_dim));
        focus_y_upper = facets == 'on' ? scale_y.domain()[1] : Math.ceil(scale_y.invert(focus_y * facet_dim));      
        focus_y_facet = (num_facet_cols - 1) - focus_y;        
        
        // console.log({
        //   "type":"touch",
        //   "focus_x":focus_x,
        //   "focus_y":focus_y,
        //   "focus_x_lower": focus_x_lower,
        //   "focus_x_upper": focus_x_upper,
        //   "focus_y_lower": focus_y_lower,
        //   "focus_y_upper": focus_y_upper
        // });

        d3.selectAll('.mark').select('circle')
        .style('opacity',function(d){
          if (facets == 'on') {
            if (focus_x < 0 || focus_x > (num_facet_cols - 1)) { //focus_x invalid
              if (focus_y < 0 || focus_y > (num_facet_cols - 1)) { //focus_x and focus_y invalid

                d3.select('#focus_x_min')
                .attr('x', 0)
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[0] : thousand_format(scale_x.domain()[0]).replace(/G/,"B");
                });

                d3.select('#focus_x_max')
                .attr('x', scale_x(scale_x.domain()[1]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[1] : thousand_format(scale_x.domain()[1]).replace(/G/,"B");
                }); 

                d3.select('#focus_y_min')
                .attr('x', 0)
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[0] : thousand_format(scale_y.domain()[0]).replace(/G/,"B");
                });

                d3.select('#focus_y_max')
                .attr('x', 0)
                .attr('y', chart_dim - facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[1] : thousand_format(scale_y.domain()[1]).replace(/G/,"B");
                });
               
              }
              else { // focus_y valid

                d3.select('#focus_y_min')
                .attr('x', 0)
                .attr('y', (focus_y + 1) * facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[0] : thousand_format(scale_y.domain()[0]).replace(/G/,"B");
                });
          
                d3.select('#focus_y_max')
                .attr('x', 0)
                .attr('y', (focus_y) * facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[1] : thousand_format(scale_y.domain()[1]).replace(/G/,"B");
                });

                d3.select('#focus_x_min')
                .attr('x', scale_x(scale_x.domain()[0]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[0] : thousand_format(scale_x.domain()[0]).replace(/G/,"B");
                });

                d3.select('#focus_x_max')
                .attr('x', scale_x(scale_x.domain()[1]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[1] : thousand_format(scale_x.domain()[1]).replace(/G/,"B");
                }); 
                
              }
            }
            else { //focus_x valid

              d3.select('#focus_x_min')
              .attr('x', focus_x * facet_dim)
              .attr('y', chart_dim)
              .text(function() { 
                return scale_x.domain()[1] < 1000 ? scale_x.domain()[0] : thousand_format(scale_x.domain()[0]).replace(/G/,"B");
              });

              d3.select('#focus_x_max')
              .attr('x', (focus_x + 1) * facet_dim)
              .attr('y', chart_dim)
              .text(function() { 
                return scale_x.domain()[1] < 1000 ? scale_x.domain()[1] : thousand_format(scale_x.domain()[1]).replace(/G/,"B");
              });

              d3.select('#focus_y_min')
              .attr('x', 0)
              .attr('y', chart_dim)
              .text(function() { 
                return scale_y.domain()[1] < 1000 ? scale_y.domain()[0] : thousand_format(scale_y.domain()[0]).replace(/G/,"B");
              });

              d3.select('#focus_y_max')
              .attr('x', 0)
              .attr('y', chart_dim - facet_dim)
              .text(function() { 
                return scale_y.domain()[1] < 1000 ? scale_y.domain()[1] : thousand_format(scale_y.domain()[1]).replace(/G/,"B");
              });

              if (focus_y < 0 || focus_y > (num_facet_cols - 1)) { //focus_y invalid
                //do nothing
              }
              else { //focus_x and focus_y valid 

                d3.select('#focus_y_min')
                .attr('x', 0)
                .attr('y', (focus_y + 1) * facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[0] : thousand_format(scale_y.domain()[0]).replace(/G/,"B");
                });
          
                d3.select('#focus_y_max')
                .attr('x', 0)
                .attr('y', (focus_y) * facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[1] : thousand_format(scale_y.domain()[1]).replace(/G/,"B");
                });
               
              }
            }
            d3.selectAll('.line').select('path').style('opacity',1);
            d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark');
            if (!non_interactive) {
              d3.select('#' + d[params.key] + '_bttn').style('display',null);
            }
            if (highlight_points.indexOf(d[params.key]) != -1){
              highlight_points.splice(highlight_points.indexOf(d[params.key]),1);
            }
            return 1;          
          }
          else { // facets off!
            if (bubbleset_points.indexOf(d[params.key]) != -1) {
              d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.75);
              d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark_highlighted');
              if (!non_interactive) {
                d3.select('#' + d[params.key] + '_bttn').style('display',null);
              }
              if (highlight_points.indexOf(d[params.key]) == -1){
                highlight_points.push(d[params.key]);
              }
              return 0.75;
            }
            else if (focus_x < 0 || focus_x > (num_facet_cols - 1)) { //focus_x invalid
              if (focus_y < 0 || focus_y > (num_facet_cols - 1)) { //focus_x and focus_y invalid

                d3.select('#focus_x_min')
                .attr('x', scale_x(scale_x.domain()[0]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[0] : thousand_format(scale_x.domain()[0]).replace(/G/,"B");
                });

                d3.select('#focus_x_max')
                .attr('x', scale_x(scale_x.domain()[1]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[1] :  thousand_format(scale_x.domain()[1]).replace(/G/,"B");
                }); 

                d3.select('#focus_y_min')
                .attr('x', 0)
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[0] : thousand_format(scale_y.domain()[0]).replace(/G/,"B");
                });

                d3.select('#focus_y_max')
                .attr('x', 0)
                .attr('y', scale_y(scale_y.domain()[1]))
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? scale_y.domain()[1] : thousand_format(scale_y.domain()[1]).replace(/G/,"B");
                });

                d3.selectAll('.text_mark').attr("class", function(d) {
                  if (bubbleset_points.indexOf(d[params.key]) != -1) {
                    if (highlight_points.indexOf(d[params.key]) == -1){
                      highlight_points.push(d[params.key]);
                    }
                    if (!non_interactive) {
                      d3.select('#' + d[params.key] + '_bttn').style('display',null);
                    }
                    return 'text_mark_highlighted';
                  }
                  else {
                    if (highlight_points.indexOf(d[params.key]) != -1){
                      highlight_points.splice(highlight_points.indexOf(d[params.key]),1);
                    }
                    if (!non_interactive) {
                      d3.select('#' + d[params.key] + '_bttn').style('display','none');
                    }
                    return 'text_mark';
                  }
                });

                d3.selectAll('.text_mark_highlighted').attr("class", function(d) {
                  if (bubbleset_points.indexOf(d[params.key]) != -1) {
                    if (highlight_points.indexOf(d[params.key]) == -1){
                      highlight_points.push(d[params.key]);
                    }
                    if (!non_interactive) {
                      d3.select('#' + d[params.key] + '_bttn').style('display',null);
                    }
                    return 'text_mark_highlighted';
                  }
                  else {
                    if (highlight_points.indexOf(d[params.key]) != -1){
                      highlight_points.splice(highlight_points.indexOf(d[params.key]),1);
                    }
                    if (!non_interactive) {
                      d3.select('#' + d[params.key] + '_bttn').style('display','none');
                    }
                    return 'text_mark';
                  }
                });

                d3.selectAll('.line').select('path').style('opacity',function(d){
                  if (bubbleset_points.length == 0) {
                    return 0.5;
                  } 
                  else {
                    return bubbleset_points.indexOf(d[params.key]) != -1 ? 0.75 : 0.175;
                  }
                });
                // d3.selectAll('.text_mark').style('display','none');
                if (bubbleset_points.length == 0) {
                  return 0.5;
                } 
                else {
                  return bubbleset_points.indexOf(d[params.key]) != -1 ? 0.75 : 0.175;
                }
              }
              else { // focus_y valid

                d3.select('#focus_y_min')
                .attr('x', 0)
                .attr('y', (focus_y + 1) * facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? focus_y_lower : thousand_format(focus_y_lower).replace(/G/,"B");
                });
          
                d3.select('#focus_y_max')
                .attr('x', 0)
                .attr('y', (focus_y) * facet_dim)
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? focus_y_upper : thousand_format(focus_y_upper).replace(/G/,"B");
                });

                d3.select('#focus_x_min')
                .attr('x', scale_x(scale_x.domain()[0]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[0] : thousand_format(scale_x.domain()[0]).replace(/G/,"B");
                });

                d3.select('#focus_x_max')
                .attr('x', scale_x(scale_x.domain()[1]))
                .attr('y', chart_dim)
                .text(function() { 
                  return scale_x.domain()[1] < 1000 ? scale_x.domain()[1] : thousand_format(scale_x.domain()[1]).replace(/G/,"B");
                }); 

                if (d[params.y] >= focus_y_lower && d[params.y] < focus_y_upper) {
                  d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.75);
                  d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark_highlighted');
                  if (!non_interactive) {
                    d3.select('#' + d[params.key] + '_bttn').style('display',null);
                  }
                  if (highlight_points.indexOf(d[params.key]) == -1){
                    highlight_points.push(d[params.key]);
                  }
                  return 0.75;
                }
                else {
                  d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.175);
                  d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark');
                  if (!non_interactive) {
                    d3.select('#' + d[params.key] + '_bttn').style('display','none');
                  }
                  if (highlight_points.indexOf(d[params.key]) != -1){
                    highlight_points.splice(highlight_points.indexOf(d[params.key]),1);
                  }
                  return 0.175;
                }
              }
            }
            else { //focus_x valid

              d3.select('#focus_x_min')
              .attr('x', focus_x * facet_dim)
              .attr('y', chart_dim)
              .text(function() { 
                return scale_x.domain()[1] < 1000 ? focus_x_lower : thousand_format(focus_x_lower).replace(/G/,"B");
              });

              d3.select('#focus_x_max')
              .attr('x', (focus_x + 1) * facet_dim)
              .attr('y', chart_dim)
              .text(function() { 
                return scale_x.domain()[1] < 1000 ? focus_x_upper : thousand_format(focus_x_upper).replace(/G/,"B");
              });

              d3.select('#focus_y_min')
              .attr('x', 0)
              .attr('y', chart_dim)
              .text(function() { 
                return scale_y.domain()[1] < 1000 ? scale_y.domain()[0] : thousand_format(scale_y.domain()[0]).replace(/G/,"B");
              });

              d3.select('#focus_y_max')
              .attr('x', 0)
              .attr('y', scale_y(scale_y.domain()[1]))
              .text(function() { 
                return scale_y.domain()[1] < 1000 ? scale_y.domain()[1] : thousand_format(scale_y.domain()[1]).replace(/G/,"B");
              });

              if (focus_y < 0 || focus_y > (num_facet_cols - 1)) { //focus_y invalid
                if (d[params.x] >= focus_x_lower && d[params.x] < focus_x_upper) {
                  d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.75);
                  d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark_highlighted');
                  if (!non_interactive) {
                    d3.select('#' + d[params.key] + '_bttn').style('display',null);
                  }
                  if (highlight_points.indexOf(d[params.key]) == -1){
                    highlight_points.push(d[params.key]);
                  }
                  return 0.75;
                }
                else {
                  d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.175);
                  d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark');
                  if (!non_interactive) {
                    d3.select('#' + d[params.key] + '_bttn').style('display','none');
                  }
                  if (highlight_points.indexOf(d[params.key]) != -1){
                    highlight_points.splice(highlight_points.indexOf(d[params.key]),1);
                  }
                  return 0.175;
                }
              }
              else { //focus_x and focus_y valid 

                d3.select('#focus_y_min')
                .attr('x', 0)
                .attr('y', scale_y(focus_y_lower))
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? focus_y_lower : thousand_format(focus_y_lower).replace(/G/,"B");
                });
          
                d3.select('#focus_y_max')
                .attr('x', 0)
                .attr('y', scale_y(focus_y_upper))
                .text(function() { 
                  return scale_y.domain()[1] < 1000 ? focus_y_upper : thousand_format(focus_y_upper).replace(/G/,"B");
                });

                if ((d[params.y] >= focus_y_lower && d[params.y] < focus_y_upper) || (d[params.x] >= focus_x_lower && d[params.x] < focus_x_upper)) {
                  d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.75);
                  d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark_highlighted');
                  if (!non_interactive) {
                    d3.select('#' + d[params.key] + '_bttn').style('display',null);
                  }
                  if (highlight_points.indexOf(d[params.key]) == -1){
                    highlight_points.push(d[params.key]);
                  }
                  return 0.75;
                }
                else {
                  d3.select('#line_'+ d[params.key]).select('path').style('opacity',0.175);
                  d3.select('#text_mark_' + d[params.key]).attr("class", 'text_mark');
                  if (!non_interactive) {
                    d3.select('#' + d[params.key] + '_bttn').style('display','none');
                  }
                  if (highlight_points.indexOf(d[params.key]) != -1){
                    highlight_points.splice(highlight_points.indexOf(d[params.key]),1);
                  }
                  return 0.175;
                }
              }
            }
          }
        });

        d3.select('#focus_rect_x')
        .attr('x',focus_x * facet_dim)
        .style('display',(focus_x < 6 && focus_x > -1) ? null : 'none');

        d3.select('#focus_rect_y')
        .attr('y',focus_y * facet_dim)
        .style('display',(focus_y < 6 && focus_y > -1) ? null : 'none');

        updateCarousel();

      }