<commit_before><!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>European League Probability</title>
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 800px;
}
#chart {
  margin: 20px;
}
</style>
</head>
<body>
<h1>European League Winner Probability</h1>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../tipsy/javascripts/jquery.tipsy.js"></script>
<link href="../tipsy/stylesheets/tipsy.css" rel="stylesheet" type="text/css" />

<!--<script src="box.js"></script>-->
<script>

var width = 600,
    height = 300,
    mx = 30, //x margin
    my = 25; //y margin

var chart = d3.select("#chart").append("svg")
    .attr("class", "chart")
    .attr("width", width + 2*mx)
    .attr("height", height + 2*my)
  .append("g")
    .attr("transform", "translate(" + mx + "," + my + ")");

d3.csv("summary.csv", function(error, csv) {
  var data = [];

  csv.forEach(function(row) {
    row.min = parseFloat(row.min);
    row.max = parseFloat(row.max);
    row.mean = parseFloat(row.mean);
    row.median = parseFloat(row.median);
    row.twentyfive = parseFloat(row.twentyfive);
    row.seventyfive = parseFloat(row.seventyfive);
    row.pct = 100/row.median;
    row.pct25 = 100/row.twentyfive;
    row.pct75 = 100/row.seventyfive;
    //TODO: 25th and 75th
    if (row.pct > 3) {
      data.push(row);
    }
  });
  console.log(data);

  var countries = ['Germany', 'Spain', 'England', 'France', 'Italy', 'Scotland', 'Brazil'];

  var xscale = d3.scale.ordinal()
      .domain(countries)
      .rangeBands([0, width])

  var y = d3.scale.linear()
    .domain([1, 100])
    .range([0, height])

  // y axis ticks
  chart.selectAll(".yaxistick")
      .data(y.ticks(10).slice(0,10)) //omit 100
    .enter().append("line")
      .attr("class", "yaxistick")
      .attr("x1", 0)
      .attr("x2", width)
      .attr("y1", function(d) { return height - y(d); })
      .attr("y2", function(d) { return height - y(d); })
      .style("stroke", "#f6f6f6");

  // y axis labels
  chart.selectAll(".yaxislabel")
      .data(y.ticks(10).slice(0,10)) //omit 100
    .enter().append("text")
      .attr("class", "yaxislabel")
      .attr("x", 0)
      .attr("y", function(d) { return height - y(d); })
      .attr("dx", -10)
      .attr("text-anchor", "middle")
      .style("fill", "#ccc")
      .style("font", "10px sans-serif")
      .text(String);

  // x axis labels
  chart.selectAll(".xaxislabel")
      .data(countries)
    .enter().append("text")
      .attr("class", "xaxislabel")
      .attr("x", function(d) { return xscale(d) + xscale.rangeBand()/2; })
      .attr("y", function() { return my-40; })
      .attr("text-anchor", "middle")
      .style("font", "12px sans-serif")
      .text(String);

  var replacements = {
    "bayernmunich": "bayern-munich",
    "bordortmund": "borussia-dortmund",
    "bayerleverkusen": "bayer-leverkusen",
    "realmadrid": "real-madrid",
    "mancity": "man-city",
    "manutd": "man-utd",
    "psg": "paris-sg",
    "acmilan": "ac-milan",
    "corinthianssp": "corinthians",
    "internacionalrs": "internacional",
    "atleticopr": "atletico-mineiro",
    "botafogorj": "botafogo",
    "goiasgo": "goias",
  }

  function sanitize(x) {
    var safe = x.replace(/ /g, "").toLowerCase();
    if (replacements.hasOwnProperty(safe)) {
      safe = replacements[safe];
    }
    return safe + ".png";
  }

  var imgsize = 20;
  var offset = 0;

  function xx(d, i) {
    var x = xscale(d.country) + xscale.rangeBand()/2 - (imgsize/2);
    if (i > 0 && Math.abs(y(data[i-1].pct) - y(d.pct)) < 20) {
      console.log(d, i, y(d.pct), y(data[i-1].pct));
      offset += 20;
      //console.log(d);
    }
    else {
      offset = 0;
    }
    return x + offset;
  }

  chart.selectAll("image")
      .data(data)
    .enter().append("svg:image")
      .attr("x", xx)
      .attr("y", function(d) { return height - y(d.pct) - (imgsize/2); })
      .attr("width", imgsize)
      .attr("height", imgsize)
      .attr("xlink:href", function(d) { return "crests/" + sanitize(d.name); });
<commit_msg>better image placement in euroleagues<commit_after><!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>European League Probability</title>
<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 800px;
}
#chart {
  margin: 20px;
}
</style>
</head>
<body>
<h1>European League Winner Probability</h1>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../tipsy/javascripts/jquery.tipsy.js"></script>
<link href="../tipsy/stylesheets/tipsy.css" rel="stylesheet" type="text/css" />

<!--<script src="box.js"></script>-->
<script>

var width = 600,
    height = 300,
    mx = 30, //x margin
    my = 25; //y margin

var chart = d3.select("#chart").append("svg")
    .attr("class", "chart")
    .attr("width", width + 2*mx)
    .attr("height", height + 2*my)
  .append("g")
    .attr("transform", "translate(" + mx + "," + my + ")");

d3.csv("summary.csv", function(error, csv) {
  var data = [];

  csv.forEach(function(row) {
    row.min = parseFloat(row.min);
    row.max = parseFloat(row.max);
    row.mean = parseFloat(row.mean);
    row.median = parseFloat(row.median);
    row.twentyfive = parseFloat(row.twentyfive);
    row.seventyfive = parseFloat(row.seventyfive);
    row.pct = 100/row.median;
    row.pct25 = 100/row.twentyfive;
    row.pct75 = 100/row.seventyfive;
    //TODO: 25th and 75th
    if (row.pct > 3) {
      data.push(row);
    }
  });
  console.log(data);

  var countries = ['Germany', 'Spain', 'England', 'France', 'Italy', 'Scotland', 'Brazil'];

  var xscale = d3.scale.ordinal()
      .domain(countries)
      .rangeBands([0, width])

  var y = d3.scale.linear()
    .domain([1, 100])
    .range([0, height])

  // y axis ticks
  chart.selectAll(".yaxistick")
      .data(y.ticks(10).slice(0,10)) //omit 100
    .enter().append("line")
      .attr("class", "yaxistick")
      .attr("x1", 0)
      .attr("x2", width)
      .attr("y1", function(d) { return height - y(d); })
      .attr("y2", function(d) { return height - y(d); })
      .style("stroke", "#f6f6f6");

  // y axis labels
  chart.selectAll(".yaxislabel")
      .data(y.ticks(10).slice(0,10)) //omit 100
    .enter().append("text")
      .attr("class", "yaxislabel")
      .attr("x", 0)
      .attr("y", function(d) { return height - y(d) + 3; })
      .attr("dx", -10)
      .attr("text-anchor", "middle")
      .style("fill", "#ccc")
      .style("font", "10px sans-serif")
      .text(String);

  // x axis labels
  chart.selectAll(".xaxislabel")
      .data(countries)
    .enter().append("text")
      .attr("class", "xaxislabel")
      .attr("x", function(d) { return xscale(d) + xscale.rangeBand()/2; })
      .attr("y", function() { return my-40; })
      .attr("text-anchor", "middle")
      .style("font", "12px sans-serif")
      .text(String);

  var replacements = {
    "bayernmunich": "bayern-munich",
    "bordortmund": "borussia-dortmund",
    "bayerleverkusen": "bayer-leverkusen",
    "realmadrid": "real-madrid",
    "mancity": "man-city",
    "manutd": "man-utd",
    "psg": "paris-sg",
    "acmilan": "ac-milan",
    "corinthianssp": "corinthians",
    "internacionalrs": "internacional",
    "atleticopr": "atletico-mineiro",
    "botafogorj": "botafogo",
    "goiasgo": "goias",
  }

  function sanitize(x) {
    var safe = x.replace(/ /g, "").toLowerCase();
    if (replacements.hasOwnProperty(safe)) {
      safe = replacements[safe];
    }
    return safe + ".png";
  }

  var imgsize = 20;
  var offset = 0;

  function xx(d, i) {
    var x = xscale(d.country) + xscale.rangeBand()/2 - (imgsize/2);
    if (i > 0 && Math.abs(y(data[i-1].pct) - y(d.pct)) < 20) {
      console.log(d, i, y(d.pct), y(data[i-1].pct));
      if (offset == 0) {
        offset += imgsize;
      } else if (offset > 0) {
        offset = -imgsize;
      } else {
        offset = 0;
      }
      //console.log(d);
    }
    else {
      offset = 0;
    }
    return x + offset;
  }

  chart.selectAll("image")
      .data(data)
    .enter().append("svg:image")
      .attr("x", xx)
      .attr("y", function(d) { return height - y(d.pct) - (imgsize/2); })
      .attr("width", imgsize)
      .attr("height", imgsize)
      .attr("xlink:href", function(d) { return "crests/" + sanitize(d.name); });

{'fraction_non_alphanumeric': 0.21280337671473795, 'fraction_numerical': 0.024152890139523975, 'mean_word_length': 2.8319856244384547, 'pattern_counts': {'":': 26, '<': 53, '<?xml version=': 0, '>': 56, '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': '317326', 'n_tokens_mistral': 3463, 'n_tokens_neox': 3246, 'n_words': 613}