<commit_before><!DOCTYPE html>
<meta charset="utf-8"/>
<style>

    .links line {
        stroke: #999;
        stroke-opacity: 0.6;
    }

    .nodes circle {
        stroke: #fff;
        stroke-width: 1px;
    }

    text {
        font: 10px sans-serif;
        pointer-events: none;
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }

</style>
<svg width="1900" height="800"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>

  // socket.io tests
  var socket = io.connect('http://localhost:8084')

  socket.on('message', function(message) {
    //console.log(message)
    var jsonEntry = message.graph
    d3.selectAll("svg > *").remove()
    // removes previous graph instance on each message
    executeD3graph(jsonEntry)
  })

  //socket.io tests ending...

  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")

  var color = d3.scaleOrdinal(d3.schemeCategory10);

  var simulation = d3.forceSimulation().velocityDecay(0.08)
    .force("link",
      d3.forceLink().id(function(d) { return d._id }).distance(40).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))

  function executeD3graph(graph) {

    // arrow ir self
    svg.append("svg:defs").selectAll("marker")
      .data(["end"])      // Different link/path types can be defined here
      .enter().append("svg:marker")    // This section adds in the arrows
      .attr("id", String)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 25)
      .attr("refY", 0)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
      .append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");

    //checks if output is from a junction or join and append a variable to
    // that for color definition
    for (var obj in graph.vertices) {
      // checks if vertex is coming from a junction or a task
      // if object comes from a task it will have an access for output
      // otherwise it will have more objects inside each one with its own output<commit_msg>added some edits to d3 visualization<commit_after><!DOCTYPE html>
<meta charset="utf-8"/>
<style>

    .links line {
        stroke: #999;
        stroke-opacity: 0.6;
    }

    .nodes circle {
        stroke: #fff;
        stroke-width: 1px;
    }

    text {
        font: 10px sans-serif;
        pointer-events: none;
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }

    html,
    body {
        height: 100%;
        width: 100%;
    }

</style>
<body>
<svg width="1920" height="920"></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>

  // socket.io tests
  var socket = io.connect('http://localhost:8084')

  socket.on('message', function(message) {
    //console.log(message)
    var jsonEntry = message.graph
    d3.selectAll("svg > *").remove()
    // removes previous graph instance on each message
    executeD3graph(jsonEntry)
  })

  //socket.io tests ending...

  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height")

  var color = d3.scaleOrdinal(d3.schemeCategory10);

  var simulation = d3.forceSimulation().velocityDecay(0.2)
    .force("link",
      d3.forceLink().id(function(d) { return d._id }).distance(40).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))

  function executeD3graph(graph) {

    // arrow ir self
    svg.append("svg:defs").selectAll("marker")
      .data(["end"])      // Different link/path types can be defined here
      .enter().append("svg:marker")    // This section adds in the arrows
      .attr("id", String)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 25)
      .attr("refY", 0)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
      .append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");

    //checks if output is from a junction or join and append a variable to
    // that for color definition
    for (var obj in graph.vertices) {
      // checks if vertex is coming from a junction or a task
      // if object comes from a task it will have an access for output
      // otherwise it will have more objects inside each one with its own output
{'fraction_non_alphanumeric': 0.15893741557856822, 'fraction_numerical': 0.034218820351193155, 'mean_word_length': 2.5658105939004816, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 2, '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': '5061903', 'n_tokens_mistral': 1576, 'n_tokens_neox': 1444, 'n_words': 410}