<commit_before><!DOCTYPE html>
<html>
<head>
    <title>Football Landscape</title>

    <style>


      body {
        font: 10px sans-serif;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
        width:1px;
      }

      .area {
        fill: steelblue;
      }

      .line{
        fill: none;
        stroke: blue;
        width:2px;
      }

    </style>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    
    function update(values) {
      
        d3.selectAll(".area")
            .data([values])
          .transition()
            .duration(1500)
            .attr("d", area);
        d3.selectAll(".line")
            .data([values])
          .transition()
            .duration(1500)
            .attr("d", line);
    }

    </script>
</head>
<body>
    <header>
        <h1>NFC East Small Multiples</h1>
        <ul>
            <li><a href="#redskins">Washington Redskins</a></li>
        </ul>
    </header>
    <section id="charts">
        <a id="toggle" href="#toggle">Toggle</a>

    </section>

    <select id="year">
      <option selected="selected" value="0">2002</option>
      <option value="1">2003</option>
      <option value="2">2004</option>
      <option value="3">2005</option>
      <option value="4">2006</option>
      <option value="5">2007</option>
      <option value="6">2008</option>
      <option value="7">2009</option>
      <option value="8">2010</option>
      <option value="9">2011</option>
    </select>

    <section id="explination">
        <p>
            Using Small Multiples to survey the landscape of the NFL over the last 10 years.
        </p>
    </section>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script>
        "use strict";


        var d = [
            [1,1,1,2,2,2,3,4,4,4,5,5,5,5,6,7],
            [1,2,2,3,3,3,3,3,4,4,4,4,5,5,5,5],
            [1,1,1,1,1,2,2,3,3,3,3,4,4,5,5,6],
            [1,2,3,3,3,4,4,5,5,5,5,6,7,8,9,10],
            [0,0,1,2,2,2,2,3,3,3,4,4,4,5,5,5],
            [1,2,2,3,3,4,4,5,5,5,5,5,6,7,8,9],
            [0,1,2,3,4,4,5,6,6,6,7,7,7,7,8,8],
            [0,1,1,2,2,2,2,2,3,3,3,3,4,4,4,4],
            [1,1,1,2,3,3,4,4,4,5,5,5,5,5,6,6],
            [1,2,2,3,3,3,3,3,3,3,4,4,4,5,5,5]
          ];



      var margin = 25,
          width = 500,
          height = 300;
      
      var value =0;

      var x_extent = [1,16];
      var x_scale = d3.scale.linear()
                            .range([margin, width-margin])
                            .domain(x_extent);
      
      var y_extent = [0, 16],
          y_over_extent = [-16,16]

      var y_scale = d3.scale.linear()
                .range([height-margin, margin])
                .domain(y_extent);
          y_over_scale = d3.scale.linear()
                .range([height-margin, margin])
                .domain(y_over_extent);

      var area = d3.svg.area()
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y0(height)
          .y1(function(d) { 
            return y_scale(d); });

      var area_over = d3.svg.area()
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y0(function(d) { 
            return (d >= 0) ? height/2 : y_scale(d); })
          .y1(function(d) { 
            return (d <= 0) ? height/2 : y_scale(d); });

      var line = d3.svg.line()
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y(function(d) { 
            return y_scale(d); });

      var xAxis = d3.svg.axis()
          .scale(x_scale)
          .orient("bottom");

      var yAxis = d3.svg.axis()
          .scale(y_scale)
          .orient("left"),
        y_over_over_Axis = d3.svg.axis()
          .scale(y_scale)
          .orient("left");

      var svg = d3.select("#charts").append("svg")
          .attr("width", width + margin + margin)
          .attr("height", height + margin + margin)
        .append("g")
          .attr("transform", "translate(" + margin + "," + margin + ")");

      svg.append("path")
        .data([d[value]])
        .attr("class", "area")
        .attr("d", area);

      svg.append("path")
        .data([d[value]])
        .attr("class", "line")
        .attr("d", line);

      svg.append("g")
        .attr("class", "x-axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

      svg.append("g")
        .attr("class", "x-axis")
        .attr("transform", "translate(0," + height/2 + ")")
        .call(xAxis);

      svg.append("g")
          .attr("class", "y-axis")
          .attr("transform", "translate(" + margin + "," + margin + ")")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Wins");


        //d3.csv('was10.csv', draw);
       //Query Stuff to be pulled into main 
      $(document).ready(function(){

          $('#year').bind('change', function(){

              var val = $('#year option:selected').val(); 
              update(d[val]);
          });
      });
    </script>
   
</body>
</html><commit_msg>Update to allow toggling between charting tpyes<commit_after><!DOCTYPE html>
<html>
<head>
    <title>Football Landscape</title>

    <style>


      body {
        font: 10px sans-serif;
      }

      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
        width:1px;
      }

      .area {
        fill: steelblue;
      }

      .line{
        fill: none;
        stroke: blue;
        width:2px;
      }

    </style>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
    
    function update(values, area_function, line_function, location, ySetup) {
      
        d3.selectAll(".area")
            .data([values])
          .transition()
            .duration(1500)
            .attr("d", area_function);

        d3.selectAll(".line")
            .data([values])
          .transition()
            .duration(1500)
            .attr("d", line_function);

        d3.selectAll(".x-axis")
          .transition()
            .duration(1500)
            .attr("transform", "translate(0," + location + ")");
        d3.selectAll(".y-axis")
          .transition()
            .duration(1500)
            .call(ySetup)
    }

    </script>
</head>
<body>
    <header>
        <h1>NFC East Small Multiples</h1>
        <ul>
            <li><a href="#redskins">Washington Redskins</a></li>
        </ul>
    </header>
    <section id="charts">
        <a id="toggle" href="#toggle">Toggle</a>

    </section>

    <select id="year">
      <option selected="selected" value="0">2002</option>
      <option value="1">2003</option>
      <option value="2">2004</option>
      <option value="3">2005</option>
      <option value="4">2006</option>
      <option value="5">2007</option>
      <option value="6">2008</option>
      <option value="7">2009</option>
      <option value="8">2010</option>
      <option value="9">2011</option>
    </select>

    <section id="explination">
        <p>
            Using Small Multiples to survey the landscape of the NFL over the last 10 years.
        </p>
    </section>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script>
        "use strict";


        var d = [
            [1,1,1,2,2,2,3,4,4,4,5,5,5,5,6,7],
            [1,2,2,3,3,3,3,3,4,4,4,4,5,5,5,5],
            [1,1,1,1,1,2,2,3,3,3,3,4,4,5,5,6],
            [1,2,3,3,3,4,4,5,5,5,5,6,7,8,9,10],
            [0,0,1,2,2,2,2,3,3,3,4,4,4,5,5,5],
            [1,2,2,3,3,4,4,5,5,5,5,5,6,7,8,9],
            [0,1,2,3,4,4,5,6,6,6,7,7,7,7,8,8],
            [0,1,1,2,2,2,2,2,3,3,3,3,4,4,4,4],
            [1,1,1,2,3,3,4,4,4,5,5,5,5,5,6,6],
            [1,2,2,3,3,3,3,3,3,3,4,4,4,5,5,5]
          ];

      var d_over = [];
      var tmp = [];
      //d.forEach(GamesOver500);

      for(var i=0; i < d.length; i++){
        d[i].forEach(GamesOver500)
        d_over.push(tmp);
        tmp = []
      }

      function GamesOver500(element, index, array) {
          tmp.push(element - (index+1)/2);
      }

      var margin = 25,
          width = 500,
          height = 300;
      
      var value =0;

      var x_extent = [1,16];
      var x_scale = d3.scale.linear()
                            .range([margin, width-margin])
                            .domain(x_extent);
      
      var y_extent = [0, 16],
          y_over_extent = [-16,16];

      var y_scale = d3.scale.linear()
                .range([height-margin, margin])
                .domain(y_extent);
      var y_over_scale = d3.scale.linear()
                .range([height-margin, margin])
                .domain(y_over_extent);

      var area = d3.svg.area()
          .interpolate('cardinal')
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y0(height)
          .y1(function(d) { 
            return y_scale(d); });

      var area_over = d3.svg.area()
          .interpolate('cardinal')
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y0(function(d) { 
            return (d >= 0) ? height/2 : y_over_scale(d); })
          .y1(function(d) { 
            return (d <= 0) ? height/2 : y_over_scale(d); });

      var line = d3.svg.line()
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y(function(d) { 
            return y_scale(d); });

      var line_over = d3.svg.line()
          .x(function(d,i) { 
            return x_scale(i+1); })
          .y(function(d) { 
            return y_over_scale(d); });

      var xAxis = d3.svg.axis()
          .scale(x_scale)
          .orient("bottom");

      var yAxis = d3.svg.axis()
          .scale(y_scale)
          .orient("left"),
        y_over_Axis = d3.svg.axis()
          .scale(y_over_scale)
          .orient("left");

      var svg = d3.select("#charts").append("svg")
          .attr("width", width + margin + margin)
          .attr("height", height + margin + margin)
        .append("g")
          .attr("transform", "translate(" + margin + "," + margin + ")");

      svg.append("path")
        .data([d_over[value]])
        .attr("class", "area")
        .attr("d", area_over);

      // svg.append("path")
      //   .data([d[value]])
      //   .attr("class", "line")
      //   .attr("d", line);

      // svg.append("path")
      //   .data([d_over[value]])
      //   .attr("class", "line")
      //   .attr("d", line_over);

      // svg.append("g")
      //   .attr("class", "x-axis")
      //   .attr("transform", "translate(0," + height + ")")
      //   .call(xAxis);

      svg.append("g")
        .attr("class", "x-axis")
        .attr("transform", "translate(0," + height/2 + ")")
        .call(xAxis);

      // svg.append("g")
      //     .attr("class", "y-axis")
      //     .attr("transform", "translate(" + margin + "," + margin + ")")
      //     .call(yAxis)
      //   .append("text")
      //     .attr("transform", "rotate(-90)")
      //     .attr("y", 6)
      //     .attr("dy", ".71em")
      //     .style("text-anchor", "end")
      //     .text("Wins");

       svg.append("g")
          .attr("class", "y-axis")
          .attr("transform", "translate(" + margin + "," + margin + ")")
          .call(y_over_Axis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Wins");
 
          var toggle = 1;
        //d3.csv('was10.csv', draw);
       //Query Stuff to be pulled into main 
      $(document).ready(function(){

          $('#year').bind('change', function(){

            value = $('#year option:selected').val(); 
            updateLogic();
              
          });

          $('#toggle').click(function(){
            toggle = (toggle == 1) ? 0 : 1;
            updateLogic();
          });

      });

      function updateLogic(){
          if(toggle == 1){
              update(d_over[value], area_over, line_over, height/2, y_over_Axis);
            }else{
              update(d[value], area, line, height, yAxis);
            }        
      }

    </script>
   
</body>
</html>
{'fraction_non_alphanumeric': 0.19843075715967046, 'fraction_numerical': 0.04864652805021577, 'mean_word_length': 1.6581856100104275, 'pattern_counts': {'":': 0, '<': 140, '<?xml version=': 0, '>': 139, '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': '2711376', 'n_tokens_mistral': 4751, 'n_tokens_neox': 4477, 'n_words': 706}