J.Carter J.Carter - 14 days ago 4
CSS Question

how to generate this plot in html

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
plot

Answer

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 options 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 page 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 ton of guides as result of a goggle search. For a 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.