<commit_before><!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
 
// set up window size
var width = window.innerWidth,
    height = window.innerHeight,

// set variables for proportional display
    smallDim = Math.min(width, height),
    radius = smallDim / 20,
    textHeight = radius * 1.5,
    sizeFactor = smallDim / 900,
// needs background and menus 

// ? separate data to 2nd file
// data and coords for 1-1 loop
    nullData11 = ["X", "X", "X", "X"],

    nullCoords11 = [
        [-80, -300],
        [80,  -300],
        [-80,  300],
        [80,   300]
    ],

    activeData11 = ["A", "U", "R", "G", "C", "Y"], 

    activeCoords11 = [
        [ -80, -140],
        [  80, -140],
        [-150,    0],
        [ 150,    0],
        [ -80,  140],
        [  80,  140]
    ],

// data and coords for 2-2 loop
    nullData22 = ["X", "X", "X", "X"],

    nullCoords22 = [
        [-80, -350],
        [ 80, -350],
        [-80,  350],
        [ 80,  330]
    ],

    activeData22 = ["A", "U", "R", "G", "C", "Y", "A", "N"], 

    activeCoords22 = [
        [ -80, -190],
        [  80, -190],
        [-190,  -80],
        [ 190,  -80],
        [-190,   80],
        [ 190,   80],
        [ -80,  190],
        [  80,  190]
    ], 
// hairpin needs work --- menu for # of bases and extras for 4 NT hairpins to
// access 6 relevant nts rather than 4
// data and coords for hairpin
    nullDataHP = ["X", "X"],

    nullCoordsHP = [
        [-80, -220],
        [ 80, -220]
    ],

    activeDataHP = ["A", "U", "R", "G", "C", "Y"], 

    activeCoordsHP = [
        [ -80, -60],
        [  80, -60],
        [-150,  80],
        [ 150,  80],
        [ -80, 220],
        [  80, 220]
    ],

// data and coords for bulge -- needs bulge size menu of one to six nts -- 
// rough coords only -- needs exact coords --
    nullDataBG = ["X", "X", "X", "X", "X"],

    nullCoordsBG = [
        [-80, -190],
        [ 80, -190],
        [135,   85],
        [-80,  350],
        [ 80,  350]
    ],

    activeDataBG = ["A", "U", "R", "G",], 

    activeCoordsBG = [
        [ -80,  -60],
        [  80,  -60],
        [ -135,  85],
        [    0, 190]
    ],

// data and coords for 1-2 loops 
// in progress -- not right -- needs exact coords --
    nullData12 = ["X", "X", "X", "X"],

    nullCoords12 = [
        [-80, -350],
        [ 80, -350],
        [-80,  350],
        [ 80,  350]
    ],

    activeData12 = ["A", "U", "R", "G", "Y", "C", "N"], 

    activeCoords12 = [
        [ -80,  -60],
        [  80,  -60],
        [ 135,   85],
        [   0, -190],
        [ 135,  -85],
        [-135,   85],
        [   0,  190]
    ];

// select the html body, add svg element to body, add group element to svg
var svg = d3.select("body")
	.append("svg")
    	.attr("width", width)
    	.attr("height", height)
	.append("g")

// put origin in center of window
    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// pass in array of nts, class text subpart, and 2D array of coords
// display them as dots per coordinates
function update(displayData, displayClass, displayCoords)  {
// change to use structure with
    var nucleoArray = [
        {key: "A", values: ["Adenine",    "yellow"]}, 
        {key: "U", values: ["Uracil",     "blue"]}, 
        {key: "G", values: ["Guanine",    "red"]}, 
        {key: "C", values: ["Cytosine",   "green"]}, 
        {key: "R", values: ["puRine",     "orange"]}, 
        {key: "Y", values: ["pYrimidine", "turquoise"]}, 
        {key: "N", values: ["unkNown",    "silver"]},
        {key: "X", values: ["X null",     "pink"]}
    ];
  
    // draw a dot for each value in displayData per coords in displayData
    var circles = svg.selectAll("." + displayClass + "Circle")// select all potential display circles
        .data(displayData) // attach displayData
        .enter()
        .append("circle") // add circles
        .attr("class", displayClass + "Circle") // set class so selectAll can find circles
        .attr("r", radius)
        .attr("cx", function(d, i) {return displayCoords[i][0] * sizeFactor})
        .attr("cy", function(d, i) {return displayCoords[i][1] * sizeFactor})
        .attr("fill", function(d, i) {
            var j = 0;
            for (j = 0; j < nucleoArray.length; j++) {
                if(nucleoArray[j].key == d) {
                    return nucleoArray[j].values[1];
                };
            };
            
        });
        // add gray outline on mouseover
    if (displayClass == "active") {
        circles.on("mouseover", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 4);})
        // remove gray outline when not mouseover
        .on("mouseout", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 0);});};
        // click to scroll through options
        //.on("click", //scroll)
        // ? add text to each dot 
        // ? add lines directly to dots or like text below

// text on circles takes mouseover focus away from circle
// needs fix  -- text mouseovers demonstrate this
    var text = svg.selectAll("." + displayClass + "Text") // select potential text of displayClass
        .data(displayData)
        .enter()
        .append("text") // add empty text elements
        .attr("class", displayClass + "Text") // set class so selectAll can find text elements 
        .text(function(d) {return d}) // add text from
        .attr("x", function(d, i) {return displayCoords[i][0] * sizeFactor}) // position
        .attr("y", function(d, i) {return displayCoords[i][1] * sizeFactor + textHeight / 2.5})
        .attr("text-anchor", "middle")
        .style("font-size", textHeight + "px"); // size 
// shows how text takes focus of mouseover from dots
// ? change select this to select corresponding dot
        // add gray outline on mouseover
    if (displayClass == "active") {  // only allow active nts to respond to mouse
        text.on("mouseover", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 4);})
        // remove gray outline when not mouseover
        .on("mouseout", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 0);})
        // on click
        .on("click", function(d, i) {
            var j = 0,
                clickedText = d3.select(this);
            // cycle thru nucleoArray by j, match key to d and change d to nucleoArray next value
            for (j = 0; j < nucleoArray.length; j++) {
                if (nucleoArray[j].key == d) {
                    clickedText.data(nucleoArray[(j + 1) % (nucleoArray.length - 1)].key)
                        .style("fill", nucleoArray[(j + 1) % (nucleoArray.length - 1)].values[1])
                        .text(function(d, k) {  // update text to new d
                            displayData[i] = d;  // update displayData to new d
                          //  circles[d].style("fill", "yellow");
                            return d;
                        });

                    

                };
            };

        });
    };
        // click to scroll through options
        //.on("click", //scroll)

    //needs a done button for ending function and retuning array
    return displayData;

}

// comment out all but one pair

update(nullData11, "null", nullCoords11);      // draws null NTs above and below 1-1 loop
activeData11 = update(activeData11, "active", activeCoords11);// draws circle of 6 NTs for 1-1 loop

//update(nullData22, "null", nullCoords22);      // draws null NTs above and below 2-2 loop
//activeData22 = update(activeData22, "active", activeCoords22);// draws circle of 8 NTs for 2-2 loop   

//update(nullDataHP, "null", nullCoordsHP);      // draws null NTs above hairpin
//activeDataHP = update(activeDataHP, "active", activeCoordsHP);// draws circle of 6 NTs for hairpin

//update(nullDataBG, "null", nullCoordsBG);// draws null NTs above and SW of bulge and 1 in circle
//activeDataBG = update(activeDataBG, "active", activeCoordsBG);// draws 4 NTs in circle of 5 NTs for bulge

// ----working but bad coords ----
//update(nullData12, "null", nullCoords12);// draws null NTs above and SW of 1-2 loop
//activeData12 = update(activeData12, "active", activeCoords12);// draws 7 NTs in circle for 1-2 loop

</script>
</body>
</html><commit_msg>Circle colors cycle but don't stay<commit_after><!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
 
// set up window size
var width = window.innerWidth,
    height = window.innerHeight,

// set variables for proportional display
    smallDim = Math.min(width, height),
    radius = smallDim / 20,
    textHeight = radius * 1.5,
    sizeFactor = smallDim / 900,
// needs background and menus 

// ? separate data to 2nd file
// data and coords for 1-1 loop
    nullData11 = ["X", "X", "X", "X"],

    nullCoords11 = [
        [-80, -300],
        [80,  -300],
        [-80,  300],
        [80,   300]
    ],

    activeData11 = ["A", "U", "R", "G", "C", "Y"], 

    activeCoords11 = [
        [ -80, -140],
        [  80, -140],
        [-150,    0],
        [ 150,    0],
        [ -80,  140],
        [  80,  140]
    ],

// data and coords for 2-2 loop
    nullData22 = ["X", "X", "X", "X"],

    nullCoords22 = [
        [-80, -350],
        [ 80, -350],
        [-80,  350],
        [ 80,  330]
    ],

    activeData22 = ["A", "U", "R", "G", "C", "Y", "A", "N"], 

    activeCoords22 = [
        [ -80, -190],
        [  80, -190],
        [-190,  -80],
        [ 190,  -80],
        [-190,   80],
        [ 190,   80],
        [ -80,  190],
        [  80,  190]
    ], 
// hairpin needs work --- menu for # of bases and extras for 4 NT hairpins to
// access 6 relevant nts rather than 4
// data and coords for hairpin
    nullDataHP = ["X", "X"],

    nullCoordsHP = [
        [-80, -220],
        [ 80, -220]
    ],

    activeDataHP = ["A", "U", "R", "G", "C", "Y"], 

    activeCoordsHP = [
        [ -80, -60],
        [  80, -60],
        [-150,  80],
        [ 150,  80],
        [ -80, 220],
        [  80, 220]
    ],

// data and coords for bulge -- needs bulge size menu of one to six nts -- 
// rough coords only -- needs exact coords --
    nullDataBG = ["X", "X", "X", "X", "X"],

    nullCoordsBG = [
        [-80, -190],
        [ 80, -190],
        [135,   85],
        [-80,  350],
        [ 80,  350]
    ],

    activeDataBG = ["A", "U", "R", "G",], 

    activeCoordsBG = [
        [ -80,  -60],
        [  80,  -60],
        [ -135,  85],
        [    0, 190]
    ],

// data and coords for 1-2 loops 
// in progress -- not right -- needs exact coords --
    nullData12 = ["X", "X", "X", "X"],

    nullCoords12 = [
        [-80, -350],
        [ 80, -350],
        [-80,  350],
        [ 80,  350]
    ],

    activeData12 = ["A", "U", "R", "G", "Y", "C", "N"], 

    activeCoords12 = [
        [ -80,  -60],
        [  80,  -60],
        [ 135,   85],
        [   0, -190],
        [ 135,  -85],
        [-135,   85],
        [   0,  190]
    ];

// select the html body, add svg element to body, add group element to svg
var svg = d3.select("body")
	.append("svg")
    	.attr("width", width)
    	.attr("height", height)
	.append("g")

// put origin in center of window
    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// pass in array of nts, class text subpart, and 2D array of coords
// display them as dots per coordinates
function update(displayData, displayClass, displayCoords)  {
// change to use structure with
    var nucleoArray = [
        {key: "A", values: ["Adenine",    "yellow"]}, 
        {key: "U", values: ["Uracil",     "blue"]}, 
        {key: "G", values: ["Guanine",    "red"]}, 
        {key: "C", values: ["Cytosine",   "green"]}, 
        {key: "R", values: ["puRine",     "orange"]}, 
        {key: "Y", values: ["pYrimidine", "turquoise"]}, 
        {key: "N", values: ["unkNown",    "silver"]},
        {key: "X", values: ["X null",     "pink"]}
    ];
  
    // draw a dot for each value in displayData per coords in displayData
    var circles = svg.selectAll("." + displayClass + "Circle")// select all potential display circles
        .data(displayData) // attach displayData
        .enter()
        .append("circle") // add circles
        .attr("class", displayClass + "Circle") // set class so selectAll can find circles
        .attr("index", function(d, i) {return i})
        .attr("r", radius)
        .attr("cx", function(d, i) {return displayCoords[i][0] * sizeFactor})
        .attr("cy", function(d, i) {return displayCoords[i][1] * sizeFactor})
        .attr("fill", function(d, i) {
            var j = 0;
            for (j = 0; j < nucleoArray.length; j++) {
                if(nucleoArray[j].key == d) {
                    return nucleoArray[j].values[1];
                };
            };
            
        })
        .append("text").text(function(d, i) {return i});
        // add gray outline on mouseover
    if (displayClass == "active") {
        circles.on("mouseover", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 4);})
        // remove gray outline when not mouseover
        .on("mouseout", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 0);});};
        // click to scroll through options
        //.on("click", //scroll)
        // ? add text to each dot 
        // ? add lines directly to dots or like text below

// text on circles takes mouseover focus away from circle
// needs fix  -- text mouseovers demonstrate this
    var text = svg.selectAll("." + displayClass + "Text") // select potential text of displayClass
        .data(displayData)
        .enter()
        .append("text") // add empty text elements
        .attr("class", displayClass + "Text") // set class so selectAll can find text elements 
        .text(function(d) {return d}) // add text from
        .attr("x", function(d, i) {return displayCoords[i][0] * sizeFactor}) // position
        .attr("y", function(d, i) {return displayCoords[i][1] * sizeFactor + textHeight / 2.5})
        .attr("text-anchor", "middle")
        .style("font-size", textHeight + "px"); // size 
// shows how text takes focus of mouseover from dots
// ? change select this to select corresponding dot
        // add gray outline on mouseover
    if (displayClass == "active") {  // only allow active nts to respond to mouse
        text.on("mouseover", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 4);})
        // remove gray outline when not mouseover
        .on("mouseout", function(){d3.select(this)
            .style("stroke", "gray")
            .style("stroke-width", 0);})
        // on click
        .on("click", function(d, i) {
            var j = 0,
                clickedText = d3.select(this);
            // cycle thru nucleoArray by j, match key to d and change d to nucleoArray next value
            for (j = 0; j < nucleoArray.length; j++) {
                if (nucleoArray[j].key == d) {
                    clickedText.data(nucleoArray[(j + 1) % (nucleoArray.length - 1)].key)
                      //  .style("fill", nucleoArray[(j + 1) % (nucleoArray.length - 1)].values[1])
                        .text(function(d, k) {  // update text to new d
                            displayData[i] = d;  // update displayData to new d
                            d3.selectAll("." + displayClass + "Circle")
                                .style("fill", function(e, l) {if (l == i) {
                                    var m = 0;
                                    for (var m = 0; m < nucleoArray.length; m++) {
                                         if (nucleoArray[m].key == d) {
                                            return nucleoArray[m].values[1];
                                         };
                                     }; 
                                };});


                            return d;
                        });

                    

                };
            };

        });
    };
        // click to scroll through options
        //.on("click", //scroll)

    //needs a done button for ending function and returning array
    return displayData;

}

// comment out all but one pair

update(nullData11, "null", nullCoords11);      // draws null NTs above and below 1-1 loop
activeData11 = update(activeData11, "active", activeCoords11);// draws circle of 6 NTs for 1-1 loop

//update(nullData22, "null", nullCoords22);      // draws null NTs above and below 2-2 loop
//activeData22 = update(activeData22, "active", activeCoords22);// draws circle of 8 NTs for 2-2 loop   

//update(nullDataHP, "null", nullCoordsHP);      // draws null NTs above hairpin
//activeDataHP = update(activeDataHP, "active", activeCoordsHP);// draws circle of 6 NTs for hairpin

//update(nullDataBG, "null", nullCoordsBG);// draws null NTs above and SW of bulge and 1 in circle
//activeDataBG = update(activeDataBG, "active", activeCoordsBG);// draws 4 NTs in circle of 5 NTs for bulge

// ----not working and bad coords ---- 
//update(nullData12, "null", nullCoords12);// draws null NTs above and SW of 1-2 loop
//activeData12 = update(activeData12, "active", activeCoords12);// draws 7 NTs in circle for 1-2 loop

</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.16581342434584756, 'fraction_numerical': 0.04141069397042093, 'mean_word_length': 1.7870957514267596, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 9, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1496069', 'n_tokens_mistral': 6154, 'n_tokens_neox': 5532, 'n_words': 1716}