<commit_before>var input = [60, 30, 90, 20, 80, 70];

//Array size
var arrElementWidth = 50;
var arrElementHeight = 50;

var width = $('#graphics').width(),
    height = $('#graphics').height();

var barChart = d3.select(".drawingArea")
    .append("svg:svg")
    .attr("width", width + 200)
    .attr("height", height + 200)
    .append('g')
        .attr("id", "barChart");

barChart.attr("transform", "translate(" + (width/2 - input.length/2 * (arrElementWidth + 5)) + ",10)");

var rectPositions = [];
var textPositions = [];
var elementPositions = [];

resetPosition();
createArray(input);

//Panning
var pan = d3.zoom()
    .on("zoom", panning);

barChart.call(pan);

var codeDisplayManager = new CodeDisplayManager('javascript', 'mergeSort');

function createArray(data) {
    barChart.selectAll("*").remove();
    input = data;
    createRects(data.length, 0);
    createTexts(data);
}

function resetPosition() {
    textPositions = [];
    rectPositions[0] = [];
    elementPositions = [];
    for(var i = 0; i < input.length; i++) {
        rectPositions[0][i] = [i * (arrElementWidth + 5) + (arrElementWidth+5)/2, 30];
        elementPositions[i] = 0;
        textPositions.push([i * (arrElementWidth + 5) + arrElementWidth / 2 + 5, 30]);
    }
}

function createRects(length, y) {
    for(var i = 0; i < length; i++) {
        createRect(i * (arrElementWidth + 5), y, 1);
    }
}

function createRect(x, y, opacity) {
    barChart.insert("rect", ":first-child")
        .attr("x", x)
        .attr("y", y)
        .attr("height", arrElementHeight)
        .attr("width", arrElementWidth)
        .attr("fill", "red")
        .style("opacity", opacity)
        .attr("class", "level" + y/100)
        .attr("transform", "translate(0,0)");
}

function createTexts(data) {
    barChart.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function (d) { return d; })
        .attr("x", function (d, index) { return index * (arrElementWidth+5) + (arrElementWidth+5) / 2; })
        .attr("y", 30)
        .attr("text-anchor", "middle")
        .attr("width", arrElementWidth)
        .attr("transform", "translate(0,0)")
        .attr("class", function (d, i) { return "element" + i });
}

function panning() {
    barChart.attr("transform", d3.event.transform);
}

function sort() {
    $('#barChart').empty();
    resetPosition();
    createArray(input);
    codeDisplayManager.loadFunctions('mergeSort', 'merge');
    codeDisplayManager.changeFunction('mergeSort');
    var ms = new MergeSort(input.slice());
    ms.sort();<commit_msg>Changed color in mergesort visualization.<commit_after>var input = [60, 30, 90, 20, 80, 70];

//Array size
var arrElementWidth = 50;
var arrElementHeight = 50;

var width = $('#graphics').width(),
    height = $('#graphics').height();

var barChart = d3.select(".drawingArea")
    .append("svg:svg")
    .attr("width", width + 200)
    .attr("height", height + 200)
    .append('g')
        .attr("id", "barChart");

barChart.attr("transform", "translate(" + (width/2 - input.length/2 * (arrElementWidth + 5)) + ",10)");

var rectPositions = [];
var textPositions = [];
var elementPositions = [];

resetPosition();
createArray(input);

//Panning
var pan = d3.zoom()
    .on("zoom", panning);

barChart.call(pan);

var codeDisplayManager = new CodeDisplayManager('javascript', 'mergeSort');

function createArray(data) {
    barChart.selectAll("*").remove();
    input = data;
    createRects(data.length, 0);
    createTexts(data);
}

function resetPosition() {
    textPositions = [];
    rectPositions[0] = [];
    elementPositions = [];
    for(var i = 0; i < input.length; i++) {
        rectPositions[0][i] = [i * (arrElementWidth + 5) + (arrElementWidth+5)/2, 30];
        elementPositions[i] = 0;
        textPositions.push([i * (arrElementWidth + 5) + arrElementWidth / 2 + 5, 30]);
    }
}

function createRects(length, y) {
    for(var i = 0; i < length; i++) {
        createRect(i * (arrElementWidth + 5), y, 1);
    }
}

function createRect(x, y, opacity) {
    barChart.insert("rect", ":first-child")
        .attr("x", x)
        .attr("y", y)
        .attr("height", arrElementHeight)
        .attr("width", arrElementWidth)
        .attr("fill", "#F44336")
        .style("opacity", opacity)
        .attr("class", "level" + y/100)
        .attr("transform", "translate(0,0)");
}

function createTexts(data) {
    barChart.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function (d) { return d; })
        .attr("x", function (d, index) { return index * (arrElementWidth+5) + (arrElementWidth+5) / 2; })
        .attr("y", 30)
        .attr("text-anchor", "middle")
        .attr("width", arrElementWidth)
        .attr("transform", "translate(0,0)")
        .attr("class", function (d, i) { return "element" + i });
}

function panning() {
    barChart.attr("transform", d3.event.transform);
}

function sort() {
    $('#barChart').empty();
    resetPosition();
    createArray(input);
    codeDisplayManager.loadFunctions('mergeSort', 'merge');
    codeDisplayManager.changeFunction('mergeSort');
    var ms = new MergeSort(input.slice());
    ms.sort();
{'fraction_non_alphanumeric': 0.1901651940069151, 'fraction_numerical': 0.024010756819054936, 'mean_word_length': 3.1589456869009584, 'pattern_counts': {'":': 2, '<': 7, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '5439472', 'n_tokens_mistral': 1791, 'n_tokens_neox': 1708, 'n_words': 369}