<commit_before><html>
  <head>
    <script src="./js/lib/jquery.min.js"></script>
    <script src="./js/lib/jquery.transit.min.js"></script>
    <script src="./js/lib/jquery.csv.min.js"></script>
    <title>The Price of Humanity</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <style type="text/css">
       body{
        color:#fff;
        font-family:helvetica,sans-serif;
       }
       a{
        color:#fff;
       }
       ul, li{
            margin:0;
           padding;0;
           list-style-type:none;
       }
       #interface{
        height:100%;
        width:100%;
        position:fixed;
       }
       #header{
        height:40px;
        width:100%;
        position:absolute;
        background:#000;
        text-align:center;
        text-transform:uppercase;
       }
       #header h1{
        height:40px;
        line-height:40px;
        float:left;
        font-weight:bold;
        margin:0 0 0 10px;
       }
       #cost{
        height:90%;
        width:100px;
        position:absolute;
        top:10%;
        left:-100px;
        background:rgba(0,0,0,0.75);
       }
       #location{
        height:90%;
        width:150px;
        position:absolute;
        right:-150px;
        top:10%;
        background:rgba(0,0,0,0.75);
       }
       #content{
        height:100%;
        width:100%;
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        top:0;
       }
       #content li{
        display:block;
        width:100%;
        height:100%;
        overflow:hidden;
        position:relative;
       }
       #content img, #content canvas{
        position:absolute;
        top:0;
        filter: saturate(25%);
        -webkit-filter: saturate(25%);
        -moz-filter: saturate(25%);
        -o-filter: saturate(25%);
        -ms-filter: saturate(25%);
        min-height:100%;
        height:auto;
        width:60%;
       }
       #content img{
        left:0;
       }
       #content canvas{
        right:0;
       }
       #content .info{
        display:block;
        position:absolute;
        bottom:40px;
        left:0;
        text-align:center;
        width:100%;
       }
       #content h2, #content h3{
        background:#000;
        padding:5px 10px;
        margin:0 0 15px 0;
        display:inline-block;
        font-weight:bold;
        max-width:80%;
        }
        #content h2{
            font-size:3em;
        }
        #content h3{
            font-size:1.5em;
        }
    </style>
  </head>
  <body>
  <div id="fb-root"></div>
    <script>    
window.fbAsyncInit = function() {
    //FB is ready
    FB.init({
      appId      : '428729383937921',
      status     : true,
      xfbml      : true
    });

$( document ).ready(function() {
    //FB and jQuery are ready
    
    
    
    var friends = [];
    var costs;
    var dataLoaded = false;
    var friendsLoaded = false;
    
    //test drawing

    
    
    $.get('./data/cost.csv',function(data){
        costs = $.csv.toObjects(data);
        dataLoaded = true;
        loadComplete();
        $.each(costs,function(i,c){
          var countryID = c.location.trim().toLowerCase().replace(' ','-');
          var costID = 'cost'+i;
          if(!$('#'+countryID).length){
            $('#location ul').append('<li id="'+countryID+'"><a href="#">'+c.location.trim()+'</a></li>');
          }
          $('#cost ul').append('<li id="'+costID+'" data-country="'+countryID+'"><a href="#">$'+c.cost.trim()+'</a></li>');
          var html = '<li data-cost="'+costID+'"><img src="http://placekitten.com/768/1026" alt="" /><canvas></canvas><div class="info"><h2><span class="name">Matt</span>&#39;s life is worth $'+c.cost+'</h2><br><h3>as '+c.as+' in '+c.location;
          if(c.when) html += ', '+c.when;
          html += '.</h3></div></li>';
          $c = $(html).appendTo($('#content ul'));
        var canvas = $c.find('canvas').get(0);
        var image = new Image();
        var ctx = canvas.getContext('2d');
        image.onload = function() {
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.globalCompositeOperation = 'source-over';
            ctx.drawImage(image, 0, 0);
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.moveTo(0, 0);
            //canvas is 60% of total, so 10% overlap total = 15% of canvas
            ctx.lineTo(parseInt(0.15*canvas.width),0); 
            ctx.lineTo(0,canvas.height);
            ctx.closePath();
            ctx.fill();
        };
        image.src = './img/cost/'+(i+1)+'.jpg';
          
        });
    });
    
    function loadComplete(){
        if(friendsLoaded && dataLoaded){
            //ready to go
            console.log("costs:");
            console.log(costs);
            console.log("friends:");
            console.log(friends);
        }
    }
    
    $('a').click(function(e){<commit_msg>now loading cost images from data file<commit_after><html>
  <head>
    <script src="./js/lib/jquery.min.js"></script>
    <script src="./js/lib/jquery.transit.min.js"></script>
    <script src="./js/lib/jquery.csv.min.js"></script>
    <title>The Price of Humanity</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <style type="text/css">
       body{
        color:#fff;
        font-family:helvetica,sans-serif;
       }
       a{
        color:#fff;
       }
       ul, li{
            margin:0;
           padding;0;
           list-style-type:none;
       }
       #interface{
        height:100%;
        width:100%;
        position:fixed;
       }
       #header{
        height:40px;
        width:100%;
        position:absolute;
        background:#000;
        text-align:center;
        text-transform:uppercase;
       }
       #header h1{
        height:40px;
        line-height:40px;
        float:left;
        font-weight:bold;
        margin:0 0 0 10px;
       }
       #cost{
        height:90%;
        width:100px;
        position:absolute;
        top:10%;
        left:-100px;
        background:rgba(0,0,0,0.75);
       }
       #location{
        height:90%;
        width:150px;
        position:absolute;
        right:-150px;
        top:10%;
        background:rgba(0,0,0,0.75);
       }
       #content{
        height:100%;
        width:100%;
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        top:0;
       }
       #content li{
        display:block;
        width:100%;
        height:100%;
        overflow:hidden;
        position:relative;
       }
       #content img, #content canvas{
        position:absolute;
        top:0;
        filter: saturate(25%);
        -webkit-filter: saturate(25%);
        -moz-filter: saturate(25%);
        -o-filter: saturate(25%);
        -ms-filter: saturate(25%);
        min-height:100%;
        height:auto;
        width:60%;
       }
       #content img{
        left:0;
       }
       #content canvas{
        right:0;
       }
       #content .info{
        display:block;
        position:absolute;
        bottom:40px;
        left:0;
        text-align:center;
        width:100%;
       }
       #content h2, #content h3{
        background:#000;
        padding:5px 10px;
        margin:0 0 15px 0;
        display:inline-block;
        font-weight:bold;
        max-width:80%;
        }
        #content h2{
            font-size:3em;
        }
        #content h3{
            font-size:1.5em;
        }
    </style>
  </head>
  <body>
  <div id="fb-root"></div>
    <script>    
window.fbAsyncInit = function() {
    //FB is ready
    FB.init({
      appId      : '428729383937921',
      status     : true,
      xfbml      : true
    });

$( document ).ready(function() {
    //FB and jQuery are ready
    
    
    
    var friends = [];
    var costs;
    var costImages;
    var dataLoaded = false;
    var friendsLoaded = false;
    
    //test drawing

    
    
    $.get('./data/cost.csv',function(data){
        costs = $.csv.toObjects(data);
        $.get('./data/cost-images.csv',function(data){
        
        costImages = $.csv.toObjects(data);
        dataLoaded = true;
        loadComplete();
        $.each(costs,function(i,c){
          var countryID = c.location.trim().toLowerCase().replace(' ','-');
          var costID = 'cost'+i;
          if(!$('#'+countryID).length){
            $('#location ul').append('<li id="'+countryID+'"><a href="#">'+c.location.trim()+'</a></li>');
          }
          $('#cost ul').append('<li id="'+costID+'" data-country="'+countryID+'"><a href="#">$'+c.cost.trim()+'</a></li>');
          var html = '<li data-cost="'+costID+'"><img src="http://placekitten.com/768/1026" alt="" /><canvas></canvas><div class="info"><h2><span class="name">Matt</span>&#39;s life is worth $'+c.cost+'</h2><br><h3>as '+c.as+' in '+c.location;
          if(c.when) html += ', '+c.when;
          html += '.</h3></div></li>';
          $c = $(html).appendTo($('#content ul'));
        var canvas = $c.find('canvas').get(0);
        var image = new Image();
        var ctx = canvas.getContext('2d');
        image.onload = function() {
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.globalCompositeOperation = 'source-over';
            ctx.drawImage(image, 0, 0);
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.moveTo(0, 0);
            //canvas is 60% of total, so 10% overlap total = 15% of canvas
            ctx.lineTo(parseInt(0.15*canvas.width),0); 
            ctx.lineTo(0,canvas.height);
            ctx.closePath();
            ctx.fill();
        };
        image.src = './img/cost/'+costImages[i].filename;
        });
        });
    });
    
    function loadComplete(){
        if(friendsLoaded && dataLoaded){
            //ready to go
            console.log("costs:");
            console.log(costs);
            console.log("costs images:");
            console.log(costImages);
            console.log("friends:");
            console.log(friends);
        }
    }
    
    $('a').click(function(e){
{'fraction_non_alphanumeric': 0.16720509055310817, 'fraction_numerical': 0.032011747430249635, 'mean_word_length': 1.640475575084001, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 83, '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': '1809430', 'n_tokens_mistral': 3417, 'n_tokens_neox': 3227, 'n_words': 555}