<commit_before><head><script src="http://d3js.org/d3.v3.js" charset="utf-8"></script></head>
<body>
  <script type="text/javascript">
  window.mything = function () {
   /*global window */
   /*global WebSocket */

   var build_colors = function () {
    var colors = [];
    console.log('Inside set_colors');
    for (var i = 0; i < 30; i++ ) {
      var color;
      if (i < 10) {
        color = color_scale_10(i);
        console.log(color, i);
        colors.push(color);
        console.log(colors);
      } else {
        color = color_scale_20(i - 10);
        console.log(color, i);
        colors.push(color);
        console.log(colors);
      }
    }
    return colors;
  };

  var peers = {};
  var files = [];
  var want_file_pos = [];
  var window_width = window.innerWidth;
  var window_height = window.innerHeight;
  var xScale;
  var padding = 1;
  var bar_height = 20;
  var piece_height = 10;
  var piece_width = 10;
  var piece_y = Math.floor(bar_height / 2) - Math.floor(piece_height / 2);
  var color_scale_10 = d3.scale.category10();
  var color_scale_20 = d3.scale.category20c();
  var colors = build_colors();
  window.THEWEBSOCKET = new WebSocket("ws://blagdons-macbook-air-2.local:8001");
  window.onbeforeunload = function () { window.THEWEBSOCKET.close(); };

  var build_model = function (init_dict) {
   console.log("inside build_model");
   want_file_pos = init_dict.want_file_pos;
   want_file_pos.forEach( function(want_index, i) {
     files[i] = {};
     var head_and_tail = init_dict.heads_and_tails[i];
     files[i].path = init_dict.files[want_index].path;
     files[i].relevant = [];
     for (var j = head_and_tail[0]; j <= head_and_tail[1]; j++) {
       files[i].relevant.push(j);
     }
   });
   draw_svgs();
 };

 var draw_svgs = function () {
  var divs = d3.select("body")
  .selectAll("div")
  .data(files)
  .enter()
  .append("div")
  .style("height", 100);

  var texts = divs.append("text")
  .text(function (d) { return d.path.join('/'); })
  .attr("text-size", 30)
  .attr("font", "sans-serif")
  .attr("y", 30);

  var svgs = divs.append("svg");

  var bars = svgs.append("rect")
  .attr("class", "bar")
  .attr("id", function (d, i) {
    return "#bar" + d.ip;
  })
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", function (d) { 
   return 10 * d.relevant.length + padding;
 })
  .attr("height", bar_height)
  .attr("fill", "red")
  .attr("opacity", 0.2)
  .attr("id", function (d, i) {return ("#bar" + i); });


  console.log("o hai");


  var pieces = svgs.selectAll("rect.piece")
  .data(function (d) { return d.relevant; })
  .enter()
  .append("rect")
  .attr("class", "piece")
  .attr("class", function (d) { return ("piece" + d); })
  .attr("x", function (d, i) { return padding + i * piece_width; })
  .attr("y", piece_y)
  .attr("height", piece_height - padding)
  .attr("width", piece_width - padding)
  .attr("fill", "blue")
  .attr("opacity", 0.1);
};

var vis_request = function (req_dict) {
};

var get_color = function (ip) {
  // return peers[ip];
};

var vis_write = function (write_dict) {
 // var piece_index = write_dict.piece_index;
 // d3.selectAll("rect.piece" + piece_index)
 // .attr("fill", get_color(write_dict.peer.join(":")))
 // .transition()
 // .duration(1000)
 // .attr("opacity", 1);
};

var build_peer = function (peer_dict) {
  // console.log('inside build_peer '+ colors[0]);
  // var ip = peer_dict.address.join(":");
  // var color = colors.shift();
  // peers[ip] = color;
};

window.THEWEBSOCKET.onmessage = function (chunk) {
  console.log('Received a message');
  var messages = chunk.data.split('\r\n\r\n');
  messages.forEach( function (message) {
   try {
    var meat = JSON.parse(message);
    console.log(meat);
    if (meat.kind === "init") {
     build_model(meat);
   } else if (meat.kind === "request") {
     vis_request(meat);
   } else if (meat.kind === "piece") {
     vis_write(meat);
   } else if (meat.kind === "activate") {
    console.log("Activate");
    build_peer(meat);
  } else {
   throw "Data kind invalid";
 }
} catch (e) {
  console.log("Parsing failed");
  console.log(e);
}<commit_msg>Added some dictionaries for interactivity<commit_after><head><script src="http://d3js.org/d3.v3.js" charset="utf-8"></script></head>
<body>
  <script type="text/javascript">
  window.mything = function () {
   /*global window */
   /*global WebSocket */

   var build_colors = function () {
    var colors = [];
    console.log('Inside set_colors');
    for (var i = 0; i < 30; i++ ) {
      var color;
      if (i < 10) {
        color = color_scale_10(i);
        console.log(color, i);
        colors.push(color);
        console.log(colors);
      } else {
        color = color_scale_20(i - 10);
        console.log(color, i);
        colors.push(color);
        console.log(colors);
      }
    }
    return colors;
  };

  var peers = {};
  var pieces = {};
  var files = [];
  var want_file_pos = [];
  var window_width = window.innerWidth;
  var window_height = window.innerHeight;
  var xScale;
  var div_height = 50;
  var padding = 1;
  var bar_height = 16;
  var piece_height = 10;
  var piece_width = 10;
  var text_size = 10;
  var piece_y = Math.floor(bar_height / 2) - Math.floor(piece_height / 2);
  var color_scale_10 = d3.scale.category10();
  var color_scale_20 = d3.scale.category20c();
  var colors = build_colors();
  window.THEWEBSOCKET = new WebSocket("ws://blagdons-macbook-air-2.local:8001");
  window.onbeforeunload = function () { window.THEWEBSOCKET.close(); };

  var build_model = function (init_dict) {
   console.log("inside build_model");
   want_file_pos = init_dict.want_file_pos;
   want_file_pos.forEach( function(want_index, i) {
     files[i] = {};
     var head_and_tail = init_dict.heads_and_tails[i];
     files[i].path = init_dict.files[want_index].path;
     files[i].relevant = [];
     for (var j = head_and_tail[0]; j <= head_and_tail[1]; j++) {
       files[i].relevant.push(j);
     }
   });
   draw_svgs();
 };

 var draw_svgs = function () {
  var divs = d3.select("body")
  .selectAll("div")
  .data(files)
  .enter()
  .append("div")
  .style("height", div_height);

  var texts = divs.append("text")
  .text(function (d) { return d.path.join('/'); })
  .style("font-size", text_size)
  .style("font-family", "sans-serif")
  .style("color", "#09C53B")
  .attr("y", 30);

  var svgs = divs.append("svg");

  var vis_bars = svgs.append("rect")
  .attr("class", "bar")
  .attr("id", function (d, i) {
    return "#bar" + d.ip;
  })
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", function (d) { 
   return 10 * d.relevant.length + padding;
 })
  .attr("height", bar_height)
  .attr("fill", "white")
  .attr("stroke", "gray")
  .attr("opacity", 0.2)
  .attr("id", function (d, i) {return ("#bar" + i); });


  console.log("o hai");


  var vis_pieces = svgs.selectAll("rect.piece")
  .data(function (d) { return d.relevant; })
  .enter()
  .append("rect")
  .attr("class", "piece")
  .attr("class", function (d) { return ("piece" + d); })
  .attr("x", function (d, i) { return padding + i * piece_width; })
  .attr("y", piece_y)
  .attr("height", piece_height - padding)
  .attr("width", piece_width - padding)
  .attr("fill", "blue")
  .attr("opacity", 0);
};

var vis_request = function (req_dict) {
};

var get_color = function (ip) {
  return peers[ip]["color"];
};

var vis_write = function (write_dict) {
 var piece_index = write_dict.piece_index;
 ip = write_dict.peer.join(":");
 pieces[piece_index] = ip;
 peers[ip].pieces.push(piece_index);
 d3.selectAll("rect.piece" + piece_index)
 .attr("fill", get_color(ip))
 .transition()
 .duration(1000)
 .attr("opacity", 1);
};

var build_peer = function (peer_dict) {
  console.log('inside build_peer '+ colors[0]);
  var ip = peer_dict.address.join(":");
  var color = colors.shift();
  peers[ip] = {"color": color, "pieces": []};
};

window.THEWEBSOCKET.onmessage = function (chunk) {
  console.log('Received a message');
  var messages = chunk.data.split('\r\n\r\n');
  messages.forEach( function (message) {
   try {
    var meat = JSON.parse(message);
    console.log(meat);
    if (meat.kind === "init") {
     build_model(meat);
   } else if (meat.kind === "request") {
     vis_request(meat);
   } else if (meat.kind === "piece") {
     vis_write(meat);
   } else if (meat.kind === "activate") {
    console.log("Activate");
    build_peer(meat);
  } else {
   throw "Data kind invalid";
 }
} catch (e) {
  console.log("Parsing failed");
  console.log(e);
}
{'fraction_non_alphanumeric': 0.19071739898692425, 'fraction_numerical': 0.015313935681470138, 'mean_word_length': 3.209221616261775, 'pattern_counts': {'":': 6, '<': 21, '<?xml version=': 0, '>': 15, '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': '2925737', 'n_tokens_mistral': 3215, 'n_tokens_neox': 3083, 'n_words': 645}