<commit_before><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/d3/d3.v3.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

<style type="text/css">
.enter {
    fill: green;
}

.update {
    fill: #333;
}

.exit {
    fill: brown;
}

.labels {
    font-weight: bold;
}

.titles {
    font-weight: bold;
}
.axis path, .axis line {
  fill: none;
  stroke: #555555;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: red;
  stroke-width: 1px;
}
</style>

</head>
<body>
<div class="container">

<div class="masthead">
<h3 class="muted">STINGER Demo</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">PageRank</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>

<div class="well">
<div id="prlist"></div>
</div>
<div class="well">
<div id="prchart"></div>
</div>
<div class="well">
<div id="prdebug"></div>
</div>
</div>

<script>

function rpc(method, params, id, success, error) {
  $.ajax({
    url: "http://localhost:8088/jsonrpc",
    type: "POST",
    data: JSON.stringify({"jsonrpc": "2.0", "method": method, "params": params, "id": id}),
    dataType: "json",
    success: success,
    error: error
  });
}

function List(tag) {
  this.count = 25;
  this.width = 900;
  this.height = (this.count + 3) * 18;
  this.name_pos_x = 80;
  this.label_pos_x = 0;

  this.x_space = function(d,i) {
    return i * 80;
  }


  /* create svg */
  this.svg = d3.select(tag).append("svg")
      .attr("width", this.width)
      .attr("height", this.height);

  /* create labels */
  var labels = this.svg.selectAll(".labels").data(_.range(1,this.count+1))
    .enter().append("text")
    .attr("class","labels")
    .attr("dx", ".35em")
    .attr("x", this.label_pos_x)
    .attr("y", function(d,i) { return (i+2)*18; })
    .text(function(d) { return d; });

  var titles = this.svg.selectAll(".titles").data(["Ranking", "Name", "Score"])
    .enter().append("text")
    .attr("class", "titles")
    .attr("x", this.x_space)
    .attr("y", 18)
    .text(function(d) { return d; });

  /* update and data handling */
  this.update = function(data) {
    var text = this.svg.selectAll(".names")
      .data(data, function (d) { return d[0] });

    text.attr("class","names")
      .transition()
      .delay(750)
      .attr("y", function(d,i) { return (i+2)*18 });

    text.enter().append("text")
      .attr("class","names enter")
      .attr("dx", ".35em")
      .attr("x", this.x_space(0,1))
      .attr("y", function(d,i) { return (i+2)*18; })
      .style("fill-opacity",1e-6)
      .text(function(d) { return d[0]; })
      .transition()
      .delay(750)
      .duration(750)
      .style("fill-opacity",1);

    text.exit()
      .attr("class", "names exit")
      .transition()
      .duration(750)
      .style("fill-opacity",1e-6)
      .remove();

    var values = this.svg.selectAll(".values")
      .data(data, function (d) { return d[0]});

    values.attr("class","values update")
      .transition()
      .delay(750)
      .attr("y", function(d,i) { return (i+2)*18 })
      .text(function(d) { return d[1] });

    values.enter().append("text")
      .attr("class","values enter")
      .attr("dx", ".35em")
      .attr("x", this.x_space(0,2))
      .attr("y", function(d,i) { return (i+2)*18; })
      .style("fill-opacity",1e-6)
      .text(function(d) { return d[1]; })
      .transition()
      .delay(750)
      .duration(750)
      .style("fill-opacity",1);

    values.exit()
      .attr("class", "values exit")
      .transition()
      .duration(750)
      .style("fill-opacity",1e-6)
      .remove();
  }

  return this;
};

list_params = new List("#prlist");

function Chart(tag) {
  this.t = 0;
  this.n = 40;
  this.duration = 750;

  this.margin = {<commit_msg>adding bars<commit_after><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/d3/d3.v3.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

<style type="text/css">
.enter {
    fill: green;
}

.update {
    fill: #333;
}

.exit {
    fill: brown;
}

.labels {
    font-weight: bold;
}

.titles {
    font-weight: bold;
}
.axis path, .axis line {
  fill: none;
  stroke: #555555;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: red;
  stroke-width: 1px;
}
</style>

</head>
<body>
<div class="container">

<div class="masthead">
<h3 class="muted">STINGER Demo</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">PageRank</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>

<div class="well">
<div id="prlist"></div>
</div>
<div class="well">
<div id="prchart"></div>
</div>
<div class="well">
<div id="prdebug"></div>
</div>
</div>

<script>

function rpc(method, params, id, success, error) {
  $.ajax({
    url: "http://localhost:8088/jsonrpc",
    type: "POST",
    data: JSON.stringify({"jsonrpc": "2.0", "method": method, "params": params, "id": id}),
    dataType: "json",
    success: success,
    error: error
  });
}

function List(tag) {
  this.count = 25;
  this.width = 900;
  this.height = (this.count + 3) * 18;
  this.name_pos_x = 80;
  this.label_pos_x = 0;
  this.title_labels = ["Ranking", "Name", "Score", "Relative"];

  this.colors = d3.scale.category20();

  this.x_space = function(d,i) {
    spacing = [0, 80, 180, 400];
    return spacing[i];
  }

  this.bar_width = this.width - this.x_space(0,3);

  /* create svg */
  this.svg = d3.select(tag).append("svg")
      .attr("width", this.width)
      .attr("height", this.height);

  /* create labels */
  var labels = this.svg.selectAll(".labels").data(_.range(1,this.count+1))
    .enter().append("text")
    .attr("class","labels")
    .attr("dx", ".35em")
    .attr("x", this.label_pos_x)
    .attr("y", function(d,i) { return (i+2)*18 + 5; })
    .text(function(d) { return d; });

  var titles = this.svg.selectAll(".titles").data(this.title_labels)
    .enter().append("text")
    .attr("class", "titles")
    .attr("x", this.x_space)
    .attr("y", 18)
    .text(function(d) { return d; });

  /* update and data handling */
  this.update = function(data) {
    var text = this.svg.selectAll(".names")
      .data(data, function (d) { return d[0] });

    text.attr("class","names")
      .transition()
      .delay(750)
      .attr("y", function(d,i) { return (i+2)*18 + 5; });

    text.enter().append("text")
      .attr("class","names enter")
      .attr("dx", ".35em")
      .attr("x", this.x_space(0,1))
      .attr("y", function(d,i) { return (i+2)*18 + 5; })
      .style("fill-opacity",1e-6)
      .text(function(d) { return d[0]; })
      .transition()
      .delay(750)
      .duration(750)
      .style("fill-opacity",1);

    text.exit()
      .attr("class", "names exit")
      .transition()
      .duration(750)
      .style("fill-opacity",1e-6)
      .remove();

    var values = this.svg.selectAll(".values")
      .data(data, function (d) { return d[0]});

    values.attr("class","values update")
      .transition()
      .delay(750)
      .attr("y", function(d,i) { return (i+2)*18 + 5; })
      .text(function(d) { return d[1] });

    values.enter().append("text")
      .attr("class","values enter")
      .attr("dx", ".35em")
      .attr("x", this.x_space(0,2))
      .attr("y", function(d,i) { return (i+2)*18 + 5; })
      .style("fill-opacity",1e-6)
      .text(function(d) { return d[1]; })
      .transition()
      .delay(750)
      .duration(750)
      .style("fill-opacity",1);

    values.exit()
      .attr("class", "values exit")
      .transition()
      .duration(750)
      .style("fill-opacity",1e-6)
      .remove();

    var bars = this.svg.selectAll(".bars")
      .data(data, function(d) { return d[0]; });

    var maxval = _.max(data, function(d) { return d[1]; });
    console.log(maxval[1]);
    console.log(this.bar_width);

    bars.attr("class", "bars update")
      .transition()
      .delay(750)
      .attr("y", function(d,i) { return (i+1)*18 + 5; })
      .attr("width", (function(max, width) { return function(d) { return max == 0 ? width : width * d[1] / max; }; })(maxval[1], this.bar_width));
    
    bars.enter().append("rect")
      .attr("class", "bars enter")
      .attr("x", this.x_space(0,3))
      .attr("y", function(d,i) { return (i+1)*18 + 5; })
      .attr("width", (function(max, width) { return function(d) { return max == 0 ? width : width * d[1] / max; }; })(maxval[1], this.bar_width))
      .attr("height", 18)
      .transition()
      .delay(750)
      .duration(750)
      .style("fill", (function(colors) { return function(d) { return colors(d[0]);}; })(this.colors))
      .style("fill-opacity",1);

    bars.exit()
      .attr("class", "bars exit")
      .transition()
      .duration(750)
      .style("fill-opacity", 1e-6)
      .remove();
  }

  return this;
};

list_params = new List("#prlist");

function Chart(tag) {
  this.t = 0;
  this.n = 40;
  this.duration = 750;

  this.margin = {
{'fraction_non_alphanumeric': 0.2323490344334321, 'fraction_numerical': 0.028813732502298968, 'mean_word_length': 3.0329625051503912, 'pattern_counts': {'":': 8, '<': 139, '<?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': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6109008', 'n_tokens_mistral': 3869, 'n_tokens_neox': 3658, 'n_words': 700}