<commit_before>$(document).ready(function(){
  // todos for this file
  // make it OO
  drawChartAjaxCall();
});

function draw(response) {
      // Chart size
  var w = window.innerWidth,
      h = 450,
      // Date variables
      days = [ 'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday' ],
      monthNames = [ "JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE",
        "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER" ],
      abbreviatedMonthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      // d3 variables
      maxDataPointsForDots = 500,
      transitionDuration = 1000,
      svg = null,
      yAxisGroup = null,
      xAxisGroup = null,
      dataCirclesGroup = null,
      dataLinesGroup = null,
      dataLines,
      line,
      garea,
      fillArea,
      circles;

  if(/live_update/.test(document.URL)){
    transitionDuration = 0;
  }

  var data = response,
  violations = 0;
  // add usefull properties to the data objects
  data.forEach(function(obj){
    obj.date = new Date(obj.created_at);
    obj.isDay = obj.date.getHours() >= 6 && obj.date.getHours() <= 22;
    if(/live_update/.test(document.URL)){
      obj.violation = true;
    }
    if(obj.violation){ violations += 1; }
  });
  var margin = 40;
  var max = d3.max(data, function(d) { return Math.max( d.temp, d.outdoor_temp ) }) + 1;
  // checks whether or not there is an outdoor temp
  if ( d3.min(data, function(d) { return d.outdoor_temp }) ){
    var min = d3.min(data, function(d) { return Math.min( d.temp ) }) - 5;
  } else {
    var min = d3.min(data, function(d) { return Math.min( d.temp, d.outdoor_temp ) }) - 10;
  }
  var pointRadius = 4;
  var x = d3.time.scale().range([0, w - margin * 2]).domain([data[0].date, data[data.length - 1].date]);
  var y = d3.scale.linear().range([h - margin * 2, 0]).domain([min, max]);
  var xAxis = d3.svg.axis().scale(x).tickSize(h - margin * 2).tickPadding(0).ticks(data.length);
  var yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + margin * 2).tickPadding(0).ticks(5);
  var t = null,
  strokeWidth = w / data.length;

  var svg = d3.select('#d3-chart').select('svg').select('g');
  function createSvg(){
    if (svg.empty()) {
      svg = d3.select('#d3-chart')
        .append('svg:svg')
        .attr('width', w)
        .attr('height', h)
        .attr('class', 'viz')
        .append('svg:g')
        .attr('transform', 'translate(' + margin + ',' + margin + ')');
    }
  }

  createSvg();

  function setT(){
    t = svg.transition().duration(transitionDuration);
  }

  setT()

  function addLineStlyingToXTicks(){
    var $lines = $(".xTick .tick line"),
        length = data.length,
        date,
        newText,
        $textEl;

    for(var i = 0; i < length; i++){
      if(data[i].isDay === false){
        $($lines[i]).attr(
          { 'stroke-width': strokeWidth, 'stroke': '#90ABB0' }
        );
        if(i === 0){
          $($lines[i]).attr({ 'stroke-width': strokeWidth * 1.9 });
        }
      }
      else {
        // add dates to bottom of graph
        if ( data[i].date.getHours() === 16 ) {
          date = data[i].date;
          newText = abbreviatedMonthNames[date.getMonth()] + " " 
            + date.getDate() + ", " + (date.getYear() + 1900);
          $textEl = $($(".xTick .tick text")[i]);
          $textEl.text(newText);
          $textEl.show();
          $textEl.attr({"x": -15, "y": 380});
        }
      }
    }
  }

// x ticks and labels gets placed first
  // x ticks and labels
  function setXAxisGroup(){
    if (!xAxisGroup) {
      xAxisGroup = svg.append('svg:g')
        .attr('class', 'xTick')
        .call(xAxis);
    }
    else {
      t.select('.xTick').call(xAxis);
    }
  }

  setXAxisGroup()
  addLineStlyingToXTicks();

// y ticks and labels gets placed second
  // y ticks and labels
  function setYAxisGroup() {
    if (!yAxisGroup) {
      yAxisGroup = svg.append('svg:g')
        .attr('class', 'yTick')
        .call(yAxis);
      // fixes x value for text
      $(".yTick .tick text").attr("x", "-5")
    }
    else {
      t.select('.yTick').call(yAxis);
    }
  }

  setYAxisGroup()

// y ticks and labels gets placed third
  // Draw the lines
  function setDataLinesGroup(){
    if (!dataLinesGroup) {
      dataLinesGroup = svg.append('svg:g');
    }
  }
  setDataLinesGroup()

  dataLines = dataLinesGroup.selectAll('.data-line').data([data]);

  line = d3.svg.line()
    // assign the X function to plot our line as we wish
    .x(function(d,i) {
      return x(d.date); 
    })
    .y(function(d) {
      return y(d.temp); 
    })
    .interpolate("linear");

  garea = d3.svg.area()
    .interpolate("linear")
    .x(function(d) { 
      // verbose logging to show what's actually being done
      return x(d.date); 
    })
    .y0(h - margin * 2)
    .y1(function(d) { 
      // verbose logging to show what's actually being done
      return y(d.outdoor_temp); 
    });

  dataLines
    .enter()
    .append('svg:path')
    .attr("class", "area");
    // .attr("d", garea(data));

  dataLines.enter().append('path')
    .attr('class', 'data-line')
    .style('opacity', 0.3)
    .attr("d", line(data))
    .transition()
    .delay(transitionDuration / 2)
    .duration(transitionDuration)
    .style('opacity', 1);

  // dataLines.transition()
  //   .attr("d", line)
  //   .duration(transitionDuration)
  //   .style('opacity', 1)
  //   .attr("transform", function(d) {
  //     return "translate(" + x(d.date) + "," + y(d.temp) + ")"; 
  //   });

  dataLines.exit()
    .transition()
    .attr("d", line)
    .duration(transitionDuration)
    .attr("transform", function(d) {
     return "translate(" + x(d.date) + "," + y(0) + ")"; 
    })
    .style('opacity', 1e-6)
    .remove();

  d3.selectAll(".area").transition()
    .duration(transitionDuration)
    .attr("d", garea(data));

  // move the area to the back of the graph
  fillArea = $(".area")
  $("#d3-chart svg > g").prepend(fillArea)

  // add number of violations to the legend
  $("#violations span").text($("#violations span")
    .text().replace(/\d+/, violations));


  if (violations) {
  // Draw the circles if there are any violations
    if (!dataCirclesGroup) {
      dataCirclesGroup = svg.append('svg:g');
    }

    circles = dataCirclesGroup.selectAll('.data-point').data(data);

    circles.enter()
      .append('svg:circle')
      .attr('class', 'data-point')
      .style('opacity', 1)
      .attr('cx', function(d) { return x(d.date) })
      .attr('cy', function() { return y(0) })
      .attr('r', function(d) {
        return d.violation ? pointRadius : 0;
      })
      .transition()
      .duration(transitionDuration)
      .style('opacity', 1)
      .attr('cx', function(d) { return x(d.date) })<commit_msg>converts more steps of user chart creation to functions<commit_after>$(document).ready(function(){
  // todos for this file
  // make it OO
  drawChartAjaxCall();
});

function draw(response) {
      // Chart size
  var w = window.innerWidth,
      h = 450,
      // Date variables
      days = [ 'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday' ],
      monthNames = [ "JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE",
        "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER" ],
      abbreviatedMonthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      // d3 variables
      maxDataPointsForDots = 500,
      transitionDuration = 1000,
      svg = null,
      yAxisGroup = null,
      xAxisGroup = null,
      dataCirclesGroup = null,
      dataLinesGroup = null,
      dataLines,
      line,
      garea,
      $fillArea,
      circles;

  if(/live_update/.test(document.URL)){
    transitionDuration = 0;
  }

  var data = response,
  violations = 0;
  // add usefull properties to the data objects
  data.forEach(function(obj){
    obj.date = new Date(obj.created_at);
    obj.isDay = obj.date.getHours() >= 6 && obj.date.getHours() <= 22;
    if(/live_update/.test(document.URL)){
      obj.violation = true;
    }
    if(obj.violation){ violations += 1; }
  });
  var margin = 40;
  var max = d3.max(data, function(d) { return Math.max( d.temp, d.outdoor_temp ) }) + 1;
  // checks whether or not there is an outdoor temp
  if ( d3.min(data, function(d) { return d.outdoor_temp }) ){
    var min = d3.min(data, function(d) { return Math.min( d.temp ) }) - 5;
  } else {
    var min = d3.min(data, function(d) { return Math.min( d.temp, d.outdoor_temp ) }) - 10;
  }
  var pointRadius = 4;
  var x = d3.time.scale().range([0, w - margin * 2]).domain([data[0].date, data[data.length - 1].date]);
  var y = d3.scale.linear().range([h - margin * 2, 0]).domain([min, max]);
  var xAxis = d3.svg.axis().scale(x).tickSize(h - margin * 2).tickPadding(0).ticks(data.length);
  var yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + margin * 2).tickPadding(0).ticks(5);
  var t = null,
  strokeWidth = w / data.length;

  var svg = d3.select('#d3-chart').select('svg').select('g');
  function createSvg(){
    if (svg.empty()) {
      svg = d3.select('#d3-chart')
        .append('svg:svg')
        .attr('width', w)
        .attr('height', h)
        .attr('class', 'viz')
        .append('svg:g')
        .attr('transform', 'translate(' + margin + ',' + margin + ')');
    }
  }

  createSvg();

  function setT(){
    t = svg.transition().duration(transitionDuration);
  }

  setT();

  function addLineStlyingToXTicks(){
    var $lines = $(".xTick .tick line"),
        length = data.length,
        date,
        newText,
        $textEl;

    for(var i = 0; i < length; i++){
      if(data[i].isDay === false){
        $($lines[i]).attr(
          { 'stroke-width': strokeWidth, 'stroke': '#90ABB0' }
        );
        if(i === 0){
          $($lines[i]).attr({ 'stroke-width': strokeWidth * 1.9 });
        }
      }
      else {
        // add dates to bottom of graph
        if ( data[i].date.getHours() === 16 ) {
          date = data[i].date;
          newText = abbreviatedMonthNames[date.getMonth()] + " " 
            + date.getDate() + ", " + (date.getYear() + 1900);
          $textEl = $($(".xTick .tick text")[i]);
          $textEl.text(newText);
          $textEl.show();
          $textEl.attr({"x": -15, "y": 380});
        }
      }
    }
  }

// x ticks and labels gets placed first
  // x ticks and labels
  function setXAxisGroup(){
    if (!xAxisGroup) {
      xAxisGroup = svg.append('svg:g')
        .attr('class', 'xTick')
        .call(xAxis);
    }
    else {
      t.select('.xTick').call(xAxis);
    }
  }

  setXAxisGroup();
  addLineStlyingToXTicks();

// y ticks and labels gets placed second
  // y ticks and labels
  function setYAxisGroup() {
    if (!yAxisGroup) {
      yAxisGroup = svg.append('svg:g')
        .attr('class', 'yTick')
        .call(yAxis);
      // fixes x value for text
      $(".yTick .tick text").attr("x", "-5")
    }
    else {
      t.select('.yTick').call(yAxis);
    }
  }

  setYAxisGroup();

// y ticks and labels gets placed third
  // Draw the lines
  function setDataLinesGroup(){
    if (!dataLinesGroup) {
      dataLinesGroup = svg.append('svg:g');
    }
  }
  setDataLinesGroup();

  dataLines = dataLinesGroup.selectAll('.data-line').data([data]);

  function setLine(){
    line = d3.svg.line()
    // assign the X function to plot our line as we wish
    .x(function(d,i) {
      return x(d.date); 
    })
    .y(function(d) {
      return y(d.temp); 
    })
    .interpolate("linear");
  }
  setLine();

  function setGroupArea(){
    garea = d3.svg.area()
      .interpolate("linear")
      .x(function(d) { return x(d.date); })
      .y0(h - margin * 2)
      .y1(function(d) { return y(d.outdoor_temp); });
  }
  setGroupArea();

  function createAreaClassForGroupArea(){
    dataLines
      .enter()
      .append('svg:path')
      .attr("class", "area");
  }
  createAreaClassForGroupArea();

  function addDataLineWithoutTransitions() {
    dataLines.enter().append('path')
      .attr('class', 'data-line')
      .attr("d", line(data))
  }

  function addDataLineWithTransitions() {
    dataLines.enter().append('path')
      .attr('class', 'data-line')
      .style('opacity', 0.3)
      .attr("d", line(data))
      .transition()
      .delay(transitionDuration / 2)
      .duration(transitionDuration)
      .style('opacity', 1);
  }
  addDataLineWithTransitions();

  dataLines.exit()
    .transition()
    .attr("d", line)
    .duration(transitionDuration)
    .attr("transform", function(d) {
     return "translate(" + x(d.date) + "," + y(0) + ")"; 
    })
    .style('opacity', 1e-6)
    .remove();

  d3.selectAll(".area")
    .attr("d", garea(data));

  // move the area to the back of the graph
  $fillArea = $(".area");
  $("#d3-chart svg > g").prepend($fillArea)

  // add number of violations to the legend
  $("#violations span").text($("#violations span")
    .text().replace(/\d+/, violations));


  if (violations) {
  // Draw the circles if there are any violations
    if (!dataCirclesGroup) {
      dataCirclesGroup = svg.append('svg:g');
    }

    circles = dataCirclesGroup.selectAll('.data-point').data(data);

    circles.enter()
      .append('svg:circle')
      .attr('class', 'data-point')
      .style('opacity', 1)
      .attr('cx', function(d) { return x(d.date) })
      .attr('cy', function() { return y(0) })
      .attr('r', function(d) {
        return d.violation ? pointRadius : 0;
      })
      .transition()
      .duration(transitionDuration)
      .style('opacity', 1)
      .attr('cx', function(d) { return x(d.date) })
{'fraction_non_alphanumeric': 0.18734491315136476, 'fraction_numerical': 0.012333965844402278, 'mean_word_length': 2.4533770161290325, 'pattern_counts': {'":': 4, '<': 7, '<?xml version=': 0, '>': 7, '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': '3740037', 'n_tokens_mistral': 4906, 'n_tokens_neox': 4685, 'n_words': 1006}