<commit_before><!DOCTYPE html>
<meta charset="utf-8">
<script src="d3.v3.min.js"></script>
<style>

path.link {
  fill: none;
  stroke: #5668e2;
  stroke-width: 1.5px;
}

circle {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5px;
}

marker {
  stroke: #5668e2;
  stroke-width: .1em;
  fill: none;
}

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

.legend {
  padding: 5px;
  font: 10px sans-serif;
  box-shadow: 2px 2px 1px #888;
}

.legend-label {
  font: 15px sans-serif;
}

.title {
  font: 20px sans-serif bold;
  fill: #000;
}
</style>
<body>
<script>

// Heavily inspired by http://bl.ocks.org/d3noob/5141528

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    width = w.innerWidth || e.clientWidth || g.clientWidth,
    height = w.innerHeight|| e.clientHeight|| g.clientHeight;


d3.json("phillylug.json", function(error, tree) {
  var nodes = tree.nodes,
      links = tree.links,
      circleScale,
      legend,
      title,
      force,
      color,
      path,
      node,
      svg;

  // Compute the distinct nodes from the links.
  links.forEach(function(link) {
      link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
      link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
      link.value = +link.value;
  });

  force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(500)
      .charge(-550)
      .on("tick", tick)
      .start();

  circleScale = d3.scale.linear()
      .domain([0, d3.max(nodes, function (d) { return d.sigCount; })])
      .range([5, 50]);

  color = d3.scale.category20();

  svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
      .data(["mid"])      // Different link/path types can be defined here
    .enter().append("svg:marker")    // This section adds in the arrows
      .attr("id", String)
      .attr("viewBox", "0 0 10 10")
      .attr("refX", 1)
      .attr("refY", 5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
    .append("svg:path")
      .attr("d", "M 0 0 L 10 5 L 0 10");

  // add the links and the arrows
  path = svg.append("svg:g").selectAll("path")
      .data(force.links())
    .enter().append("svg:path")
      .attr("class", "link")
      .attr("marker-mid", "url(#mid)");

  // define the nodes
  node = svg.selectAll(".node")
      .data(force.nodes())
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
    .style("fill", function(d) { return color(d.sigCount); })
    .attr("r", function(d) { return circleScale(d.sigCount); });

  node.append("text")
    .attr("x", function (d) { return circleScale(d.sigCount) + 3; })
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });


	legend = svg.append("g")
	  .attr("class", "legend")
	  .attr("x", width - 65)
	  .attr("y", 25)
	  .attr("height", 100)
	  .attr("width", 100);

	legend.selectAll('g').data(Object.keys(officeColors))
      .enter()
      .append('g')
      .each(function(d, i) {
        var g = d3.select(this);
        g.append("circle")
          .attr("cx", 15)
          .attr("cy", i * 40 + 20)
          .attr("r", 15)
          .style("fill", officeColors[d]);

        g.append("text")
          .attr("class", "legend-label")
          .attr("x", 35)
          .attr("y", i * 40 + 25)
          .attr("height", 55)
          .attr("width", 100)
          .style("fill", '#000')
          .text(d);

      });

  svg.append("text")
		.attr("x", width / 2 )
        .attr("y", 30)
        .attr("class", "title")
        .style("text-anchor", "middle")
        .text("Rax.IO 2014 Web of Trust");

  function tick() {
      path.attr("d", function(d) {
          var dx = (d.target.x - d.source.x) / 1.5,
              dy = (d.target.y - d.source.y) / 1.5,
              dr = Math.sqrt(dx * dx + dy * dy),
              edge = d.target.x - 60;

          return "M" +
              d.source.x + "," +
              d.source.y + "A" +
              dr + "," + dr + " 0 0,1 " +
              d.target.x + "," +
              d.target.y;
      });

      node.attr("transform", function(d) {<commit_msg>Fix title and add source of data.<commit_after><!DOCTYPE html>
<meta charset="utf-8">
<script src="d3.v3.min.js"></script>
<style>

path.link {
  fill: none;
  stroke: #5668e2;
  stroke-width: 1.5px;
}

circle {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5px;
}

marker {
  stroke: #5668e2;
  stroke-width: .1em;
  fill: none;
}

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

.legend {
  padding: 5px;
  font: 10px sans-serif;
  box-shadow: 2px 2px 1px #888;
}

.legend-label {
  font: 15px sans-serif;
}

.title {
  font: 20px sans-serif bold;
  fill: #000;
}
</style>
<body>
<script>

// Heavily inspired by http://bl.ocks.org/d3noob/5141528
// Data sourced from http://www.phillylinux.org/keys/historical.html

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    width = w.innerWidth || e.clientWidth || g.clientWidth,
    height = w.innerHeight|| e.clientHeight|| g.clientHeight;


d3.json("phillylug.json", function(error, tree) {
  var nodes = tree.nodes,
      links = tree.links,
      circleScale,
      legend,
      title,
      force,
      color,
      path,
      node,
      svg;

  // Compute the distinct nodes from the links.
  links.forEach(function(link) {
      link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
      link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
      link.value = +link.value;
  });

  force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(500)
      .charge(-550)
      .on("tick", tick)
      .start();

  circleScale = d3.scale.linear()
      .domain([0, d3.max(nodes, function (d) { return d.sigCount; })])
      .range([5, 50]);

  color = d3.scale.category20();

  svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  // build the arrow.
  svg.append("svg:defs").selectAll("marker")
      .data(["mid"])      // Different link/path types can be defined here
    .enter().append("svg:marker")    // This section adds in the arrows
      .attr("id", String)
      .attr("viewBox", "0 0 10 10")
      .attr("refX", 1)
      .attr("refY", 5)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
    .append("svg:path")
      .attr("d", "M 0 0 L 10 5 L 0 10");

  // add the links and the arrows
  path = svg.append("svg:g").selectAll("path")
      .data(force.links())
    .enter().append("svg:path")
      .attr("class", "link")
      .attr("marker-mid", "url(#mid)");

  // define the nodes
  node = svg.selectAll(".node")
      .data(force.nodes())
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

  node.append("circle")
    .style("fill", function(d) { return color(d.sigCount); })
    .attr("r", function(d) { return circleScale(d.sigCount); });

  node.append("text")
    .attr("x", function (d) { return circleScale(d.sigCount) + 3; })
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });


	legend = svg.append("g")
	  .attr("class", "legend")
	  .attr("x", width - 65)
	  .attr("y", 25)
	  .attr("height", 100)
	  .attr("width", 100);

	legend.selectAll('g').data(Object.keys(officeColors))
      .enter()
      .append('g')
      .each(function(d, i) {
        var g = d3.select(this);
        g.append("circle")
          .attr("cx", 15)
          .attr("cy", i * 40 + 20)
          .attr("r", 15)
          .style("fill", officeColors[d]);

        g.append("text")
          .attr("class", "legend-label")
          .attr("x", 35)
          .attr("y", i * 40 + 25)
          .attr("height", 55)
          .attr("width", 100)
          .style("fill", '#000')
          .text(d);

      });

  svg.append("text")
		.attr("x", width / 2 )
        .attr("y", 30)
        .attr("class", "title")
        .style("text-anchor", "middle")
        .text("Philly Linux Key Signing Party 2007");

  function tick() {
      path.attr("d", function(d) {
          var dx = (d.target.x - d.source.x) / 1.5,
              dy = (d.target.y - d.source.y) / 1.5,
              dr = Math.sqrt(dx * dx + dy * dy),
              edge = d.target.x - 60;

          return "M" +
              d.source.x + "," +
              d.source.y + "A" +
              dr + "," + dr + " 0 0,1 " +
              d.target.x + "," +
              d.target.y;
      });

      node.attr("transform", function(d) {
{'fraction_non_alphanumeric': 0.19702769646476018, 'fraction_numerical': 0.03152443143436163, 'mean_word_length': 2.1612099644128113, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, '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': '1596941', 'n_tokens_mistral': 3460, 'n_tokens_neox': 3167, 'n_words': 683}