<commit_before><!DOCTYPE html>
<!-- based on http://bl.ocks.org/d3noob/5141528 -->
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>

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

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

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

</style>
<body>
<script>


// get the data
d3.json("cites.json", function(json) {

   // var nodes = {};

    // 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;
    //});

    var width = 600,
        height = 600;

    var force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .size([width, height])
        .linkDistance(60)
        .charge(-150)
        .on("tick", tick)
        .start();

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

    // build the arrow.
    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", 15)
        .attr("refY", -1.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5");

    // add the links and the arrows
    var path = svg.append("svg:g").selectAll("path")
        .data(force.links())
        .enter().append("svg:path")
        //    .attr("class", function(d) { return "link " + d.type; })
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

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

    // add the nodes
    node.append("circle")
        .attr("r", 5);

    // add the text 
    node.append("text")
        .attr("x", 12)
        .attr("dy", ".35em")
        .text(function(d) {
            return d.name;
        });

    // add the curvy lines
    function tick() {
        path.attr("d", function(d) {
            var dx = d.target.x - d.source.x,
                dy = d.target.y - d.source.y,
                dr = Math.sqrt(dx * dx + dy * dy);
            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) {
                return "translate(" + d.x + "," + d.y + ")";
            });
    }

    // action to take on mouse click
    function click() {
        d3.select(this).select("text").transition()
            .duration(750)
            .attr("x", 22)
            .style("fill", "steelblue")
            .style("stroke", "lightsteelblue")
            .style("stroke-width", ".5px")
            .style("font", "20px sans-serif");
        d3.select(this).select("circle").transition()
            .duration(750)
            .attr("r", 16)
            .style("fill", "lightsteelblue");
    }

    // action to take on mouse double click
    function dblclick() {
        d3.select(this).select("circle").transition()
            .duration(750)
            .attr("r", 6)
            .style("fill", "#ccc");
        d3.select(this).select("text").transition()
            .duration(750)
            .attr("x", 12)
            .style("stroke", "none")
            .style("fill", "black")
            .style("stroke", "none")
            .style("font", "10px sans-serif");
    }

});

</script>
</body>
</html><commit_msg>updated d3 cite network plot to include links, updated styling, made links fixed after drag<commit_after><!DOCTYPE html>
<!-- based on http://bl.ocks.org/d3noob/5141528 -->
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>

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

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

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

</style>
<body>
<script>


// get the data
d3.json("citetestdata.json", function(json) {

    var width = 600,
        height = 600;

    var force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .size([width, height])
        .linkDistance(60)
        .charge(-150)
        .on("tick", tick)
        .start();

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

    // build the arrow.
    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", 15)
        .attr("refY", -1.5)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5");

    // add the links and the arrows
    var path = svg.append("svg:g").selectAll("path")
        .data(force.links())
        .enter().append("svg:path")
        //    .attr("class", function(d) { return "link " + d.type; })
        .attr("class", "link")
        .attr("marker-end", "url(#end)");

    // make it so that nodes remain fixed after user drags them to new location
    var drag = force.drag()
        .on("dragstart", dragstart)
        .on("dragend", dragend);
    
    function dragstart(d) {
          d3.select(this).classed("fixed", d.fixed = true);
    }
    
    function dragend(d) {
          d3.select(this).classed("fixed", d.fixed = true);
    }
    
    // define the nodes
    var node = svg.selectAll(".node")
        .data(force.nodes())
        .enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .call(drag);

    // add the nodes
    node.append("circle")
        .attr("r", 5);

    // add the text 
    node.append("text")
        .attr("x", 12)
        .attr("dy", ".31em")
        .style("fill", "black")
        .style("opacity", .8)
        .text(function(d) {
            return d.name;
        });

    // add the curvy lines
    function tick() {
        path.attr("d", function(d) {
            var dx = d.target.x - d.source.x,
                dy = d.target.y - d.source.y,
                dr = Math.sqrt(dx * dx + dy * dy);
            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) {
                return "translate(" + d.x + "," + d.y + ")";
            });
    }

    //action to take on mouseover
    function mouseover() {
            d3.select(this).select("circle").transition()
                .duration(750)
                .attr("r", 9)
            d3.select(this).select("text").transition()
                .duration(750)
                .attr("dy", ".31em")
                .style("stroke-width", ".5px")
                .style("font", "20px serif")
                .style("fill", "#007BE6")
                .style("opacity", 1);
        }
    //action to take on mouseout
    function mouseout() {
            d3.select(this).select("circle").transition()
                .duration(750)
                .attr("r", 3.5)
            d3.select(this).select("text").transition()
                .duration(750)
                .attr("dy", ".31em")
                .style("font", "10px serif")
                .style("fill", "black")
                .style("opacity", .8);
        }
    
    
    // action to take on mouse click
    function click(d) {
        if (d3.event.defaultPrevented) return; // prevent following links when dragging
        window.location.href = "pmid?" + d.name;
        
    };

});

</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.1856742229492872, 'fraction_numerical': 0.023019397055386772, 'mean_word_length': 1.6254601226993866, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, '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': '3710542', 'n_tokens_mistral': 2931, 'n_tokens_neox': 2742, 'n_words': 582}