Skip to content

Commit 09f3e41

Browse files
jcha40jcha40
committed
Split composite polygon and color line into top and bottom
1 parent 80b03e6 commit 09f3e41

1 file changed

Lines changed: 102 additions & 56 deletions

File tree

‎js/widgets/main_plot.js‎

Lines changed: 102 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -155,13 +155,6 @@ $(function() {
155155
let composite = this._elements.composite_group.insert("g", "g.composite")
156156
.classed("composite", true);
157157

158-
composite.append("defs")
159-
.append("linearGradient")
160-
.attr("id", "composite-gradient-" + this._elements.composites.length)
161-
.classed("composite-gradient", true)
162-
.attr("x1", "0%")
163-
.attr("x2", "0%");
164-
165158
composite.append("path")
166159
.classed("white-line", true)
167160
.attr("fill", "none")
@@ -179,15 +172,45 @@ $(function() {
179172
.style("display", this.color_trace ? "none" : null);
180173

181174
composite.append("path")
182-
.classed("color-line", true)
175+
.classed("color-line-top", true)
183176
.attr("fill", "none")
184177
.attr("stroke-width", 1)
185178
.attr("d", "")
186179
.style("display", this.color_trace ? null : "none");
187180

181+
composite.append("path")
182+
.classed("color-line-bottom", true)
183+
.attr("fill", "none")
184+
.attr("stroke-width", 1)
185+
.attr("d", "")
186+
.style("display", this.color_trace ? null : "none");
187+
188+
composite.append("defs")
189+
.append("linearGradient")
190+
.attr("id", "composite-gradient-top-" + this._elements.composites.length)
191+
.classed("composite-gradient-top", true)
192+
.attr("x1", "0%")
193+
.attr("x2", "0%")
194+
.attr("y1", "0%")
195+
.attr("y2", "100%");
196+
197+
composite.append("defs")
198+
.append("linearGradient")
199+
.attr("id", "composite-gradient-bottom-" + this._elements.composites.length)
200+
.classed("composite-gradient-bottom", true)
201+
.attr("x1", "0%")
202+
.attr("x2", "0%")
203+
.attr("y1", "100%")
204+
.attr("y2", "0%");
205+
188206
composite.append("polygon")
189-
.classed("composite-fill", true)
190-
.attr("fill", "url(#composite-gradient-" + this._elements.composites.length + ")")
207+
.classed("composite-fill-top", true)
208+
.attr("fill", "url(#composite-gradient-top-" + this._elements.composites.length + ")")
209+
.attr("stroke", "none");
210+
211+
composite.append("polygon")
212+
.classed("composite-fill-bottom", true)
213+
.attr("fill", "url(#composite-gradient-bottom-" + this._elements.composites.length + ")")
191214
.attr("stroke", "none");
192215

193216
this._elements.composites.push(composite);
@@ -236,7 +259,7 @@ $(function() {
236259

237260
composite.selectAll("path")
238261
.attr("d", "");
239-
composite.select("polygon")
262+
composite.selectAll("polygon")
240263
.attr("points", "");
241264

242265
this.change_name(i, "Composite " + i);
@@ -266,9 +289,7 @@ $(function() {
266289
scaled_occupancy = smoothed_occupancy.filter((_, j) => new_xdomain[j] >= this.xmin && new_xdomain[j] <= this.xmax)
267290
.map(d => d * scale);
268291

269-
composite.select(".composite-gradient")
270-
.attr("y1", "0%")
271-
.attr("y2", "100%")
292+
composite.select(".composite-gradient-top")
272293
.selectAll("stop")
273294
.data([0, 1])
274295
.join("stop")
@@ -293,7 +314,7 @@ $(function() {
293314
.y((_, j) => this.yscale(scaled_occupancy[j]))
294315
);
295316

296-
composite.select(".color-line")
317+
composite.select(".color-line-top")
297318
.attr("stroke", color)
298319
.style("display", null)
299320
.datum(truncated_xdomain)
@@ -302,7 +323,7 @@ $(function() {
302323
.y((_, j) => this.yscale(scaled_occupancy[j]))
303324
)
304325
} else {
305-
composite.select(".color-line")
326+
composite.select(".color-line-top")
306327
.attr("stroke", color)
307328
.style("display", "none")
308329
.datum(truncated_xdomain)
@@ -326,9 +347,9 @@ $(function() {
326347
.x(d => this.xscale(d))
327348
.y((_, j) => this.yscale(scaled_occupancy[j]))
328349
)
329-
}
350+
};
330351

331-
composite.select(".composite-fill")
352+
composite.select(".composite-fill-top")
332353
.attr("points", truncated_xdomain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_occupancy[j])).join(" ") + " "
333354
+ this.xscale(truncated_xdomain[truncated_xdomain.length - 1]) + "," + this.yscale(0) + " "
334355
+ this.xscale(truncated_xdomain[0]) + "," + this.yscale(0))
@@ -346,20 +367,20 @@ $(function() {
346367
&& new_xdomain[j] - bp_shift <= this.xmax).map(d => d * scale);
347368

348369
secondary_color = secondary_color || color;
349-
composite.select(".composite-gradient")
350-
.attr("y1", (ymax - antimax) / (2 * ymax))
351-
.attr("y2", (ymax + sensemax) / (2 * ymax))
370+
composite.select(".composite-gradient-top")
352371
.selectAll("stop")
353-
.data([
354-
{offset: 0, color: color, opacity: opacity},
355-
{offset: .5, color: color, opacity: 0},
356-
{offset: .5, color: "#FFFFFF", opacity: 0},
357-
{offset: .5, color: secondary_color, opacity: 0},
358-
{offset: 1, color: secondary_color, opacity: opacity}])
372+
.data([0, 1])
373+
.join("stop")
374+
.attr("offset", d => d)
375+
.attr("stop-color", color)
376+
.attr("stop-opacity", d => (1 - d) * opacity);
377+
composite.select(".composite-gradient-bottom")
378+
.selectAll("stop")
379+
.data([0, 1])
359380
.join("stop")
360-
.attr("offset", d => d.offset)
361-
.attr("stop-color", d => d.color)
362-
.attr("stop-opacity", d => d.opacity);
381+
.attr("offset", d => d)
382+
.attr("stop-color", secondary_color)
383+
.attr("stop-opacity", d => (1 - d) * opacity);
363384

364385
if (this.color_trace) {
365386
composite.select(".white-line")
@@ -372,17 +393,26 @@ $(function() {
372393
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
373394
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
374395

375-
composite.select(".color-line")
396+
composite.select(".color-line-top")
376397
.attr("stroke", color)
377398
.style("display", null)
378399
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
379-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
400+
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
401+
402+
composite.select(".color-line-bottom")
403+
.attr("stroke", secondary_color)
404+
.style("display", null)
405+
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
380406
} else {
381-
composite.select(".color-line")
407+
composite.select(".color-line-top")
382408
.attr("stroke", color)
383409
.style("display", "none")
384-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
385-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
410+
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L"));
411+
412+
composite.select(".color-line-bottom")
413+
.attr("stroke", secondary_color)
414+
.style("display", "none")
415+
.attr("d", "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
386416

387417
composite.select(".white-line")
388418
.style("display", null)
@@ -395,13 +425,14 @@ $(function() {
395425
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
396426
};
397427

398-
composite.select(".composite-fill")
399-
.attr("points", this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0) + " "
400-
+ truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ") + " "
401-
+ this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0) + " "
402-
+ this.xscale(truncated_anti_domain[truncated_anti_domain.length - 1]) + "," + this.yscale(0) + " "
403-
+ truncated_anti_domain.map((d, j) => this.xscale(d) + "," + this.yscale(-scaled_anti[j])).reverse().join(" ") + " "
404-
+ this.xscale(truncated_anti_domain[0]) + "," + this.yscale(0))
428+
composite.select(".composite-fill-top")
429+
.attr("points", truncated_sense_domain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_sense[j])).join(" ")
430+
+ " " + this.xscale(truncated_sense_domain[truncated_sense_domain.length - 1]) + "," + this.yscale(0)
431+
+ " " + this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0));
432+
composite.select(".composite-fill-bottom")
433+
.attr("points", truncated_anti_domain.map((d, j) => this.xscale(d) + "," + this.yscale(-scaled_anti[j])).join(" ")
434+
+ " " + this.xscale(truncated_anti_domain[truncated_anti_domain.length - 1]) + "," + this.yscale(0)
435+
+ " " + this.xscale(truncated_anti_domain[0]) + "," + this.yscale(0))
405436
}
406437
},
407438

@@ -477,26 +508,30 @@ $(function() {
477508

478509
change_color: function(i, color, sense_only=false) {
479510
let composite = this._elements.composites[i];
480-
if (this.combined || !sense_only) {
481-
composite.select(".composite-gradient")
511+
composite.select(".composite-gradient-top")
512+
.selectAll("stop")
513+
.attr("stop-color", color);
514+
composite.select(".color-line-top")
515+
.attr("stroke", color);
516+
this._elements.legend_items[i].selectAll("polygon")
517+
.attr("fill", color);
518+
519+
if (!sense_only) {
520+
composite.select(".composite-gradient-bottom")
482521
.selectAll("stop")
483522
.attr("stop-color", color);
484-
this._elements.legend_items[i].selectAll("polygon")
485-
.attr("fill", color)
486-
} else {
487-
composite.select(".composite-gradient")
488-
.selectAll("stop")
489-
.each(function(d, i) {if (i < 2) {d3.select(this).attr("stop-color", color)}});
490-
this._elements.legend_items[i].select("polygon.legend-color-sense")
491-
.attr("fill", color)
523+
composite.select(".color-line-bottom")
524+
.attr("stroke", color);
492525
}
493526
},
494527

495528
change_secondary_color: function(i, color) {
496529
let composite = this._elements.composites[i];
497-
composite.select(".composite-gradient")
530+
composite.select(".composite-gradient-bottom")
498531
.selectAll("stop")
499-
.each(function(d, i) {if (i > 2) {d3.select(this).attr("stop-color", color)}});
532+
.attr("stop-color", color);
533+
composite.select(".color-line-bottom")
534+
.attr("stroke", color);
500535
this._elements.legend_items[i].select("polygon.legend-color-anti")
501536
.attr("fill", color)
502537
},
@@ -565,6 +600,13 @@ $(function() {
565600
this._elements.midaxis_top.style("display", combine ? "none" : null);
566601
this._elements.midaxis_bottom.style("display", combine ? "none" : null);
567602

603+
this._elements.composites.forEach(function(comp) {
604+
comp.select(".color-line-bottom")
605+
.style("display", combine ? "none" : null);
606+
comp.select(".composite-fill-bottom")
607+
.style("display", combine ? "none" : null)
608+
})
609+
568610
if (plot) {
569611
this.scale_axes(undefined, undefined, undefined, true, true);
570612

@@ -576,14 +618,18 @@ $(function() {
576618
this.color_trace = color_trace;
577619

578620
if (color_trace) {
579-
this._elements.composite_group.selectAll(".composite .color-line")
621+
this._elements.composite_group.selectAll(".composite .color-line-top")
622+
.style("display", null);
623+
this._elements.composite_group.selectAll(".composite .color-line-bottom")
580624
.style("display", null);
581625
this._elements.composite_group.selectAll(".composite .white-line")
582626
.style("display", "none");
583627
this._elements.composite_group.selectAll(".composite .black-line")
584628
.style("display", "none")
585629
} else {
586-
this._elements.composite_group.selectAll(".composite .color-line")
630+
this._elements.composite_group.selectAll(".composite .color-line-top")
631+
.style("display", "none");
632+
this._elements.composite_group.selectAll(".composite .color-line-bottom")
587633
.style("display", "none");
588634
this._elements.composite_group.selectAll(".composite .white-line")
589635
.style("display", null);

0 commit comments

Comments
 (0)