diff options
Diffstat (limited to 'wqflask/wqflask/static/new/javascript/manhattan_plot.coffee')
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/manhattan_plot.coffee | 534 |
1 files changed, 534 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/new/javascript/manhattan_plot.coffee b/wqflask/wqflask/static/new/javascript/manhattan_plot.coffee new file mode 100644 index 00000000..492c2f3f --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/manhattan_plot.coffee @@ -0,0 +1,534 @@ +lodchart = () ->
+ width = 800
+ height = 500
+ margin = {left:60, top:40, right:40, bottom: 40, inner:5}
+ axispos = {xtitle:25, ytitle:30, xlabel:5, ylabel:5}
+ titlepos = 20
+ ylim = null
+ nyticks = 5
+ yticks = null
+ chrGap = 8
+ darkrect = "#F1F1F9"
+ lightrect = "#FBFBFF"
+ lodlinecolor = "darkslateblue"
+ linewidth = 2
+ pointcolor = "darkslateblue" # pink
+ pointhover = "#E9CFEC" # pink
+ pointsize = 2 # default = no visible points at markers
+ pointstroke = "black"
+ title = ""
+ xlab = "Chromosome"
+ ylab = "LOD score"
+ rotate_ylab = null
+ yscale = d3.scale.linear()
+ xscale = null
+ pad4heatmap = false
+ lodcurve = null
+ lodvarname = null
+ markerSelect = null
+ chrSelect = null
+ pointsAtMarkers = true
+
+ ## the main function
+ chart = (selection) ->
+ selection.each (data) ->
+
+ console.log("data:", data)
+
+ lodvarname = lodvarname ? data.lodnames[0]
+ data[lodvarname] = (Math.abs(x) for x in data[lodvarname]) # take absolute values
+ ylim = ylim ? [0, d3.max(data[lodvarname])]
+ lodvarnum = data.lodnames.indexOf(lodvarname)
+
+ # Select the svg element, if it exists.
+ svg = d3.select(this).selectAll("svg").data([data])
+
+ # Otherwise, create the skeletal chart.
+ gEnter = svg.enter().append("svg").append("g")
+
+ # Update the outer dimensions.
+ svg.attr("width", width+margin.left+margin.right)
+ .attr("height", height+margin.top+margin.bottom)
+
+ # Update the inner dimensions.
+ g = svg.select("g")
+
+ # box
+ g.append("rect")
+ .attr("x", margin.left)
+ .attr("y", margin.top)
+ .attr("height", height)
+ .attr("width", width)
+ .attr("fill", darkrect)
+ .attr("stroke", "none")
+
+ yscale.domain(ylim)
+ .range([height+margin.top, margin.top+margin.inner])
+
+ # if yticks not provided, use nyticks to choose pretty ones
+ yticks = yticks ? yscale.ticks(nyticks)
+
+ # reorganize lod,pos by chromosomes
+ data = reorgLodData(data, lodvarname)
+
+ # add chromosome scales (for x-axis)
+ data = chrscales(data, width, chrGap, margin.left, pad4heatmap)
+ xscale = data.xscale
+
+ # chr rectangles
+ chrSelect =
+ g.append("g").attr("class", "chrRect")
+ .selectAll("empty")
+ .data(data.chrnames)
+ .enter()
+ .append("rect")
+ .attr("id", (d) -> "chrrect#{d[0]}")
+ .attr("x", (d,i) ->
+ return data.chrStart[i] if i==0 and pad4heatmap
+ data.chrStart[i]-chrGap/2)
+ .attr("width", (d,i) ->
+ return data.chrEnd[i] - data.chrStart[i]+chrGap/2 if (i==0 or i+1 == data.chrnames.length) and pad4heatmap
+ data.chrEnd[i] - data.chrStart[i]+chrGap)
+ .attr("y", margin.top)
+ .attr("height", height)
+ .attr("fill", (d,i) ->
+ return darkrect if i % 2
+ lightrect)
+ .attr("stroke", "none")
+ .on("click", (d) ->
+ redraw_plot(d)
+ )
+
+ # x-axis labels
+ xaxis = g.append("g").attr("class", "x axis")
+ xaxis.selectAll("empty")
+ .data(data.chrnames)
+ .enter()
+ .append("text")
+ .attr("class", "chr_label")
+ .text((d) -> d[0])
+ .attr("x", (d,i) -> (data.chrStart[i]+data.chrEnd[i])/2)
+ .attr("y", margin.top+height+axispos.xlabel)
+ .attr("cursor", "pointer")
+ .on("click", (d) ->
+ redraw_plot(d)
+ )
+
+ xaxis.append("text").attr("class", "title")
+ .attr("y", margin.top+height+axispos.xtitle)
+ .attr("x", margin.left+width/2)
+ .text(xlab)
+
+ redraw_plot = (chr_ob) ->
+ console.log("chr_name is:", chr_ob[0])
+ console.log("chr_length is:", chr_ob[1])
+ $('#topchart').remove()
+ $('#chart_container').append('<div class="qtlcharts" id="topchart"></div>')
+ chr_plot = new Chr_Manhattan_Plot(600, 1200, chr_ob)
+
+
+ # y-axis
+ rotate_ylab = rotate_ylab ? (ylab.length > 1)
+ yaxis = g.append("g").attr("class", "y axis")
+ yaxis.selectAll("empty")
+ .data(yticks)
+ .enter()
+ .append("line")
+ .attr("y1", (d) -> yscale(d))
+ .attr("y2", (d) -> yscale(d))
+ .attr("x1", margin.left)
+ .attr("x2", margin.left+7)
+ .attr("fill", "none")
+ .attr("stroke", "white")
+ .attr("stroke-width", 1)
+ .style("pointer-events", "none")
+
+ yaxis.selectAll("empty")
+ .data(yticks)
+ .enter()
+ .append("text")
+ .attr("y", (d) -> yscale(d))
+ .attr("x", margin.left-axispos.ylabel)
+ .attr("fill", "blue")
+ .text((d) -> formatAxis(yticks)(d))
+
+ yaxis.append("text").attr("class", "title")
+ .attr("y", margin.top+height/2)
+ .attr("x", margin.left-axispos.ytitle)
+ .text(ylab)
+ .attr("transform", if rotate_ylab then "rotate(270,#{margin.left-axispos.ytitle},#{margin.top+height/2})" else "")
+
+ # lod curves by chr
+ #lodcurve = (chr, lodcolumn) ->
+ # d3.svg.line()
+ # .x((d) -> xscale[chr](d))
+ # .y((d,i) -> yscale(data.lodByChr[chr][i][lodcolumn]))
+
+ #add_plot_points: () ->
+ # @plot_point = @svg.selectAll("circle")
+ # .data(@plot_coordinates)
+ # .enter()
+ # .append("circle")
+ # .attr("cx", (d) =>
+ # return @x_scale(d[0])
+ # )
+ # .attr("cy", (d) =>
+ # return @y_scale(d[1])
+ # )
+ # .attr("r", (d) =>
+ # #if d[1] > 3
+ # # return 3
+ # #else
+ # return 2
+ # )
+ # .attr("fill", (d) =>
+ # #if d[1] > 3
+ # # return "white"
+ # #else
+ # return "black"
+ # )
+ # .attr("stroke", "black")
+ # .attr("stroke-width", "1")
+ # .attr("id", (d) =>
+ # return "point_" + String(d[2])
+ # )
+ # .classed("circle", true)
+ # .on("mouseover", (d) =>
+ # console.log("d3.event is:", d3.event)
+ # console.log("d is:", d)
+ # this_id = "point_" + String(d[2])
+ # d3.select("#" + this_id).classed("d3_highlight", true)
+ # .attr("r", 5)
+ # .attr("stroke", "none")
+ # .attr("fill", "blue")
+ # .call(@show_marker_in_table(d))
+ # )
+ # .on("mouseout", (d) =>
+ # this_id = "point_" + String(d[2])
+ # d3.select("#" + this_id).classed("d3_highlight", false)
+ # .attr("r", (d) =>
+ # #if d[1] > 2
+ # # return 3
+ # #else
+ # return 2
+ # )
+ # .attr("fill", (d) =>
+ # #if d[1] > 2
+ # # return "white"
+ # #else
+ # return "black"
+ # )
+ # .attr("stroke", "black")
+ # .attr("stroke-width", "1")
+ # )
+ # .append("svg:title")
+ # .text((d) =>
+ # return d[2]
+ # )
+
+ #curves = g.append("g").attr("id", "curves")
+
+ #for chr in data.chrnames
+ # curves.append("path")
+ # .datum(data.posByChr[chr])
+ # .attr("d", lodcurve(chr, lodvarnum))
+ # .attr("stroke", lodlinecolor)
+ # .attr("fill", "none")
+ # .attr("stroke-width", linewidth)
+ # .style("pointer-events", "none")
+
+ # points at markers
+ if pointsize > 0
+ markerpoints = g.append("g").attr("id", "markerpoints_visible")
+ markerpoints.selectAll("empty")
+ .data(data.markers)
+ .enter()
+ .append("circle")
+ .attr("cx", (d) -> xscale[d.chr](d.pos))
+ .attr("cy", (d) -> yscale(d.lod))
+ .attr("r", pointsize)
+ .attr("fill", pointcolor)
+ .attr("stroke", pointstroke)
+ .attr("pointer-events", "hidden")
+
+ # title
+ titlegrp = g.append("g").attr("class", "title")
+ .append("text")
+ .attr("x", margin.left+width/2)
+ .attr("y", margin.top-titlepos)
+ .text(title)
+
+ # another box around edge
+ g.append("rect")
+ .attr("x", margin.left)
+ .attr("y", margin.top)
+ .attr("height", height)
+ .attr("width", () ->
+ return(data.chrEnd[-1..][0]-margin.left) if pad4heatmap
+ data.chrEnd[-1..][0]-margin.left+chrGap/2)
+ .attr("fill", "none")
+ .attr("stroke", "black")
+ .attr("stroke-width", "none")
+
+ if pointsAtMarkers
+ # these hidden points are what gets selected...a bit larger
+ hiddenpoints = g.append("g").attr("id", "markerpoints_hidden")
+
+ markertip = d3.tip()
+ .attr('class', 'd3-tip')
+ .html((d) ->
+ [d.name, " LRS = #{d3.format('.2f')(d.lod)}"])
+ .direction("e")
+ .offset([0,10])
+ svg.call(markertip)
+
+ markerSelect =
+ hiddenpoints.selectAll("empty")
+ .data(data.markers)
+ .enter()
+ .append("circle")
+ .attr("cx", (d) -> xscale[d.chr](d.pos))
+ .attr("cy", (d) -> yscale(d.lod))
+ .attr("id", (d) -> d.name)
+ .attr("r", d3.max([pointsize*2, 3]))
+ .attr("opacity", 0)
+ .attr("fill", pointhover)
+ .attr("stroke", pointstroke)
+ .attr("stroke-width", "1")
+ .on "mouseover.paneltip", (d) ->
+ d3.select(this).attr("opacity", 1)
+ markertip.show(d)
+ .on "mouseout.paneltip", ->
+ d3.select(this).attr("opacity", 0)
+ .call(markertip.hide)
+
+ ## configuration parameters
+ chart.width = (value) ->
+ return width unless arguments.length
+ width = value
+ chart
+
+ chart.height = (value) ->
+ return height unless arguments.length
+ height = value
+ chart
+
+ chart.margin = (value) ->
+ return margin unless arguments.length
+ margin = value
+ chart
+
+ chart.titlepos = (value) ->
+ return titlepos unless arguments.length
+ titlepos
+ chart
+
+ chart.axispos = (value) ->
+ return axispos unless arguments.length
+ axispos = value
+ chart
+
+ chart.ylim = (value) ->
+ return ylim unless arguments.length
+ ylim = value
+ chart
+
+ chart.nyticks = (value) ->
+ return nyticks unless arguments.length
+ nyticks = value
+ chart
+
+ chart.yticks = (value) ->
+ return yticks unless arguments.length
+ yticks = value
+ chart
+
+ chart.chrGap = (value) ->
+ return chrGap unless arguments.length
+ chrGap = value
+ chart
+
+ chart.darkrect = (value) ->
+ return darkrect unless arguments.length
+ darkrect = value
+ chart
+
+ chart.lightrect = (value) ->
+ return lightrect unless arguments.length
+ lightrect = value
+ chart
+
+ chart.linecolor = (value) ->
+ return linecolor unless arguments.length
+ linecolor = value
+ chart
+
+ chart.linewidth = (value) ->
+ return linewidth unless arguments.length
+ linewidth = value
+ chart
+
+ chart.pointcolor = (value) ->
+ return pointcolor unless arguments.length
+ pointcolor = value
+ chart
+
+ chart.pointhover = (value) ->
+ return pointhover unless arguments.length
+ pointhover = value
+ chart
+
+ chart.pointsize = (value) ->
+ return pointsize unless arguments.length
+ pointsize = value
+ chart
+
+ chart.pointstroke = (value) ->
+ return pointstroke unless arguments.length
+ pointstroke = value
+ chart
+
+ chart.title = (value) ->
+ return title unless arguments.length
+ title = value
+ chart
+
+ chart.xlab = (value) ->
+ return xlab unless arguments.length
+ xlab = value
+ chart
+
+ chart.ylab = (value) ->
+ return ylab unless arguments.length
+ ylab = value
+ chart
+
+ chart.rotate_ylab = (value) ->
+ return rotate_ylab if !arguments.length
+ rotate_ylab = value
+ chart
+
+ chart.lodvarname = (value) ->
+ return lodvarname unless arguments.length
+ lodvarname = value
+ chart
+
+ chart.pad4heatmap = (value) ->
+ return pad4heatmap unless arguments.length
+ pad4heatmap = value
+ chart
+
+ chart.pointsAtMarkers = (value) ->
+ return pointsAtMarkers unless arguments.length
+ pointsAtMarkers = value
+ chart
+
+ chart.yscale = () ->
+ return yscale
+
+ chart.xscale = () ->
+ return xscale
+
+ #chart.lodcurve = () ->
+ # return lodcurve
+
+ chart.markerSelect = () ->
+ return markerSelect
+
+ chart.chrSelect = () ->
+ return chrSelect
+
+ # return the chart function
+ chart
+
+
+# reorganize lod/pos by chromosome
+# lodvarname==null -> case for multiple LOD columns (lodheatmap)
+# lodvarname provided -> case for one LOD column (lodchart)
+reorgLodData = (data, lodvarname=null) ->
+ data.posByChr = {}
+ data.lodByChr = {}
+
+ for chr,i in data.chrnames
+ data.posByChr[chr[0]] = []
+ data.lodByChr[chr[0]] = []
+ for pos, j in data.pos
+ if data.chr[j] == chr[0]
+ data.posByChr[chr[0]].push(pos)
+ data.lodnames = [data.lodnames] unless Array.isArray(data.lodnames)
+ lodval = (data[lodcolumn][j] for lodcolumn in data.lodnames)
+ data.lodByChr[chr[0]].push(lodval)
+
+
+ if lodvarname?
+ data.markers = []
+ for marker,i in data.markernames
+ if marker != ""
+ data.markers.push({name:marker, chr:data.chr[i], pos:data.pos[i], lod:data[lodvarname][i]})
+
+ data
+
+
+# calculate chromosome start/end + scales, for heat map
+chrscales = (data, width, chrGap, leftMargin, pad4heatmap) ->
+ # start and end of chromosome positions
+ chrStart = []
+ chrEnd = []
+ chrLength = []
+ totalChrLength = 0
+ maxd = 0
+ for chr in data.chrnames
+ d = maxdiff(data.posByChr[chr[0]])
+ maxd = d if d > maxd
+
+ rng = d3.extent(data.posByChr[chr[0]])
+ chrStart.push(rng[0])
+ chrEnd.push(rng[1])
+ L = rng[1] - rng[0]
+ chrLength.push(L)
+ totalChrLength += L
+
+ # adjust lengths for heatmap
+ if pad4heatmap
+ data.recwidth = maxd
+ chrStart = chrStart.map (x) -> x-maxd/2
+ chrEnd = chrEnd.map (x) -> x+maxd/2
+ chrLength = chrLength.map (x) -> x+maxd
+ totalChrLength += (chrLength.length*maxd)
+
+ # break up x axis into chromosomes by length, with gaps
+ data.chrStart = []
+ data.chrEnd = []
+ cur = leftMargin
+ cur += chrGap/2 unless pad4heatmap
+ data.xscale = {}
+ for chr,i in data.chrnames
+ data.chrStart.push(cur)
+ w = Math.round((width-chrGap*(data.chrnames.length-pad4heatmap))/totalChrLength*chrLength[i])
+ data.chrEnd.push(cur + w)
+ cur = data.chrEnd[i] + chrGap
+ # x-axis scales, by chromosome
+ data.xscale[chr[0]] = d3.scale.linear()
+ .domain([chrStart[i], chrEnd[i]])
+ .range([data.chrStart[i], data.chrEnd[i]])
+
+ # return data with new stuff added
+ data
+
+# maximum difference between adjacent values in a vector
+maxdiff = (x) ->
+ return null if x.length < 2
+ result = x[1] - x[0]
+ return result if x.length < 3
+ for i in [2...x.length]
+ d = x[i] - x[i-1]
+ result = d if d > result
+ result
+
+# determine rounding of axis labels
+formatAxis = (d) ->
+ d = d[1] - d[0]
+ ndig = Math.floor( Math.log(d % 10) / Math.log(10) )
+ ndig = 0 if ndig > 0
+ ndig = Math.abs(ndig)
+ d3.format(".#{ndig}f")
|