サムネがコーヒーの記事は書きかけです。

【研究用スクリプト】塩基配列解析ツール

SHARE

Javascriptによって配列を解析するWebサイトの作成を行なったので、いつでもコピペで展開できるようにファイルを置いておきます。

HTML

<!DOCTYPE html>
<html lang="en"></html>
<head>
    <html lang="en">
    <meta charset="UTF-8">
    <title>Reverse comp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h1>Sequence gen 1.0</h1>
        <div class="nice-wrap">
        <input class="nice-textbox" type="text" id="newText" placeholder="Input Seq Raw">
        <button class="btn_1" id="changeButton">Generate</button>
        <br>
        <br><br>
        <div class="result"> Reverse Complement</div>
        <div class="target"></div>
        <br><br>
        <div class="result"> Transcribed</div>
        <div class="target1"></div>
        <br><br>
        <div class="result"> GC rate</div>
        <div class="target2"></div>
        <br><br>
        <div class="result"> Nucleotide counts</div>
        <div class="target3"></div>
        <br><br>
        <div class="result"> Translation</div>
        <div class="target4"></div>
        </div>
    </div>

<script src="script.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
  }
  
  html, body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: auto;
    width: auto;
    background-color: #1a0026;
    /* background: linear-gradient(-20deg, #8d027f 0%, #052968 100%); */
    font-family: "Arial", sans-serif;
    
  }
  
  .container h1 {
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 50px;
    padding-bottom: 10%;
  }
  
  .nice-wrap {
    position: relative;
    width: 500px;
    height: 100px;
    margin: 0 auto;
    
  }
  
  .nice-label {
    position: absolute;
    top: 15px;
    left: 10px;
    font-size: 16px;
    color: #a0a0a0;
    transition: all 0.25s ease;
  }
  .nice-label.focus {
    top: -25px;
    left: 5px;
    font-size: 14px;
    color: #fff;
  }
  
  .nice-textbox {
    position: relative;
    display: block;
    width: 500px;
    margin-top: 5px;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    color: #a0a0a0;
    outline: none;
  }

.target {
    border: 2px solid rgb(254, 254, 254);
    padding: 10px;
    border-radius: 10px; /* 角の丸みを指定 */
    color: #fff;
    overflow: auto;
  }
  
  .target1 {
    border: 2px solid rgb(254, 254, 254);
    padding: 10px;
    border-radius: 10px; /* 角の丸みを指定 */
    color: #fff;
    overflow: auto;
  }


    
  .target2 {
    border: 2px solid rgb(254, 254, 254);
    padding: 10px;
    border-radius: 10px; /* 角の丸みを指定 */
    color: #fff;
    overflow: auto;
  }
    
  .target3 {
    border: 2px solid rgb(254, 254, 254);
    padding: 10px;
    border-radius: 10px; /* 角の丸みを指定 */
    color: #fff;
    overflow: auto;
  }

  .target4 {
    border: 2px solid rgb(254, 254, 254);
    padding: 10px;
    border-radius: 10px; /* 角の丸みを指定 */
    color: #fff;
    overflow: auto;
  }

.result{
    color: #fff;
}





/* CSS */
.btn_1 {
  background-image: linear-gradient(#f7f8fa ,#e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  box-shadow: rgba(255,255,255,.6) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  font-family: "Amazon Ember",Arial,sans-serif;
  font-size: 14px;
  height: 29px;
  font-size: 13px;
  outline: 0;
  overflow: hidden;
  padding: 0 11px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;

}

.btn_1:active {
  border-bottom-color: #a2a6ac;
}

.btn_1:active:hover {
  border-bottom-color: #a2a6ac;
}

.btn_1:hover {
  border-color: #a2a6ac #979aa1 #82858a;
}

.btn_1:focus {
  border-color: #e77600;
  box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
  outline: 0;
}



/* 
  .textbox-001-label,
.textbox-001 {
    color: #333;
}

.textbox-001-label {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
}

.textbox-001 {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 1em;
    line-height: 1.5;
}

.textbox-001::placeholder {
    color: #999;
} */

JavaScript

function reverse_complement(seq){
    let dst = "";
    const map = new Map();
    var n = "";
    map.set('A','T');
    map.set('T','A');
    map.set('C','G');
    map.set('G','C');
    for (let i = seq.length-1;i>-1;i--){
        n = map.get(seq[i]);
        if (n != undefined){
            dst += n;
        }
    }
    return dst;
};

function sanitize(seq){
    let dst = "";
    const map = new Map();
    var n = "";
    map.set('A','T');
    map.set('T','A');
    map.set('C','G');
    map.set('G','C');
    for (let i = 0;i<seq.length;i++){
        n = map.get(seq[i]);
        if (n != undefined){
            dst += n;
        }
    }
    return dst;
}

function transcribe(seq){
    let dst = "";
    const map = new Map();
    var n = "";
    map.set('A','U');
    map.set('T','A');
    map.set('C','G');
    map.set('G','C');
    for (let i = 0;i<seq.length;i++){
        n = map.get(seq[i]);
        if (n != undefined){
            dst += n;
        }
    }
    return dst;
}

function calc_GCrate(seq){
    let gccount= 0;
    const map = new Map();
    map.set('A','U');
    map.set('T','A');
    map.set('C','G');
    map.set('G','C');
    let valid_length = 0;
    for (let i = 0;i<seq.length;i++){
        n = map.get(seq[i]);
        if (n != undefined){
            valid_length++;
            if (n == "G" || n == "C"){
                gccount ++;
                
            }
        }
    }
    return gccount/valid_length*100 + "%";
}

function count_nuc(seq){
    const map = new Map();
    map.set('A',0);
    map.set('T',0);
    map.set('C',0);
    map.set('G',0);
    var n = "";
    var validnum = 0;
    for (let i = 0;i<seq.length;i++){
        n = map.get(seq[i]);
        if (n != undefined){
            map.set(seq[i],n+1);
            validnum ++;
        }
    }
    return "[A: " + map.get("A") + ", C: " + map.get("C") + ", G: " + map.get("G") + ", T: " + map.get("T") + "]  Total: " + validnum;
}

function translate(s){
    let seq = sanitize(s)
    const DNA_Codons = {
        "GCT": "A", "GCC": "A", "GCA": "A", "GCG": "A",
        "TGT": "C", "TGC": "C",
        "GAT": "D", "GAC": "D",
        "GAA": "E", "GAG": "E",
        "TTT": "F", "TTC": "F",
        "GGT": "G", "GGC": "G", "GGA": "G", "GGG": "G",
        "CAT": "H", "CAC": "H",
        "ATA": "I", "ATT": "I", "ATC": "I",
        "AAA": "K", "AAG": "K",
        "TTA": "L", "TTG": "L", "CTT": "L", "CTC": "L", "CTA": "L", "CTG": "L",
        "ATG": "M",
        "AAT": "N", "AAC": "N",
        "CCT": "P", "CCC": "P", "CCA": "P", "CCG": "P",
        "CAA": "Q", "CAG": "Q",
        "CGT": "R", "CGC": "R", "CGA": "R", "CGG": "R", "AGA": "R", "AGG": "R",
        "TCT": "S", "TCC": "S", "TCA": "S", "TCG": "S", "AGT": "S", "AGC": "S",
        "ACT": "T", "ACC": "T", "ACA": "T", "ACG": "T",
        "GTT": "V", "GTC": "V", "GTA": "V", "GTG": "V",
        "TGG": "W",
        "TAT": "Y", "TAC": "Y",
        "TAA": "_", "TAG": "_", "TGA": "_"
    }
    const numCodons = (seq.length - seq.length%3)/3;
    let protein = "";
    for (let i = 0;i < numCodons;i ++){
        protein += DNA_Codons[seq[3*i] + seq[3*i+1] + seq[3*i+2]]
    }
    return protein;
}



const changeButton = document.getElementById("changeButton");

const targetElement = document.querySelector(".target");

const targetElement1 = document.querySelector(".target1");

const targetElement2 = document.querySelector(".target2");

const targetElement3 = document.querySelector(".target3");

const targetElement4 = document.querySelector(".target4");

changeButton.addEventListener("click", function() {
    const seq = document.getElementById("newText").value;
    targetElement.textContent =  reverse_complement(seq);
    targetElement1.textContent = transcribe(seq);
    targetElement2.textContent = calc_GCrate(seq);
    targetElement3.textContent = count_nuc(seq);
    targetElement4.textContent = translate(seq);

});

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

10秒に一回処理を行うスクリプト

次の記事

保護中: 集計表計算スクリプト