Commit bbce51ee authored by Nijveen, Harm's avatar Nijveen, Harm
Browse files

added a suggestions page with searches in the name and description fields for...

added a suggestions page with searches in the name and description fields for genes, and name and definition fields for GO terms§
parent 276f94f2
Pipeline #2057 skipped
......@@ -41,10 +41,10 @@ INSTALLED_APPS = (
'django.contrib.staticfiles',
'main',
'cistrans',
'multiexperimentplot',
'multiplot',
'coregulation',
'correlation',
'suggestions',
)
MIDDLEWARE_CLASSES = (
......
......@@ -23,6 +23,6 @@ urlpatterns = [
url(r'^cistrans/', include('cistrans.urls')),
url(r'^coregulation/', include('coregulation.urls')),
url(r'^correlation/', include('correlation.urls')),
url(r'^multiexperimentplot/', include('multiexperimentplot.urls')),
url(r'^multiplot/', include('multiplot.urls')),
url(r'^suggestions/', include('suggestions.urls')),
]
......@@ -4,50 +4,54 @@
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css" xmlns="http://www.w3.org/1999/html"/>
<link rel="stylesheet" href="{% static 'css/cistrans.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3.tip.old.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3-tip.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<style>
.delete_btn{
background:url("{% static 'cistrans/image/delete.png' %}");
background-color: transparent;
background-repeat: no-repeat;
border: none;
width:16px;
height: 16px;
<nav class="navbar navbar-nav navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-brand" href="/AraQTL">AraQTL</a></li>
<li><a href="{% static 'about.html' %}">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
<li><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">{{ experiment.experiment_name }}</a></li>
{% endfor %}
</ul>
</li>
<li><a href="/AraQTL/?mode=correlation">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation">Marker</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/multiplot/" method="get">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
placeholder="Search..." {% if query %} value="{{ query }}" {% endif %}>
<select title="Select an experiment" class="form-control" id="experiment_name"
name="experiment_name">
{% for experiment in experiments %}
<option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
{{ experiment.experiment_name }}
</option>
{% endfor %}
<option value="all" {% if experiment_name == "all" %} selected {% endif %}>all</option>
</select>
</form>
</ul>
</div>
</div>
</nav>
}
</style>
<script>
$(function(){
$(document).tooltip();
});
</script>
<div class="back2main" onclick="location.href='/AraQTL/';"> main menu </div>
<center><h3><i>cis</i> <i>trans</i> plot</h3>
<i>show a cistrans plot for the selected experiment</i>
</center>
{% if experiment_name %}
<div class="top"></div>
<div id = "searched_experiment">
You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{ thld}} {% else %} LOD threshold: {{ lodthld }} (default adjusted LOD threshold using FDR control at 0.05.){% endif %}
Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{ thld}} {% else %} {{ lodthld }} (default adjusted LOD threshold using FDR control at 0.05.){% endif %}
</div>
<form action="" method="get">
Experiment name:
<select id = "experiment_name" name = "experiment_name">
{% for experiment in experiments %}
<option value = "{{ experiment }}" {%if experiment == experiment_name %} selected {% endif %}>{{ experiment }}</option>
{% endfor %}
</select>
LOD threshold:<input type="text" id = "thld" title ="Using default adjusted LOD threshold using FDR control at 0.05 if leaving this field blank" name = "thld" placeholder ="Optional"/>
<input type="submit" id="cistrans_submit" class = "btn_analysis" value="QTL plot" />
</form>
<p id="loading">[Loading...]</p>
<div id = "container">
......@@ -270,22 +274,21 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
Zscale = d3.scale.linear().domain([-100, 100]).range([0, 1]);
//Marker-Probe (eQTL) tooltip/////////
eqtltip = d3.svg.tip().orient("right").padding(3).text(function(z) {
return "Transcript: " + z.transcript +" Marker: "+ z.marker + " LOD: " + (onedig(z.lod));
//return "Transcript: " + z.transcript +" Marker: "+ z.marker + " LOD: " + (onedig(z.lod)) +" chr"+z.lod_support_interval+"bp)";
}).attr("class", "d3-tip").attr("id", "eqtltip");
eqtltip = d3.tip().attr("class", "d3-tip")
.offset([-10, 0])
.html(function(z) {return "Gene: " + z.transcript +"<br>Marker: "+ z.marker + "<br>LOD: " + (onedig(z.lod));});
//end/////////////////////////////////
//MarkerCount tooltip/////////
markercounttip = d3.svg.tip().orient("right").padding(3).text(function(z) {
return " Marker: "+ z + " Peaks: " + markerSums[z];
}).attr("class", "d3-tip").attr("id", "markercounttip");
markercounttip = d3.tip().attr("class", "d3-tip")
.offset([-10, 0])
.html(function(z) { return " Marker: "+ z + "<br>Peaks: " + markerSums[z]; });
//end/////////////////////////////////
//marker tooltip//////////////////////
martip = d3.svg.tip().orient("right").padding(3).text(function(z) {
return z;
}).attr("class", "d3-tip").attr("id", "martip");
martip = d3.tip().attr("class", "d3-tip")
.offset([-10, 0])
.html(function(d) {return d;})
//end/////////////////////////////////
cur = 0;
......@@ -405,7 +408,9 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
//########################## end ############################
lastMarker = "";
svg.append("g").
svg.call(martip);
svg.append("g").
attr("id", "markerCircle").
attr("class", "probe_data").
selectAll("empty").
......@@ -423,10 +428,10 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
if (!markerClick[td]) {
d3.select(this).attr("opacity", 1);
}
return martip.call(this, td);
return martip.show(td);
}).on("mouseout", function(td) {
d3.select(this).attr("opacity", markerClick[td]);
return d3.selectAll("#martip").remove();
return martip.hide();
});
//end draw lower plot
};
......@@ -455,6 +460,7 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
}
}
svg.call(markercounttip);
markers = svg.append("g").attr("id", "peaks").selectAll("empty").data(data.markers).enter().append("line").attr("class", function(d) {
return "marker_" + d;
}).attr("x1", function(d) {
......@@ -471,13 +477,14 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
return 665;
}).attr("stroke-width", 3)
.attr("stroke", darkblue).on("mouseover", function(d) {
return markercounttip.call(this,d);
return markercounttip.show(d);
}).on("mouseout", function(d) {
return d3.selectAll("#markercounttip").remove();
return markercounttip.hide();
}).on("click", function(d) {
location.href="http://www.bioinformatics.nl/AraQTL/coregulation/?experiment_name={{ experiment_name }}&marker="+d+"&thld={{ lodthld }}";
});
svg.call(eqtltip);
peaks = svg.append("g").attr("id", "peaks").selectAll("empty").data(data.peaks).enter().append("circle").attr("class", function(d) {
return "probe_" + d.spot; //d--->data(data.peaks) iteration of all object in peaks.
}).attr("cx", function(d) {
......@@ -494,7 +501,7 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
return Zscale(d.lod);
}).on("mouseover", function(d) {
d3.selectAll("circle.probe_" + d.spot).attr("r", bigRad).attr("fill", pink).attr("stroke", darkblue).attr("stroke-width", 1).attr("opacity", 1);
return eqtltip.call(this, d);
return eqtltip.show(d);
}).on("mouseout", function(d) {
d3.selectAll("circle.probe_" + d.spot).attr("r", peakRad).attr("fill", function(d) {
if (d.lod > 0) {
......@@ -505,7 +512,7 @@ You selected Experiment: {{ experiment_name }}. LOD threshold: {% if thld %} {{
}).attr("stroke", "none").attr("opacity", function(d) {
return Zscale(d.lod);
});
return d3.selectAll("#eqtltip").remove();
return eqtltip.hide();
}).on("click", function(d) {
d3.json("../media/data/{{ experiment_name }}/probe/" + d.spot + ".json", draw_plot);
......
......@@ -16,30 +16,20 @@ def eQTLPlotView(request):
plot eQTL maping
'''
experiments = Experiment.objects.filter(species__species_name = "Arabidopsis thaliana").values_list('experiment_name',flat=True)
experiments = Experiment.objects.filter(species__species_name = "Arabidopsis thaliana")
if request.method=='GET':
if request.GET.get('experiment_name'):
exp_name = request.GET.get('experiment_name')
probe_out_path = os.path.join(settings.MEDIA_ROOT,'data','%s' % exp_name,'probe')
#if not os.path.exists(probe_out_path):
# try:
# os.makedirs(probe_out_path)
# except OSError as e:
# print e.errno
# outputJSON(lod_dic,probe_out_path)# write probe profile file in probe folder
if request.GET.get('thld'):
qtl_file = 'lod.txt'
#try:
thld = float(request.GET.get('thld'))
output = 'lod%s.json' % request.GET.get('thld').encode('ascii','ignore')
if not os.path.isfile(os.path.join(settings.MEDIA_ROOT,'data','%s' % exp_name,output)):
outputJson(exp_name,qtl_file,thld,output)
return render_to_response('eQTL.html',{'experiment_name':exp_name,
'experiments':experiments})
#except ValueError:
#return HttpResponse('<h1> invalid LOD threshold %s</h1>'%thld)
else:
lodthld = Experiment.objects.get(experiment_name = exp_name).lodthld
return render_to_response('eQTL.html',{'experiment_name': exp_name,
'experiments':experiments,
......
......@@ -21,8 +21,7 @@ def selectMarker(request):
'''
species_name = "Arabidopsis thaliana"
experiments = Experiment.objects.filter(species__species_name=species_name).values_list('experiment_name',
flat=True)
experiments = Experiment.objects.filter(species__species_name=species_name)
species_short_name = Species.objects.get(species_name=species_name).short_name
if request.method == 'GET':
......
......@@ -4,7 +4,8 @@
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css" xmlns="http://www.w3.org/1999/html"/>
<link rel="stylesheet" href="{% static 'css/multiexperimentplot.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/correlation.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
......@@ -12,11 +13,48 @@
<script src="http://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="{% static 'js/multiplot.js' %}"></script>
<div class="back2main" onclick="location.href='/AraQTL/';"> main menu </div>
<center>
<h3>Correlating eQTL profiles</h3>
<i>List genes that show correlation with the selected gene</i>
</center>
<nav class="navbar navbar-nav navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
<li><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">{{ experiment.experiment_name }}</a></li>
{% endfor %}
</ul>
</li>
<li class="active"><a href="/AraQTL/?mode=correlation">Correlation</a></li>
<li><a href="/AraQTL/?mode=coregulation">Marker</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/correlation/" method="get" id="top_form">
<input title="Type your query here" id="query" name="gene_id" type="text" class="form-control"
placeholder="Search..." {% if queryGene.id %} value="{{ queryGene.id }}" {% endif %}>
<input title="Correlation threshold" id="corrthld" name="corrthld" type="text" size="4" class="form-control"
placeholder="" {% if corrthld %} value="{{ corrthld }}" {% endif %}>
<select title="Select an experiment" class="form-control" id="experiment_selector" name="experiment_name">
{% for experiment in experiments %}
<option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
{{ experiment.experiment_name }}
</option>
{% endfor %}
</select>
</form>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="{% static 'about.html' %}">About</a></li>
<li><a href="{% static 'Manual.html' %}">Manual</a></li>
<li><a href="{% static 'FAQ.html' %}">FAQ</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
{% if experiment_name %}
<script>
var titletxt = "{{ queryGene.id }}{% if queryGene.name %}({{ queryGene.name }}){% endif %}";
......@@ -37,20 +75,6 @@ genes.push({ "gene": "{{ gene.gene_id }}",
"experiment" : "{{ experiment_name }}"});
{% endfor %}
</script>
<form action="" method="get">
Experiment:
<select id="experiment_name" name="experiment_name">
{% for experiment in experiments %}
<option value= "{{ experiment }}" {%if experiment == experiment_name %} selected {% endif %}>{{ experiment }}</option>
{% endfor %}
</select>
Gene :<input type="text" id="gene_id" title ="select a gene" name="gene_id" value ="{{ queryGene.id }}"/>
Correlation threshold:<input type="text" id="corrthld" title ="default correlation threshold is 0.9" name="corrthld" value="{{ corrthld }}"/>
<input type="submit" id="correlation_submit" class="btn_analysis" value="Show correlating genes" />
</form>
<div id ="multiplot"></div>
<div id="container" align="center">
<p>
......@@ -100,20 +124,15 @@ genes.push({ "gene": "{{ gene.gene_id }}",
readCheckboxes();
});
</script>
{% else %}
<form action="" method="get">
Experiment:<select id="experiment_name" name="experiment_name">
{% for experiment in experiments %}
<option value= "{{ experiment }}">{{ experiment }}</option>
{% endfor %}
</select>
Gene :<input type="text" id="gene_id" title ="select a gene" name="gene_id" value="AT1G35614"/>
Correlation threshold:<input type="text" id="corrthld" title ="default correlation threshold is 0.9" name="corrthld" placeholder="0.9"/>
<input type="submit" id="correlation_submit" class="btn_analysis" value="Show correlating genes" />
</form>
{% endif %}
<script>
$('select#experiment_selector').change(function() {
$('form#top_form').submit();
});
</script>
{% endblock %}
......
......@@ -25,13 +25,15 @@ def correlation(request):
'''
species_name = "Arabidopsis thaliana"
experiments = Experiment.objects.filter(species__species_name=species_name).values_list('experiment_name',
flat=True)
experiments = Experiment.objects.filter(species__species_name=species_name)
species_short_name = Species.objects.get(species_name=species_name).short_name
if request.method == 'GET':
if request.GET.get('experiment_name') and request.GET.get('gene_id'):
exp_name = request.GET.get('experiment_name')
if request.GET.get('gene_id'):
if request.GET.get('experiment_name'):
exp_name = request.GET.get('experiment_name')
else:
exp_name = experiments[0].experiment_name
gene_id = request.GET.get('gene_id')
geneInfoList = GeneInfo.objects.filter(gene_id = gene_id, species__species_name = species_name)
......
......@@ -7,62 +7,70 @@
<link rel="stylesheet" href="{% static 'css/main.css' %}" type="text/css" xmlns="http://www.w3.org/1999/html"/>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/multiplot.js' %}"></script>
<script>
var textAreaDefaultText = "Type your query, i.e. AT1G01150, or GO:0004674, or AT1G35614 AT1G21230";
</script>
<nav class="navbar navbar-nav navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<ul class="nav nav-pills">
<li><a class="navbar-brand" href="/AraQTL">AraQTL</a></li>
<li><a href="{% static 'about.html' %}">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Experiment
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
{% for experiment in experiments %}
<li><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">{{ experiment.experiment_name }}</a></li>
<li><a href="/AraQTL/cistrans/?experiment_name={{ experiment.experiment_name }}">
{{ experiment.experiment_name }}</a></li>
{% endfor %}
</ul>
</li>
<li><a href="/AraQTL/correlation/">Correlation</a></li>
<li><a href="/AraQTL/coregulation/">Marker</a></li>
<form class="navbar-form navbar-left" action="/AraQTL/multiplot/" method="get">
<input title="Type your query here" id="query" name="query" type="text" class="form-control"
placeholder="Search..." {% if query %} value="{{ query }}" {% endif %}>
<select title="Select an experiment" class="form-control" id="experiment_name"
name="experiment_name">
{% for experiment in experiments %}
<option value="{{ experiment.experiment_name }}" {% if experiment.experiment_name == experiment_name %} selected {% endif %}>
{{ experiment.experiment_name }}
</option>
{% endfor %}
<option value="all" {% if experiment_name == "all" %} selected {% endif %}>all</option>
</select>
</form>
<li
{% if mode == 'correlation' %} class="active"{% endif %}><a
href="/AraQTL/?mode=correlation">Correlation</a></li>
<li
{% if mode == 'coregulation' %} class="active"{% endif %}><a
href="/AraQTL/?mode=coregulation">Marker</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help
<span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="{% static 'about.html' %}">About</a></li>
<li><a href="{% static 'Manual.html' %}">Manual</a></li>
<li><a href="{% static 'FAQ.html' %}">FAQ</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="top">
</div>
<div id="queryBox">
<form action="/AraQTL/multiplot/" method="get">
<textarea rows=3 cols=30 id="queryArea" name="query" title="Type your query">Type your query, i.e. AT1G01150, or GO:0004674, or AT1G35614 AT1G21230</textarea>
<form method="get"
{% if mode == 'correlation' %}
action="/AraQTL/correlation/"
{% elif mode == 'coregulation' %}
action="/AraQTL/coregulation/"
{% else %}
action="/AraQTL/multiplot/"
{% endif %}>
{% if mode == "correlation" %}
<input type="text" name="gene_id" id="queryArea">&nbsp;cut-off:<input type="text" name="corrthld" id="threshold" value="0.9">
{% elif mode == "coregulation" %}
<input type="text" name="marker" id="queryArea">
{% else %}
<textarea rows=3 cols=30 id="queryArea" name="query" title="Type your query"></textarea>
{% endif %}
<br>
<input type="submit" id="multiplot_submit" class="btn_analysis" value="Query"/>
<br>
<table id="table">
<thead>
<tr>
<th></th>
<th>Experiment</th>
<th colspan=2>Choose an experiment:</th>
<th>Cross</th>
<th>Plant parts</th>
<th>Publication</th>
<th>Download</th>
</tr>
</thead>
<tbody>
......@@ -70,7 +78,7 @@
<tr>
<td>
<input type="radio"
name="experiment_radio"
name="experiment_name"
value="{{ experiment.experiment_name }}"
{% if forloop.counter == 1 %}checked{% endif %}
>
......@@ -89,32 +97,53 @@
{{ experiment.reference|truncatechars:60 }}
</a>
</td>
<td align="left">
<a href="/AraQTL/media/data/{{ experiment.experiment_name }}/lod.txt"
target="_blank"
>
lod.txt
</a>
</td>
</tr>
{% endfor %}
<tr><td><input type="radio" name="experiment_radio" value="all"></td><td colspan="5" align="left">All</td></tr>
{% if mode == "multiplot" %}
<tr><td><input type="radio" name="experiment_name" value="all"></td><td colspan="5" align="left">All (only for single gene IDs)</td></tr>
{% endif %}
</tbody>
</table>
</form>
</div>
<div onclick="location.href='/AraQTL/multiexperimentplot/';" class="first"><p>All eQTL patterns for a single
<div onclick="location.href='/AraQTL/multiplot/?query=AT1G21230&experiment_name=all';" class="first"><p>All eQTL patterns for a single
gene</p></div>
<div onclick="location.href='/AraQTL/cistrans/';" class="second"><p>Cis-trans plot per experiment</p></div>
<div onclick="location.href='/AraQTL/coregulation/';" class="third"><p>Genes peaking at a marker</p></div>
<div onclick="location.href='/AraQTL/correlation/';" class="fourth"><p>Correlated QTL patterns</p></div>
<div onclick="location.href='/AraQTL/cistrans/?experiment_name=Joosen_etal_2012';" class="second"><p>Cis-trans plot per experiment</p></div>
<div onclick="location.href='/AraQTL/coregulation/?marker=MSAT321&experiment_name=Joosen_etal_2012';" class="third"><p>Genes peaking at a marker</p></div>
<div onclick="location.href='/AraQTL/correlation/?gene_id=AT1G35614&corrthld=0.9&experiment_name=Joosen_etal_2012';" class="fourth"><p>Correlated QTL patterns</p></div>
</div>
<script>
$('textarea#queryArea').focus(function() {
var textAreaDefaultText = "Type your query, i.e. AT1G01150, or GO:0004674, or ERECTA";
$('#queryArea').focus(function() {
if ($(this).val() == textAreaDefaultText) {
$(this).css("color","black");
$(this).val("");
}
});
$('textarea#queryArea').blur(function() {
$('#queryArea').blur(function() {
if ($(this).val() == "") {
$(this).css("color","lightgrey");
$(this).val(textAreaDefaultText);
}
});
{% if mode == 'correlation' %}
textAreaDefaultText = "Input a TAIR ID to find correlating genes";
{% endif %}
{% if mode == 'coregulation' %}
textAreaDefaultText = "Input a marker to find genes that peak";
{% endif %}
$('#queryArea').val(textAreaDefaultText);
</script>
{% endblock %}
from django.shortcuts import render_to_response
from django.http import HttpResponse
from main.models import Experiment
def index(request):
experiments = Experiment.objects.filter(species__species_name = "Arabidopsis thaliana")
return render_to_response('index.html',{'experiments':experiments})
mode = 'multiplot'
if request.method == 'GET':
if request.GET.get('mode'):
mode = request.GET.get('mode');
return render_to_response('index.html',{'experiments':experiments,
'mode' :mode})
{% extends 'base.html' %}
{% block content %}
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/multiexperimentplot.css' %}" type="text/css"/>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3.tip.old.js' %}"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>
$(function(){