<commit_before><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Customer Information</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
        <script data-main="lib/capital_one" src="lib/require-jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
        <style>
body {font-family: 'Helvetica', 'Arial'}
div {font-family: 'Arial', 'Courier New'}
#info-panel {
    margin-left:20px;
    margin-right:20px;
    margin-top:20px;
}
            .left {
                float: left;
            }
            .w50 {
                width: 50%;
            }
            svg {
                background: #f1f1f1;
            }
        </style>
    </head>
    <body>
        <div style="color:white;background-color:#07044F;">
            <br>
            <h1>Trying to get a Job</h1>
            <ul class="nav nav-tabs">
                <li><a href="./customer_UI.html">Customer</a></li>
                <li><a href="./account_UI.html">Account</a></li>
                <li class="active"><a href="#">Info</a></li>
                <li><a href="./purchase_UI.html">Purchases</a></li>

            </ul>
        </div>
        <div class="left w50">
            <div class="panel-group">
                <div class="panel panel-default" id="info-panel">
                    <!--Customers and their Account Information Dynamically Listed in Here-->
                </div>
            </div>
        </div>
        <div class="left w50" style="margin-top:20px;">
            <div id="chart"> </div>
        </div>



        <script type="text/javascript">
//TODO: Customers and accounts associated has to be dynmically rendered
//Look into ReactJS?
var id;
var acc;
var cust;
var apiKey = '<KEY>';
(function() {
    var width = 1000,
    height = 1000;

    var svg = d3.select("#chart")
        .append("svg")
        .attr("height", height)
        .attr("width", width)
        .append("g")
        .attr("transform", "translate(0,0)");
    //.attr("transform", "translate("+ width/2+","+height/2+")")
    var radiusScale = d3.scaleSqrt().domain([1, 500]).range([10, 80])

        var simulation = d3.forceSimulation()
        .force("x", d3.forceX(width/2).strength(0.05))
        .force("y", d3.forceY(height/2).strength(0.05))
        .force("collide", d3.forceCollide(function(d) {
            return radiusScale(d.frequency)
        })) 

    d3.queue()
        .defer(d3.csv, "test.csv")
        .await(ready)

        function ready (error, datapoints) {
            var circles = svg.selectAll(".merchant")
                .data(datapoints)
                .enter().append("circle")
                .attr("class", "merchant")
                .attr("r", function(d) {
                    return radiusScale(d.frequency)
                })
            .attr("fill", "lightblue")

                circles.append("text")
                .attr("x", 0)
                .attr("y", 0)
                .text("Hello")

                simulation.nodes(datapoints)
                .on('tick', ticked)

                function ticked() {
                    circles
                        .attr("cx", function(d) {
                            return d.x
                        })
                    .attr("cy", function(d) {
                        return d.y
                    })
                }
        }
})();
$(function() {
    require(['customer', 'account'], function (customer, account) {
        cust = customer.initWithKey(apiKey);
        acc = account.initWithKey(apiKey);
        update(cust, acc);
    });
});

/*
 * Updates the collapsable list 
 *
 */
function update(cust, acc) {

    var allCustomers = cust.getCustomers();
    for(var i=0; i<allCustomers.length; i++) {<commit_msg>Text not centered with circles<commit_after><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Customer Information</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
        <script data-main="lib/capital_one" src="lib/require-jquery.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
        <style>
body {font-family: 'Helvetica', 'Arial'}
div {font-family: 'Arial', 'Courier New'}
#info-panel {
    margin-left:20px;
    margin-right:20px;
    margin-top:20px;
}
            .left {
                float: left;
            }
            .w50 {
                width: 50%;
            }
            svg {
                background: #f1f1f1;
            }
        </style>
    </head>
    <body>
        <div style="color:white;background-color:#07044F;">
            <br>
            <h1>Trying to get a Job</h1>
            <ul class="nav nav-tabs">
                <li><a href="./customer_UI.html">Customer</a></li>
                <li><a href="./account_UI.html">Account</a></li>
                <li class="active"><a href="#">Info</a></li>
                <li><a href="./purchase_UI.html">Purchases</a></li>

            </ul>
        </div>
        <div class="left w50">
            <div class="panel-group">
                <div class="panel panel-default" id="info-panel">
                    <!--Customers and their Account Information Dynamically Listed in Here-->
                </div>
            </div>
        </div>
        <div class="left w50" style="margin-top:20px;">
            <div id="chart"> </div>
        </div>



        <script type="text/javascript">
//TODO: Customers and accounts associated has to be dynmically rendered
//Look into ReactJS?
var id;
var acc;
var cust;
var apiKey = '<KEY>';
(function() {
    var height = 500
    var width = 500
    var svg = d3.select("#chart")
        .append("svg")
        .attr("height", height)
        .attr("width", width)
        .append("g")
        .attr("transform", "translate(0,0)");
    //.attr("transform", "translate("+ width/2+","+height/2+")")
    var radiusScale = d3.scaleSqrt().domain([1, 500]).range([10, 80])

        var simulation = d3.forceSimulation()
        .force("x", d3.forceX(width/2).strength(0.05))
        .force("y", d3.forceY(height/2).strength(0.05))
        .force("collide", d3.forceCollide(function(d) {
            return radiusScale(d.frequency)
        })) 

    d3.queue()
        .defer(d3.csv, "test.csv")
        .await(ready)

        function ready (error, datapoints) {
            var node = svg.selectAll(".merchant")
                .data(datapoints)
                .enter().append("g")
                
            var circles = node.append("circle")
                .attr("class", "merchant")
                .attr("r", function(d) {
                    return radiusScale(d.frequency)
                })
            .attr("fill", "lightblue")

            var text = node.append("text")
                .attr("dx", function(d) {
                return d.x
                })
                .attr("dy", function(d) {
                    return d.y
                })
                .text(function(d) {
                    return d.merchant
                })

                simulation.nodes(datapoints)
                .on('tick', ticked)

                function ticked() {
                    circles
                        .attr("cx", function(d) {
                            return d.x
                        })
                    .attr("cy", function(d) {
                        return d.y
                    })
                }
        }
})();
$(function() {
    require(['customer', 'account'], function (customer, account) {
        cust = customer.initWithKey(apiKey);
        acc = account.initWithKey(apiKey);
        update(cust, acc);
    });
});

/*
 * Updates the collapsable list 
 *
 */
function update(cust, acc) {

    var allCustomers = cust.getCustomers();
    for(var i=0; i<allCustomers.length; i++) {
{'fraction_non_alphanumeric': 0.1635417926696504, 'fraction_numerical': 0.01814442966009435, 'mean_word_length': 1.6106725607830754, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 109, 'https://': 6, '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': '587189', 'n_tokens_mistral': 2645, 'n_tokens_neox': 2461, 'n_words': 464}