example/depth/index.template.html

<!DOCTYPE html>
<!-- vim: set ts=2 sw=2 ft=html foldmethod=indent: -->
<meta charset="utf-8">

<link rel="stylesheet" href="style.css?v=1.0">

<script src="d3.js"></script>
<script src="dnaism.v1.js"></script>

<body id="demo">

<script>
  var context = dnaism.context()
                 .start({{start}})
                 .stop({{stop}})
                 .size({{size}})
                 .chrm('{{chrm}}')
                 .step({{step}});

  d3.select("#demo").selectAll(".axis")
      .data(["top", "bottom"])
    .enter().append("div")
      .attr("class", function(d) { return d + " axis"; })
      .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });


  d3.select("body").append("div")
      .attr("class", "rule")
      .call(context.rule());

  var source_bedfile = context.bedfile();

  var metrics = [
      {%- for m in metrics %}
      source_bedfile.metric("{{m}}"),
      {%- endfor %}
  ];


  d3.select("body").selectAll(".horizon")
      .data(metrics)
    .enter().insert("div", ".bottom")
      .attr("class", "horizon")
    .call(context.horizon()
      .format(d3.format(".2")));

  context.on("focus", function(i) {
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});
</script>