<commit_before><!-- Most of the following code is the courtesy of http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="d3.v3.js"></script>
<body>
<script>

//Holder to store all nodes in given input file
var nodes = {};

//We will use this for scaling function - This is the maximum value given node could possibly expand
var maximumRadiusValue = 50;
var minimumRadiusValue = 3;
var color = d3.scale.category20();
var path;
var markerPath;
var node;

//Scale is used to downgrade given range of radius to desirable value
var radiusScale;
var inputFileName = "data/pagerankVisualizationOutput.csv";
var inputLinksFromFile = [];
var nodesCollection,linksCollection,force;

d3.csv(inputFileName, function(error, links) {
inputLinksFromFile = links;
drawGraphwithInputLinks(inputLinksFromFile);
});


function drawGraphwithInputLinks(links) {
    console.log("Total number of links "+links.length);
// Compute the Distinct nodes from the link
links.forEach(function(link) {
    link.source = nodes[link.source] || 
        (nodes[link.source] = {name: link.source,radiusValue: link.value});
    link.target = nodes[link.target] || 
        (nodes[link.target] = {name: link.target});
    link.value = +link.value;
    link.source.radiusValue = link.value;
});

//We don't want to expand nodes beyond certain acceptable range of radius
//Domain will include both negative and positive values

radiusScale = d3.scale.linear()
                .domain([d3.min(links, function(link) { return link.value; }), d3.max(links, function(link) { return link.value; })])
                .range([3, maximumRadiusValue]);

//Maximum dimension to fit animation in
var width  = 1500,
    height = 1000;

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

d3.select("body")
.append("p")
.style("width",width)
.attr("class","instructionsView");

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

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", -1.5)
    .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
linksCollection = force.links();
nodesCollection = force.nodes();

path = svg.append("svg:g").selectAll("path.link")
    .data(linksCollection)
    .enter().append("svg:path")
    .attr("class", "link");

//This code is added to make arrow heads appearing in the middle of curve connecting two nodes
markerPath = svg.append("svg:g").selectAll("path.marker")
    .data(linksCollection)
    .enter().append("svg:path")
    .attr("class", "marker_only")
    .attr("marker-end", "url(#end)");

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

//Add the nodes
node.append("circle")
    .attr("r", function(node){

        return getRadiusValueForNode(node);
        //console.log("Original Radius "+node.radiusValue + "Scaled Radius "+ radiusScale(node.radiusValue));
        
    })
    .style("fill",function(node, index){
       return color(index);
    });

    node.on("mousedown", function() { d3.event.stopPropagation(); })
    node.on("mouseover",function(d){

    //console.log(JSON.stringify(d));
    d3.select(this).classed("node-active", true);
    
    var radiusForCurrentNode = getRadiusValueForNode(d);
     d3.select(this).select("circle").transition()
                   .duration(750)
                   .attr("r", radiusForCurrentNode * 2);
    });

    node.on("mouseout",function(d){

    node.classed("node-active", false);
    
    var radiusForCurrentNode = getRadiusValueForNode(d);

    d3.select(this).select("circle").transition()
                   .duration(200)
                   .attr("r", radiusForCurrentNode);
    });

// add the text 
    node.append("svg:text")
    .attr("x", "-0.5em")
    .attr("y", function(d){
        if(typeof d.radiusValue === "undefined" || d.radiusValue == minimumRadiusValue) {
            return "-0.90em"
        }
        else{ 
            return "0.31em";
       }
    })
     .style("font-size", "14px")
    .text(function(d) { 
        return d.name; 
    });

    d3.select("body")
    .on("mousedown", mousedown);
}

function getRadiusValueForNode(node) {
    var radiusForCurrentNode = 0;

     if(typeof node.radiusValue !== "undefined") {
            radiusForCurrentNode = radiusScale(node.radiusValue);      
        }
        else{
            radiusForCurrentNode = radiusScale(0);
        }
        return radiusForCurrentNode;
}

function mousedown() {
    
    //Create a fancy event when mouse is clicked anywhere in 
    nodesCollection.forEach(function(node, index) {
        node.x += (Math.random() - 0.5) * 100;
        node.y += (Math.random() - 0.5) * 100;
    });
    force.resume();
}
<commit_msg>Added custome support to plot points based on number of input links<commit_after><!-- Most of the following code is the courtesy of http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html -->
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="d3.v3.js"></script>
<body>
<script>

//Holder to store all nodes in given input file
var nodes = {};

//We will use this for scaling function - This is the maximum value given node could possibly expand
var maximumRadiusValue = 50;
var minimumRadiusValue = 3;
var color = d3.scale.category20();
var path;
var markerPath;
var node;
var svg;
var numberOfNodesOptions = [];
var numberOfNodesToDisplay = 10;
//Maximum dimension to fit animation in
var width  = 1500, height = 500;

//Scale is used to downgrade given range of radius to desirable value
var radiusScale;
var inputFileName = "data/pagerankVisualizationOutput.csv";
var inputLinksFromFile = [];
var nodesCollection,linksCollection,force;

loadDefaultValuesInOptions();
configureOptionsAndInstructionsView();
loadAndDisplayPageRankNodesWithValue(numberOfNodesToDisplay);

function loadAndDisplayPageRankNodesWithValue(numberOfDisplayNodes) {

if(inputLinksFromFile.length == 0)
 {
    d3.csv(inputFileName, function(error, links) {
    inputLinksFromFile = links;
    //var maximumRangeInput = numberOfDisplayNodes;

    loadAllLinkValuesFromStoredArray(numberOfDisplayNodes);
});
} 
else {

loadAllLinkValuesFromStoredArray(numberOfDisplayNodes);
}

}

function loadAllLinkValuesFromStoredArray(numberOfLinksToDisplay) {
    console.log("Number Of Links to display "+numberOfLinksToDisplay);
if(numberOfLinksToDisplay > inputLinksFromFile.length) {
        numberOfLinksToDisplay = inputLinksFromFile.length;
    }
    console.log("Range is 0 to ", (numberOfLinksToDisplay));
    drawGraphwithInputLinks(inputLinksFromFile.slice(0,(numberOfLinksToDisplay)));
}   


function configureOptionsAndInstructionsView() {
    d3.select("body")
.append("p")
.style("width",width)
.attr("class","instructionsView")
.on("mousedown", function() { d3.event.stopPropagation(); });

//Append options which will allow users to choose total number of visible nodes on current view
var select  = d3.select("p").append("select")
                            .attr("class","selectOptionsBox")
                            .on("change", numberOfNodesOptionChanged);
var options = select.selectAll('option').data(numberOfNodesOptions); // Data join

// Enter selection
options.enter().append("option").text(function(numberOfNodesValue) { 
                                        return numberOfNodesValue; 
                                    });
                                
}

function numberOfNodesOptionChanged() {
    var selecteNumberOfNodesToDisplayValue = +(d3.select(this).property('value'));
    loadAndDisplayPageRankNodesWithValue(selecteNumberOfNodesToDisplayValue);
    
}

function drawGraphwithInputLinks(links) {
 //   console.log("Links data"+links);

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

//We don't want to expand nodes beyond certain acceptable range of radius
//Domain will include both negative and positive values

radiusScale = d3.scale.linear()
                .domain([d3.min(links, function(link) { return link.value; }), d3.max(links, function(link) { return link.value; })])
                .range([3, maximumRadiusValue]);



svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
svg.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", function(){
        return color(links.length % 20);
    });



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


// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", -1.5)
    .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
linksCollection = force.links();
nodesCollection = force.nodes();

path = svg.append("svg:g").selectAll("path.link")
    .data(linksCollection)
    .enter().append("svg:path")
    .attr("class", "link");

//This code is added to make arrow heads appearing in the middle of curve connecting two nodes
markerPath = svg.append("svg:g").selectAll("path.marker")
    .data(linksCollection)
    .enter().append("svg:path")
    .attr("class", "marker_only")
    .attr("marker-end", "url(#end)");

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

//Add the nodes
node.append("circle")
    .attr("r", function(node){

        return getRadiusValueForNode(node);
        //console.log("Original Radius "+node.radiusValue + "Scaled Radius "+ radiusScale(node.radiusValue));
        
    })
    .style("fill",function(node, index){
       return color(index);
    });

    node.on("mousedown", function() { d3.event.stopPropagation(); })
    node.on("mouseover",function(d){

    //console.log(JSON.stringify(d));
    d3.select(this).classed("node-active", true);
    
    var radiusForCurrentNode = getRadiusValueForNode(d);
     d3.select(this).select("circle").transition()
                   .duration(750)
                   .attr("r", radiusForCurrentNode * 2);
    });

    node.on("mouseout",function(d){

    node.classed("node-active", false);
    
    var radiusForCurrentNode = getRadiusValueForNode(d);

    d3.select(this).select("circle").transition()
                   .duration(200)
                   .attr("r", radiusForCurrentNode);
    });

// add the text 
    node.append("svg:text")
    .attr("x", "-0.5em")
    .attr("y", function(d){
        if(typeof d.radiusValue === "undefined" || d.radiusValue == minimumRadiusValue) {
            return "-0.90em"
        }
        else{ 
            return "0.31em";
       }
    })
     .style("font-size", "14px")
    .text(function(d) { 
        return d.name; 
    });

    d3.select("body")
    .on("mousedown", mousedown);
}

function loadDefaultValuesInOptions() {
    var tempNumberOfNodesToDisplay = numberOfNodesToDisplay;
    while(tempNumberOfNodesToDisplay <=100) {
        numberOfNodesOptions.push(tempNumberOfNodesToDisplay);
        tempNumberOfNodesToDisplay += 10;
    }
}

function getRadiusValueForNode(node) {
    var radiusForCurrentNode = 0;

     if(typeof node.radiusValue !== "undefined") {
            radiusForCurrentNode = radiusScale(node.radiusValue);      
        }
        else{
            radiusForCurrentNode = radiusScale(0);
        }
        return radiusForCurrentNode;
}

function mousedown() {
    
    //Create a fancy event when mouse is clicked anywhere in 
    nodesCollection.forEach(function(node, index) {
        node.x += (Math.random() - 0.5) * 100;
        node.y += (Math.random() - 0.5) * 100;
    });
    force.resume();
}

{'fraction_non_alphanumeric': 0.1538760594044009, 'fraction_numerical': 0.016017416997123085, 'mean_word_length': 3.166504697116942, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 20, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '883655', 'n_tokens_mistral': 4098, 'n_tokens_neox': 3918, 'n_words': 853}