Render all tracks in Circster using track preferences.

This commit is contained in:
Jeremy Goecks
2012-07-12 13:21:16 -04:00
parent 1bc8dd1b6b
commit efc17f5f5f
3 changed files with 66 additions and 61 deletions
File diff suppressed because one or more lines are too long
+62 -57
View File
@@ -564,7 +564,7 @@ var GenomeWideSummaryData = Backbone.RelationalModel.extend({
if (!d || typeof d === 'string') { return 0; }
return d[1];
});
this.attributes.max = (max_data && typeof max_data !== 'string' ? max_data[1] : 0)
this.attributes.max = (max_data && typeof max_data !== 'string' ? max_data[1] : 0);
}
});
@@ -722,69 +722,74 @@ var CircsterView = Backbone.View.extend({
this.genome = options.genome;
this.radius_start = options.radius_start;
this.dataset_arc_height = options.dataset_arc_height;
this.track_gap = 5;
},
render: function() {
// -- Layout viz. --
var self = this,
dataset_arc_height = this.dataset_arc_height;
// FOR TESTING:
var dataset = this.model.get('tracks').at(0).get('genome_wide_data');
var radius_start = this.radius_start,
dataset_arc_height = this.dataset_arc_height,
// Set up SVG element.
var svg = d3.select(self.$el[0])
.append("svg")
.attr("width", self.width)
.attr("height", self.height)
.append("g")
.attr("transform", "translate(" + self.width / 2 + "," + self.height / 2 + ")");
// -- Render each dataset in the visualization. --
this.model.get('tracks').each(function(track, index) {
var dataset = track.get('genome_wide_data');
var radius_start = self.radius_start + index * (dataset_arc_height + self.track_gap),
// Layout chromosome arcs.
arcs_layout = new CircsterHistogramDatasetLayout({
genome: self.genome,
total_gap: self.total_gap
}),
chrom_arcs = arcs_layout.chroms_layout(),
// Merge chroms layout with data.
layout_and_data = _.zip(chrom_arcs, dataset.get('data')),
dataset_max = dataset.get('max'),
// Do dataset layout for each chromosome's data using pie layout.
chroms_data_layout = _.map(layout_and_data, function(chrom_info) {
var chrom_arc = chrom_info[0],
chrom_data = chrom_info[1];
return arcs_layout.chrom_data_layout(chrom_arc, chrom_data, radius_start, radius_start + dataset_arc_height, dataset_max);
});
// Layout chromosome arcs.
arcs_layout = new CircsterHistogramDatasetLayout({
genome: this.genome,
total_gap: this.total_gap
}),
chrom_arcs = arcs_layout.chroms_layout(),
// Merge chroms layout with data.
layout_and_data = _.zip(chrom_arcs, dataset.get('data')),
dataset_max = dataset.get('max'),
// Do dataset layout for each chromosome's data using pie layout.
chroms_data_layout = _.map(layout_and_data, function(chrom_info) {
var chrom_arc = chrom_info[0],
chrom_data = chrom_info[1];
return arcs_layout.chrom_data_layout(chrom_arc, chrom_data, radius_start, radius_start + dataset_arc_height, dataset_max);
});
// -- Render viz. --
var svg = d3.select(this.$el[0])
.append("svg")
.attr("width", this.width)
.attr("height", this.height)
.append("g")
.attr("transform", "translate(" + this.width / 2 + "," + this.height / 2 + ")");
// -- Render. --
// Draw background arcs for each chromosome.
var base_arc = svg.append("g").attr("id", "inner-arc"),
arc_gen = d3.svg.arc()
.innerRadius(radius_start)
.outerRadius(radius_start + dataset_arc_height),
// Draw arcs.
chroms_elts = base_arc.selectAll("#inner-arc>path")
.data(chrom_arcs).enter().append("path")
.attr("d", arc_gen)
.style("stroke", "#ccc")
.style("fill", "#ccc")
.append("title").text(function(d) { return d.data.chrom; });
// For each chromosome, draw dataset.
_.each(chroms_data_layout, function(chrom_layout) {
if (!chrom_layout) { return; }
var group = svg.append("g"),
arc_gen = d3.svg.arc().innerRadius(radius_start),
dataset_elts = group.selectAll("path")
.data(chrom_layout).enter().append("path")
// Draw background arcs for each chromosome.
var base_arc = svg.append("g").attr("id", "inner-arc"),
arc_gen = d3.svg.arc()
.innerRadius(radius_start)
.outerRadius(radius_start + dataset_arc_height),
// Draw arcs.
chroms_elts = base_arc.selectAll("#inner-arc>path")
.data(chrom_arcs).enter().append("path")
.attr("d", arc_gen)
.style("stroke", "red")
.style("fill", "red");
});
.style("stroke", "#ccc")
.style("fill", "#ccc")
.append("title").text(function(d) { return d.data.chrom; });
// For each chromosome, draw dataset.
var prefs = track.get('prefs'),
block_color = prefs.block_color;
_.each(chroms_data_layout, function(chrom_layout) {
if (!chrom_layout) { return; }
var group = svg.append("g"),
arc_gen = d3.svg.arc().innerRadius(radius_start),
dataset_elts = group.selectAll("path")
.data(chrom_layout).enter().append("path")
.attr("d", arc_gen)
.style("stroke", block_color)
.style("fill", block_color);
});
});
}
});
+3 -3
View File
@@ -70,11 +70,11 @@
width: 600,
height: 600,
// Gap is difficult to set because it very dependent on chromosome size and organization.
total_gap: 2 * Math.PI * 0.5,
total_gap: 2 * Math.PI * 0.2,
genome: genome,
model: visualization,
radius_start: 100,
dataset_arc_height: 50
dataset_arc_height: 15
});
// -- Render viz. --
@@ -88,7 +88,7 @@
<%def name="center_panel()">
<div class="unified-panel-header" unselectable="on">
<div class="unified-panel-header-inner">
<div style="float:left;" id="title"></div>
<div style="float:left;" id="title">${viz_config[ 'title' ]} (${viz_config[ 'dbkey' ]})</div>
</div>
<div style="clear: both"></div>
</div>