how to generate this plot in html

Question

I want to generate a figure like that given below. This fig mainly shows certain range locations along the length of a region .

The length of region is given in file1.txt as:

NP_123456.4: 110 
...

In one file, centain range for that region (file2.txt) is given as:

NP_123456.4: 30-45, 65-80
...
.

In another file (file3.txt), another region:

NP_123456.4: 35, 47-50, 58-59
....
..

Next file (file4.txt):

NP_123456.4: 38, 52, 69-88
..

As you see, each file has multiple ids (I omits them by ..) and for each id there will be a plot tike this. So there will be multiple plots in the output browsr.

I previously used gviz in R to plot them, but now, I need to do it in html. I never used this before and I appreciate any help in this regard.

Thanks

Answer 1

Using a suitable programming language that generates the HTML for you

You can generate an html output similar to the following approach:

.canvas {
  margin: 50px;
}
.region {
  position: relative;
  margin-top:  50px;
  margin-left: 50px;
  width: 400px;
  border: 1px solid black;
  height: 10px;
}
.region::before, .region::after {
  color: #00000;
  position: absolute;
  top: -5px;
  font-family: Arial;
  font-size: 1.2em;
 }
.region::before {
  content: "1";
  left: -20px;
}
.region::after {
  content: "110";
  left: 420px;
 }

.v-1, .v-2 {
  position: absolute;
  width:  60px;
  height: 40px;
  background-color: rgba(255, 0, 0, .8);
  margin-top: -20px;
}
.v-1 {
  margin-left: 120px;
}

.v-2 {
  margin-left: 260px;
}


.v-1 > div, .v-2 > div {
  position: relative;
  margin-top: -20px;
  widht: 100%;
  text-align: center;
  font-family: Arial;
  font-size: .9em;
 }

<div id="canvas">
  <div class="region">
    <div class="v-1"><div>30-45</div></div>
    <div class="v-2"><div>65-80</div></div>
  </div>
</div>

Using Javascript for read the file and draw the graph

Otherwise, if javascript is an option for you, you can create a simple html file with the following code for reading the file content:

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 

    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
	      var contents = e.target.result;
          alert(contents);  
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>

The contents variable will hold the text content of the picked file. You can extract the ranges or single values after the : using regular expressions with javascript. You can then use these values and take advantage of the new drawing features of html5 to produce the graph accordingly.

For regular expressions with javascript, there are a lot of guides as a result of a google search. For reading about the new canvas html5 element and how to draw with javascript I've found this canvas tutorial - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial - a good starting point.