CODEWITHSUNDEEP
javascripthtmlbrowser
Grendel
Grendel

Reputation: 597

Issue in my Javascript

I actually created a Javascript to get a plot of statistics of my assembled genome : here is the name of my Javascript: myscript.html

First, I had to convert my assembly.fa file in a JSON format object:

perl asm2stats.pl genome_assembly.fa > myoutput.json

Then, here is the usage gave in the github:

usage

The simplest plot requires a target div, an assembly span, a count of ACGT bases, the GC percentage and an array of scaffold lengths, however it is best to use the asm2stats.pl/asm2stats.minmaxgc.pl perl scripts described above to generate a richer, pre-processed input format. See the Danaus_plexippus_v3.assembly-stats.json file for a complete example using pre-binned data, basic usage is detailed below:

<div id="assembly_stats">
<script>
  d3.json("Danaus_plexippus_v3.assembly-stats.json", function(error, json) {
    if (error) return console.warn(error);
    asm = new Assembly (json);
    asm.drawPlot('assembly_stats');
  })
</script>

Then I wrote: 

<html>
<head>
    <title>assembly stats</title>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="css/circle-plot.css">
    <link rel="stylesheet" type="text/css" href="css/square-plot.css">
    <link rel="stylesheet" type="text/css" href="css/table.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script type="text/javascript" src="js/circle-plot.js"></script>
    <script type="text/javascript" src="js/square-plot.js"></script>
    <script type="text/javascript" src="js/table.js"></script>
    <div id="assembly_stats">
    <div class="my_class"></div>
    <script>
      d3.json("output_0035.json", function(error, json) {
        if (error) return console.warn(error);
        asm = new Assembly (json);
        asm.drawPlot('assembly_stats');
        asm.drawTable('my_class');
        asm.toggleVisible(['asm-longest_pie','asm-count']);

      })
    </script>

  </body>
</html>

and when I try to run it in my browser, I only get the circular plot, but I should also get a tabular representation as in the github exemple.

I'm not really familiar vith html code, does someone could tell me if I forgot somethingin the code to get this code? Here is the manual : github Thanks for your help :)

Upvotes: 1

Views: 98

Answers (1)

Der Alex
Der Alex

Reputation: 854

Add a div Element inside the body and give it a class attribute:

<div class="my-class-name"></div>

After

asm.drawPlot('assembly_stats');

create the table with 

asm.drawTable('my-class-name');

Upvotes: 2

Related Questions