how to get the webpage

[evolgenomology]

Dear Richard,

this looks fantastic. However, I am struggling to get my head around how to actually produce the page/ load the plots in my browser. I tried to have your code snippet

<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>

as an html file, but Firefox complains about the missing d3 object then. Tried to add it like so

<div id="assembly_stats">
<script src="js/d3.js"></script>
 <script>

but then Firefox says there is an illegal character in d3. This is all done on an iMac. Also tested Vivaldi (Chrome) and Safari, no luck there.

Thanks

Philipp

[rjchallis]

Hi Philipp

This is most likely happening because there are non-ASCII characters in d3.js. You'll need to specify the utf-8 character set or use the minified version of d3 so either <script charset="utf-8" src="d3.js"></script> or <script src="d3.min.js"></script> should work.

Hope this helps

Richard

[evolgenomology]

Hi Rich!

OK that worked. Also had to insert

<script charset="utf-8" src="js/d3.js"></script>
<script charset="utf-8" src="js/circle-plot.js"></script>
<script charset="utf-8" src="js/jquery.min.js"></script>
<script charset="utf-8" src="js/table.js"></script>
<script charset="utf-8" src="js/square-plot.js"></script>

However, there is still a problem. "d3.tip is not a function". Please see the pic attached.

Best

Philipp

[rjchallis]

d3.tip comes from an external library. I've pasted in a working set of includes below which should fix everything.

    <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>

[evolgenomology]

Wonderful! Thanks a lot for the quick help Richard. Greetings to Sujai and the team. ;-)

Cheers

Philipp