<commit_before><style>
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}
</style>

<h5 class="grey-text">Style</h5>
<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Words per sentence</div>
        <div id="words-per-sentence" ></div>
      </div>
      <div class="card-action">
        <a class="activator blue-text text-darken-4">
          How to use this chart
        </a>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">
          Words per sentence
          <i class="material-icons right">close</i>
        </span>
        <p>
          Sentence length can be a powerful tool in your writing, and you should
          use it purposefully. Longer sentences can lure a reader in, while shorter,
          more stacatto sentences keep that attention with fast-paced action.
        </p>
        <p>
          This chart shows the length, in words, of each sentence through your
          document. Groups of shorter sentences likely read faster, while groups
          of longer sentences may be dense or hard to read.
        </p>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    var word_count_data = $.map(<%= analysis.words_per_sentence %>, function( val, i ) {
      return { sentence_index: i, value: val };
    });

    var margin = {top: 10, right: 30, bottom: 30, left: 60},
        width = 1100 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    var svg = d3.select("#words-per-sentence")
      .append("svg")
        .attr("width",  width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    <%= analysis.words_per_sentence %>.forEach(function (data) {
      console.log(data);
    });

    //Read the data
    data = word_count_data;

    console.log(data);

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain(d3.extent(data, function(d) { return d.sentence_index; }))
      .range([ 0, width ]);
    xAxis = svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    yAxis = svg.append("g")
      .call(d3.axisLeft(y));

    // Add a clipPath: everything out of this area won't be drawn.
    var clip = svg.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("width", width )
        .attr("height", height )
        .attr("x", 0)
        .attr("y", 0);

    // Add brushing
    var brush = d3.brushX()                   // Add the brush feature using the d3.brush function
        .extent( [ [0,0], [width,height] ] )  // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
        .on("end", updateChart)               // Each time the brush selection changes, trigger the 'updateChart' function

    // Create the line variable: where both the line and the brush take place
    var line = svg.append('g')
      .attr("clip-path", "url(#clip)")

    // Add the line
    line.append("path")
      .datum(data)
      .attr("class", "line")  // I add the class line to be able to modify this line later on.
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.sentence_index) })
        .y(function(d) { return y(d.value) })
        )

    // Add the brushing
    line
      .append("g")
        .attr("class", "brush")
        .call(brush);

    // A function that set idleTimeOut to null
    var idleTimeout
    function idled() { idleTimeout = null; }

    // A function that update the chart for given boundaries
    function updateChart() {

      // What are the selected boundaries?
      extent = d3.event.selection

      // If no selection, back to initial coordinate. Otherwise, update X axis domain
      if(!extent){
        if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); // This allows to wait a little bit
        x.domain([ 4,8])
      }else{
        x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
        line.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done
      }

      // Update axis and line position
      xAxis.transition().duration(1000).call(d3.axisBottom(x))
      line
          .select('.line')
          .transition()
          .duration(1000)
          .attr("d", d3.line()
            .x(function(d) { return x(d.sentence_index) })
            .y(function(d) { return y(d.value) })
          )
    }

    // If user double click, reinitialize the chart
    svg.on("dblclick",function(){
      x.domain(d3.extent(data, function(d) { return d.sentence_index; }))
      xAxis.transition().call(d3.axisBottom(x))
      line
        .select('.line')
        .transition()
        .attr("d", d3.line()
          .x(function(d) { return x(d.sentence_index) })
          .y(function(d) { return y(d.value) })
      )
    });
  });
</script>
<commit_msg>cleanup<commit_after><style>
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}
</style>

<h5 class="grey-text">Style</h5>
<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Words per sentence</div>
        <div id="words-per-sentence" ></div>
      </div>
      <div class="card-action">
        <a class="activator blue-text text-darken-4">
          How to use this chart
        </a>
      </div>
      <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">
          Words per sentence
          <i class="material-icons right">close</i>
        </span>
        <p>
          Sentence length can be a powerful tool in your writing, and you should
          use it purposefully. Longer sentences can lure a reader in, while shorter,
          more stacatto sentences keep that attention with fast-paced action.
        </p>
        <p>
          This chart shows the length, in words, of each sentence through your
          document. Groups of shorter sentences likely read faster, while groups
          of longer sentences may be dense or hard to read.
        </p>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    var word_count_data = $.map(<%= analysis.words_per_sentence %>, function( val, i ) {
      return { sentence_index: i, value: val };
    });

    var margin = {top: 10, right: 30, bottom: 30, left: 60},
        width = 1100 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    // append the svg object to the body of the page
    var svg = d3.select("#words-per-sentence")
      .append("svg")
        .attr("width",  width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain(d3.extent(word_count_data, function(d) { return d.sentence_index; }))
      .range([ 0, width ]);
    xAxis = svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(word_count_data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    yAxis = svg.append("g")
      .call(d3.axisLeft(y));

    // Add a clipPath: everything out of this area won't be drawn.
    var clip = svg.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("width", width )
        .attr("height", height )
        .attr("x", 0)
        .attr("y", 0);

    // Add brushing
    var brush = d3.brushX()                   // Add the brush feature using the d3.brush function
        .extent( [ [0,0], [width,height] ] )  // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
        .on("end", updateChart)               // Each time the brush selection changes, trigger the 'updateChart' function

    // Create the line variable: where both the line and the brush take place
    var line = svg.append('g')
      .attr("clip-path", "url(#clip)")

    // Add the line
    line.append("path")
      .datum(word_count_data)
      .attr("class", "line")  // I add the class line to be able to modify this line later on.
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.sentence_index) })
        .y(function(d) { return y(d.value) })
        )

    // Add the brushing
    line
      .append("g")
        .attr("class", "brush")
        .call(brush);

    // A function that set idleTimeOut to null
    var idleTimeout
    function idled() { idleTimeout = null; }

    // A function that update the chart for given boundaries
    function updateChart() {

      // What are the selected boundaries?
      extent = d3.event.selection

      // If no selection, back to initial coordinate. Otherwise, update X axis domain
      if(!extent){
        if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); // This allows to wait a little bit
        x.domain([ 4,8])
      }else{
        x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
        line.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done
      }

      // Update axis and line position
      xAxis.transition().duration(1000).call(d3.axisBottom(x))
      line
          .select('.line')
          .transition()
          .duration(1000)
          .attr("d", d3.line()
            .x(function(d) { return x(d.sentence_index) })
            .y(function(d) { return y(d.value) })
          )
    }

    // If user double click, reinitialize the chart
    svg.on("dblclick",function(){
      x.domain(d3.extent(word_count_data, function(d) { return d.sentence_index; }))
      xAxis.transition().call(d3.axisBottom(x))
      line
        .select('.line')
        .transition()
        .attr("d", d3.line()
          .x(function(d) { return x(d.sentence_index) })
          .y(function(d) { return y(d.value) })
      )
    });
  });
</script>

{'fraction_non_alphanumeric': 0.1494609903160972, 'fraction_numerical': 0.012059199707655765, 'mean_word_length': 2.2121478873239435, 'pattern_counts': {'":': 0, '<': 70, '<?xml version=': 0, '>': 72, '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': '1456977', 'n_tokens_mistral': 3539, 'n_tokens_neox': 3381, 'n_words': 992}