Skip to content

Commit 000cba7

Browse files
jcha40jcha40
committed
Added color trace to global settings
1 parent 16ae38f commit 000cba7

3 files changed

Lines changed: 128 additions & 23 deletions

File tree

‎index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@ <h4>Composite metadata</h4>
130130
<input id="separate-color-checkbox" type="checkbox">
131131
<script src="js/events/separate_color_checkbox.js"></script>
132132
</div>
133+
<div>
134+
<label for="color-trace-checkbox">Color trace</label>
135+
<input id="color-trace-checkbox" type="checkbox">
136+
<script src="js/events/color_trace_checkbox.js"></script>
137+
</div>
133138
<div>
134139
<input type="button" id="download-svg-button" value="Download as SVG">
135140
<script src="js/events/download_svg_button.js"></script>

‎js/events/color_trace_checkbox.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
$(function() {
2+
d3.select("#color-trace-checkbox").on("change", function() {
3+
$("#main-plot").main_plot("toggle_color_trace", this.checked)
4+
})
5+
})

‎js/widgets/main_plot.js‎

Lines changed: 118 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ $(function() {
1616
smoothing: 7,
1717
bp_shift: 0,
1818
combined: false,
19+
color_trace: false,
1920
locked: false,
2021

2122
_elements: {
@@ -166,14 +167,23 @@ $(function() {
166167
.attr("fill", "none")
167168
.attr("stroke", "#FFFFFF")
168169
.attr("stroke-width", 1)
169-
.attr("d", "");
170+
.attr("d", "")
171+
.style("display", this.color_trace ? "none" : null);
170172

171173
composite.append("path")
172-
.classed("composite-line", true)
174+
.classed("black-line", true)
173175
.attr("fill", "none")
174176
.attr("stroke", "#000000")
175177
.attr("stroke-width", 0.5)
176-
.attr("d", "");
178+
.attr("d", "")
179+
.style("display", this.color_trace ? "none" : null);
180+
181+
composite.append("path")
182+
.classed("color-line", true)
183+
.attr("fill", "none")
184+
.attr("stroke-width", 1)
185+
.attr("d", "")
186+
.style("display", this.color_trace ? null : "none");
177187

178188
composite.append("polygon")
179189
.classed("composite-fill", true)
@@ -266,19 +276,57 @@ $(function() {
266276
.attr("stop-color", color)
267277
.attr("stop-opacity", d => (1 - d) * opacity);
268278

269-
composite.select(".white-line")
270-
.datum(truncated_xdomain)
271-
.attr("d", d3.line()
272-
.x(d => this.xscale(d))
273-
.y((_, j) => this.yscale(scaled_occupancy[j]))
274-
);
275-
276-
composite.select(".composite-line")
277-
.datum(truncated_xdomain)
278-
.attr("d", d3.line()
279-
.x(d => this.xscale(d))
280-
.y((_, j) => this.yscale(scaled_occupancy[j]))
281-
);
279+
if (this.color_trace) {
280+
composite.select(".white-line")
281+
.style("display", "none")
282+
.datum(truncated_xdomain)
283+
.attr("d", d3.line()
284+
.x(d => this.xscale(d))
285+
.y((_, j) => this.yscale(scaled_occupancy[j]))
286+
);
287+
288+
composite.select(".black-line")
289+
.style("display", "none")
290+
.datum(truncated_xdomain)
291+
.attr("d", d3.line()
292+
.x(d => this.xscale(d))
293+
.y((_, j) => this.yscale(scaled_occupancy[j]))
294+
);
295+
296+
composite.select(".color-line")
297+
.attr("stroke", color)
298+
.style("display", null)
299+
.datum(truncated_xdomain)
300+
.attr("d", d3.line()
301+
.x(d => this.xscale(d))
302+
.y((_, j) => this.yscale(scaled_occupancy[j]))
303+
)
304+
} else {
305+
composite.select(".color-line")
306+
.attr("stroke", color)
307+
.style("display", "none")
308+
.datum(truncated_xdomain)
309+
.attr("d", d3.line()
310+
.x(d => this.xscale(d))
311+
.y((_, j) => this.yscale(scaled_occupancy[j]))
312+
);
313+
314+
composite.select(".white-line")
315+
.style("display", null)
316+
.datum(truncated_xdomain)
317+
.attr("d", d3.line()
318+
.x(d => this.xscale(d))
319+
.y((_, j) => this.yscale(scaled_occupancy[j]))
320+
);
321+
322+
composite.select(".black-line")
323+
.style("display", null)
324+
.datum(truncated_xdomain)
325+
.attr("d", d3.line()
326+
.x(d => this.xscale(d))
327+
.y((_, j) => this.yscale(scaled_occupancy[j]))
328+
)
329+
}
282330

283331
composite.select(".composite-fill")
284332
.attr("points", truncated_xdomain.map((d, j) => this.xscale(d) + "," + this.yscale(scaled_occupancy[j])).join(" ") + " "
@@ -313,13 +361,39 @@ $(function() {
313361
.attr("stop-color", d => d.color)
314362
.attr("stop-opacity", d => d.opacity);
315363

316-
composite.select(".white-line")
317-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
318-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
319-
320-
composite.select(".composite-line")
321-
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
322-
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
364+
if (this.color_trace) {
365+
composite.select(".white-line")
366+
.style("display", "none")
367+
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
368+
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
369+
370+
composite.select(".black-line")
371+
.style("display", "none")
372+
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
373+
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
374+
375+
composite.select(".color-line")
376+
.attr("stroke", color)
377+
.style("display", null)
378+
.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"))
380+
} else {
381+
composite.select(".color-line")
382+
.attr("stroke", color)
383+
.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"));
386+
387+
composite.select(".white-line")
388+
.style("display", null)
389+
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
390+
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"));
391+
392+
composite.select(".black-line")
393+
.style("display", null)
394+
.attr("d", "M" + truncated_sense_domain.map((d, j) => this.xscale(d) + " " + this.yscale(scaled_sense[j])).join("L")
395+
+ "M" + truncated_anti_domain.map((d, j) => this.xscale(d) + " " + this.yscale(-scaled_anti[j])).join("L"))
396+
};
323397

324398
composite.select(".composite-fill")
325399
.attr("points", this.xscale(truncated_sense_domain[0]) + "," + this.yscale(0) + " "
@@ -496,6 +570,27 @@ $(function() {
496570
$("#settings-table").settings_table("plot_all_composites")
497571
},
498572

573+
toggle_color_trace: function(color_trace) {
574+
this.color_trace = color_trace;
575+
576+
if (color_trace) {
577+
this._elements.composite_group.selectAll(".composite .color-line")
578+
.style("display", null);
579+
this._elements.composite_group.selectAll(".composite .white-line")
580+
.style("display", "none");
581+
this._elements.composite_group.selectAll(".composite .black-line")
582+
.style("display", "none")
583+
} else {
584+
this._elements.composite_group.selectAll(".composite .color-line")
585+
.style("display", "none");
586+
this._elements.composite_group.selectAll(".composite .white-line")
587+
.style("display", null);
588+
this._elements.composite_group.selectAll(".composite .black-line")
589+
.style("display", null)
590+
}
591+
592+
},
593+
499594
toggle_locked: function(locked) {
500595
this.locked = locked
501596
},

0 commit comments

Comments
 (0)