commit/galaxy-central: jgoecks: Circster: add support for drawing a generic quantitative track and draw summary tree data using a single path.
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/changeset/45f11c9b4aff/ changeset: 45f11c9b4aff user: jgoecks date: 2012-09-21 23:44:41 summary: Circster: add support for drawing a generic quantitative track and draw summary tree data using a single path. affected #: 1 file diff -r ae57c837ab039ded7f5056252c2e630988080faf -r 45f11c9b4affd9006f1f7159368567cd412d20b8 static/scripts/viz/circster.js --- a/static/scripts/viz/circster.js +++ b/static/scripts/viz/circster.js @@ -46,7 +46,7 @@ width = self.$el.width(), height = self.$el.height(), // Compute radius start based on model, will be centered - // and fit entirely inside element by default + // and fit entirely inside element by default. init_radius_start = ( Math.min(width, height)/2 - this.model.get('tracks').length * (this.dataset_arc_height + this.track_gap) ); @@ -67,7 +67,7 @@ return utils.is_visible(this, svg); }); visible_elts.each(function(d, i) { - console.log(this.attr('title')); + // TODO: redraw visible elements. }); })) .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") @@ -78,7 +78,9 @@ this.model.get('tracks').each(function(track, index) { var dataset = track.get('genome_wide_data'), radius_start = init_radius_start + index * (dataset_arc_height + self.track_gap), - track_renderer_class = (dataset instanceof visualization.GenomeWideBigWigData ? CircsterBigWigTrackRenderer : CircsterSummaryTreeTrackRenderer ); + track_renderer_class = (dataset instanceof visualization.GenomeWideBigWigData ? + CircsterBigWigTrackRenderer : + CircsterSummaryTreeTrackRenderer ); var track_renderer = new track_renderer_class({ track: track, @@ -105,12 +107,12 @@ var genome_arcs = this.chroms_layout(), radius_start = this.options.radius_start, radius_end = this.options.radius_end, - base_arc = svg.append("g").attr("id", "inner-arc"), + track_parent_elt = svg.append("g").attr("id", "inner-arc"), arc_gen = d3.svg.arc() .innerRadius(radius_start) .outerRadius(radius_end), // Draw arcs. - chroms_elts = base_arc.selectAll("#inner-arc>path") + chroms_elts = track_parent_elt.selectAll("#inner-arc>path") .data(genome_arcs).enter().append("path") .attr("d", arc_gen) .style("stroke", "#ccc") @@ -118,12 +120,13 @@ .append("title").text(function(d) { return d.data.chrom; }); // Render data. - this.render_data(svg); + this.render_data(track_parent_elt); + // Apply prefs. var prefs = this.options.track.get('prefs'), block_color = prefs.block_color; if (!block_color) { block_color = prefs.color; } - svg.selectAll('path.chrom-data').style('stroke', block_color).style('fill', block_color); + track_parent_elt.selectAll('path.chrom-data').style('stroke', block_color).style('fill', block_color); }, /** @@ -148,7 +151,7 @@ /** * Render chromosome data and attach elements to svg. */ - render_chrom_data: function(chrom_arc, chrom_data, inner_radius, outer_radius, max) { + render_chrom_data: function(svg, chrom_arc, data, inner_radius, outer_radius, max) { }, /** @@ -167,8 +170,8 @@ // 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 self.render_chrom_data(svg, chrom_arc, chrom_data, + data = chrom_info[1]; + return self.render_chrom_data(svg, chrom_arc, data, r_start, r_end, dataset.get('min'), dataset.get('max')); }); @@ -178,55 +181,15 @@ }); /** - * Layout for summary tree data in a circster visualization. + * Rendered for quantitative data. */ -var CircsterSummaryTreeTrackRenderer = CircsterTrackRenderer.extend({ - - /** - * Returns layouts for drawing a chromosome's data. - */ - render_chrom_data: function(svg, chrom_arc, chrom_data, inner_radius, outer_radius, min, max) { - // FIXME: draw as area: - /* - // If no chrom data, return null. - if (!chrom_data || typeof chrom_data === "string") { - return null; - } - - var data = chrom_data[0], - delta = chrom_data[3], - scale = d3.scale.linear() - .domain( [min, max] ) - .range( [inner_radius, outer_radius] ), - arc_layout = d3.layout.pie().value(function(d) { - return delta; - }) - .startAngle(chrom_arc.startAngle) - .endAngle(chrom_arc.endAngle), - arcs = arc_layout(data); - - // Use scale to assign outer radius. - _.each(data, function(datum, index) { - arcs[index].outerRadius = scale(datum[1]); - }); - - return arcs; - */ - } -}); - -/** - * Layout for BigWig data in a circster visualization. - */ -var CircsterBigWigTrackRenderer = CircsterTrackRenderer.extend({ +var CircsterQuantitativeTrackRenderer = CircsterTrackRenderer.extend({ /** - * Render chromosome data and attach elements to svg. + * Renders quantitative data with the form [x, value] and assumes data is equally spaced across + * chromosome. */ - render_chrom_data: function(svg, chrom_arc, chrom_data, inner_radius, outer_radius, min, max) { - var data = chrom_data.data; - if (data.length === 0) { return; } - + render_quantitative_data: function(svg, chrom_arc, data, inner_radius, outer_radius, min, max) { // Radius scaler. var radius = d3.scale.linear() .domain([min, max]) @@ -237,14 +200,8 @@ .domain([0, data.length]) .range([chrom_arc.startAngle, chrom_arc.endAngle]); - // FIXME: - // *area is not necessary as long as 0 is used as the inner radius. - // *could provide fill as an option. - - // Use both a line and area; area creates definition and line ensures that something is - // always drawn. var line = d3.svg.line.radial() - .interpolate("linear-closed") + .interpolate("linear") .radius(function(d) { return radius(d[1]); }) .angle(function(d, i) { return angle(i); }); @@ -260,12 +217,42 @@ parent.append("path") .attr("class", "chrom-data") .attr("d", area); - - parent.append("path") - .attr("class", "chrom-data") - .attr("d", line); } +}) + +/** + * Layout for summary tree data in a circster visualization. + */ +var CircsterSummaryTreeTrackRenderer = CircsterQuantitativeTrackRenderer.extend({ + + /** + * Renders a chromosome's data. + */ + render_chrom_data: function(svg, chrom_arc, chrom_data, inner_radius, outer_radius, min, max) { + // If no chrom data, return null. + if (!chrom_data || typeof chrom_data === "string") { + return null; + } + + return this.render_quantitative_data(svg, chrom_arc, chrom_data[0], inner_radius, outer_radius, min, max); + } +}); + +/** + * Layout for BigWig data in a circster visualization. + */ +var CircsterBigWigTrackRenderer = CircsterQuantitativeTrackRenderer.extend({ + + /** + * Renders a chromosome's data. + */ + render_chrom_data: function(svg, chrom_arc, chrom_data, inner_radius, outer_radius, min, max) { + var data = chrom_data.data; + if (data.length === 0) { return; } + + return this.render_quantitative_data(svg, chrom_arc, data, inner_radius, outer_radius, min, max); + } }); return { Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.
participants (1)
-
Bitbucket