<commit_before>var Chart;
$(function () {

  Chart = function (experiment, data, callback) {
    var that = {}, my = {};

    my.colors = [
      '#E23630',
      '#308B3F',
      '#225AAC',
      '#e1e319',
      '#EA7F13',
      '#613095',
      '#992322',
      '#AB3D97',
      '#7E466F',
      '#A4433A',
      '#B8C6D7',
      '#5D300B',
      '#D09104',
      '#E99E62'
    ];
    my.el = null;
    my.data = data;
    my.experiment = experiment;

    my.getMeasurements = function () {
      my.margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
      };
      my.width = my.el.width();
      my.height = my.el.height();
      my.xScale = d3.time.scale().range([0, my.width]);
      my.yScale = d3.scale.linear().range([my.height, 0]);
    };

    my.drawLabels = function (data) {
      var xValues, yValues, yMin, yMax;

      xValues = _.map(data, function (d) {
        return d[0];
      });
      yValues = _.map(data, function (d) {
        return parseFloat(d[1]);
      });
      yMin = _.min(yValues);
      yMax = _.max(yValues);
      yValues = [yMin, ((yMax - yMin) * 0.5) + yMin, yMax];

      my.xAxis = d3.svg.axis()
        .scale(my.xScale)
        .tickSize(0)
        .tickFormat(d3.time.format("%m/%d"))
        .orient("bottom");
        
      if (xValues.length > 10) {
        my.xAxis.ticks(d3.time.days, 4)
      } else if (xValues.length === 2) {
        my.xAxis.ticks(d3.time.days, 1)
      } else {
        my.xAxis.ticks(xValues.length)
      }
        
      my.yAxis = d3.svg.axis()
        .scale(my.yScale)
        .ticks(yValues.length)
        .tickValues(yValues)
        .tickSize(0)
        .tickFormat(d3.format(".1%"))
        .orient("left");
    };

    my.drawLine = function (data, color) {
      color = color || "#9d5012";
      var line_id = my.experiment + "-line-" + _.indexOf(my.colors, color);
      var line = d3.svg.line()
        .x(function (d) {
          return my.xScale(d.date);
        })
        .y(function (d) {
          return my.yScale(d.close);
        });

      my.svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("id", line_id)
        .attr("d", line)
        .attr("style", "stroke:" + color);

      my.svg.select("#" + line_id)
        .data(data);

      my.svg.selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "circle circle-" + line_id)
        .attr("r", 5)
        .attr("cx", function(d) { return my.xScale(d.date); })
        .attr("cy", function(d) { return my.yScale(d.close); })
        .attr("style", "fill:" + color)
        .on("mouseover", function (d) {

          // Make the circle larger
          d3.select(this)
            .attr("r", 8)
            .attr('class', 'circle circle-' + line_id + ' circle-hover');

          // Make the line thicker
          var line = d3.select('#' + line_id);
          var currClass = line.attr('class');
          line.attr('class', currClass + ' line-hover');

          // Highlight corresponding table alternative
          var table = $('.' + line_id).closest('div').find('table')
          table.find('tr').removeClass('highlight');
          table.find('.' + line_id).addClass('highlight');

          // Move the line all circles of the line to the front
          $('#' + line_id + ', .circle-' + line_id).each(function() {
            this.parentNode.appendChild(this);
          });

          // Show the tooltip
          var pct = (Math.round(d.close * 1000) / 10) + '%',
              date = new Date(d.date),
              month = ['Jan.', 'Feb.', 'March', 'April', 'May', 'June', 'July', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
              dateString = month[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear(),
              pos = $(this).offset();

          $('#tooltip')
            .html(dateString + ' &nbsp; ' + pct)
            .show()
            .css({
              left: pos.left + 8 - (parseInt($('#tooltip').outerWidth()) / 2),
              top:  pos.top - 30
            });
        })
        .on("mouseout", function (d) {
          // Return circle to normal
          d3.select(this)
            .attr("r", 5)
            .attr('class', 'circle circle-' + line_id);

          // Unhighlight the line
          var line = d3.select('#' + line_id);
          line.attr('class', 'line');

          // Remove table highlight
          $('.' + line_id).removeClass('highlight');

          // Hide the tooltip
          $('#tooltip').hide();
        });
    };

<commit_msg>Smaller dots for lots of data<commit_after>var Chart;
$(function () {

  Chart = function (experiment, data, callback) {
    var that = {}, my = {};

    my.colors = [
      '#E23630',
      '#308B3F',
      '#225AAC',
      '#e1e319',
      '#EA7F13',
      '#613095',
      '#992322',
      '#AB3D97',
      '#7E466F',
      '#A4433A',
      '#B8C6D7',
      '#5D300B',
      '#D09104',
      '#E99E62'
    ];
    my.el = null;
    my.data = data;
    my.experiment = experiment;

    my.getMeasurements = function () {
      my.margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
      };
      my.width = my.el.width();
      my.height = my.el.height();
      my.xScale = d3.time.scale().range([0, my.width]);
      my.yScale = d3.scale.linear().range([my.height, 0]);
    };

    my.drawLabels = function (data) {
      var xValues, yValues, yMin, yMax;

      xValues = _.map(data, function (d) {
        return d[0];
      });
      yValues = _.map(data, function (d) {
        return parseFloat(d[1]);
      });
      yMin = _.min(yValues);
      yMax = _.max(yValues);
      yValues = [yMin, ((yMax - yMin) * 0.5) + yMin, yMax];

      my.xAxis = d3.svg.axis()
        .scale(my.xScale)
        .tickSize(0)
        .tickFormat(d3.time.format("%m/%d"))
        .orient("bottom");
        
      if (xValues.length > 10) {
        my.xAxis.ticks(d3.time.days, 4)
      } else if (xValues.length === 2) {
        my.xAxis.ticks(d3.time.days, 1)
      } else {
        my.xAxis.ticks(xValues.length)
      }
        
      my.yAxis = d3.svg.axis()
        .scale(my.yScale)
        .ticks(yValues.length)
        .tickValues(yValues)
        .tickSize(0)
        .tickFormat(d3.format(".1%"))
        .orient("left");
    };

    my.drawLine = function (data, color) {
      color = color || "#9d5012";
      var line_id = my.experiment + "-line-" + _.indexOf(my.colors, color);
      var line = d3.svg.line()
        .x(function (d) {
          return my.xScale(d.date);
        })
        .y(function (d) {
          return my.yScale(d.close);
        });

      my.svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("id", line_id)
        .attr("d", line)
        .attr("style", "stroke:" + color);

      my.svg.select("#" + line_id)
        .data(data);

      var size = data.length > 20 ? 3 : 5;

      my.svg.selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "circle circle-" + line_id)
        .attr("r", size)
        .attr("cx", function(d) { return my.xScale(d.date); })
        .attr("cy", function(d) { return my.yScale(d.close); })
        .attr("style", "fill:" + color)
        .on("mouseover", function (d) {

          // Make the circle larger
          d3.select(this)
            .attr("r", size + 3)
            .attr('class', 'circle circle-' + line_id + ' circle-hover');

          // Make the line thicker
          var line = d3.select('#' + line_id);
          var currClass = line.attr('class');
          line.attr('class', currClass + ' line-hover');

          // Highlight corresponding table alternative
          var table = $('.' + line_id).closest('div').find('table')
          table.find('tr').removeClass('highlight');
          table.find('.' + line_id).addClass('highlight');

          // Move the line all circles of the line to the front
          $('#' + line_id + ', .circle-' + line_id).each(function() {
            this.parentNode.appendChild(this);
          });

          // Show the tooltip
          var pct = (Math.round(d.close * 1000) / 10) + '%',
              date = new Date(d.date),
              month = ['Jan.', 'Feb.', 'March', 'April', 'May', 'June', 'July', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
              dateString = month[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear(),
              pos = $(this).offset();

          $('#tooltip')
            .html(dateString + ' &nbsp; ' + pct)
            .show()
            .css({
              left: pos.left + 8 - (parseInt($('#tooltip').outerWidth()) / 2),
              top:  pos.top - 30
            });
        })
        .on("mouseout", function (d) {
          // Return circle to normal
          d3.select(this)
            .attr("r", size)
            .attr('class', 'circle circle-' + line_id);

          // Unhighlight the line
          var line = d3.select('#' + line_id);
          line.attr('class', 'line');

          // Remove table highlight
          $('.' + line_id).removeClass('highlight');

          // Hide the tooltip
          $('#tooltip').hide();
        });
    };


{'fraction_non_alphanumeric': 0.1872501350621286, 'fraction_numerical': 0.024203133441383036, 'mean_word_length': 1.6521489971346706, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '893867', 'n_tokens_mistral': 3216, 'n_tokens_neox': 3068, 'n_words': 610}