Adapted concentrations graph when there is no short range interaction
This commit is contained in:
parent
0e3feafe94
commit
6d056d8576
2 changed files with 51 additions and 32 deletions
|
|
@ -399,6 +399,10 @@ function draw_concentration_plot(svg_id, times, concentrations, cumulative_doses
|
|||
|
||||
function draw_plot(svg_id, times, concentrations, short_range_concentrations, cumulative_doses) {
|
||||
|
||||
// Used for controlling the short range interactions
|
||||
let button_full_exposure = document.getElementById("button_full_exposure");
|
||||
let button_long_exposure = document.getElementById("button_long_exposure");
|
||||
|
||||
var data_for_graphs = {
|
||||
'concentrations': [],
|
||||
'short_range_concentrations': [],
|
||||
|
|
@ -476,11 +480,13 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
.attr('fill', '#1f77b4')
|
||||
.attr('fill-opacity', '0.1');
|
||||
|
||||
var legendShortRangeAreaIcon = vis.append('rect')
|
||||
.attr('width', 20)
|
||||
.attr('height', 15)
|
||||
.attr('fill', '#1f00b4')
|
||||
.attr('fill-opacity', '0.1');
|
||||
if (button_full_exposure || button_long_exposure) {
|
||||
var legendShortRangeAreaIcon = vis.append('rect')
|
||||
.attr('width', 20)
|
||||
.attr('height', 15)
|
||||
.attr('fill', '#1f00b4')
|
||||
.attr('fill-opacity', '0.1');
|
||||
}
|
||||
|
||||
var legendLineText = vis.append('text')
|
||||
.text('Mean concentration')
|
||||
|
|
@ -497,15 +503,19 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
.style('font-size', '15px')
|
||||
.attr('alignment-baseline', 'central');
|
||||
|
||||
var legendShortRangeText = vis.append('text')
|
||||
.text('Short range interaction(s)')
|
||||
.style('font-size', '15px')
|
||||
.attr('alignment-baseline', 'central');
|
||||
if (button_full_exposure || button_long_exposure) {
|
||||
var legendShortRangeText = vis.append('text')
|
||||
.text('Short range interaction(s)')
|
||||
.style('font-size', '15px')
|
||||
.attr('alignment-baseline', 'central');
|
||||
}
|
||||
|
||||
// Legend bounding
|
||||
if (button_full_exposure || button_long_exposure) legendBBox_height = 90;
|
||||
else legendBBox_height = 68;
|
||||
var legendBBox = vis.append('rect')
|
||||
.attr('width', 255)
|
||||
.attr('height', 90)
|
||||
.attr('height', legendBBox_height)
|
||||
.attr('stroke', 'lightgrey')
|
||||
.attr('stroke-width', '2')
|
||||
.attr('rx', '5px')
|
||||
|
|
@ -559,7 +569,7 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
|
||||
var brush = d3.brushY();
|
||||
|
||||
function update_concentration_plot(data, data_for_graphs) {
|
||||
function update_concentration_plot(data, long_range_data, data_for_graphs) {
|
||||
yRange.domain([0., Math.max(...data)]);
|
||||
yAxisEl.transition().duration(1000).call(yAxis);
|
||||
|
||||
|
|
@ -571,7 +581,7 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
.merge(draw_line.select('.line'))
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.attr("d", lineFunc(data_for_graphs));
|
||||
.attr("d", lineFunc(long_range_data));
|
||||
|
||||
// Area.
|
||||
exposed_presence_intervals.forEach((b, index) => {
|
||||
|
|
@ -579,7 +589,7 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
.y0(graph_height - 50)
|
||||
.y1(d => yRange(d.concentration)
|
||||
);
|
||||
drawArea[index].transition().duration(1000).attr('d', exposedArea[index](data_for_graphs.filter(d => {
|
||||
drawArea[index].transition().duration(1000).attr('d', exposedArea[index](long_range_data.filter(d => {
|
||||
return d.time >= b[0] && d.time <= b[1]
|
||||
})));
|
||||
});
|
||||
|
|
@ -590,7 +600,7 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
.y0(graph_height - 50)
|
||||
.y1(d => yRange(d.concentration));
|
||||
|
||||
drawShortRangeArea[index].transition().duration(1000).attr('d', shortRangeArea[index](data_for_graphs.filter(d => {
|
||||
drawShortRangeArea[index].transition().duration(1000).attr('d', shortRangeArea[index](long_range_data.filter(d => {
|
||||
return d.time >= b[0] && d.time <= b[1]
|
||||
})));
|
||||
});
|
||||
|
|
@ -745,10 +755,12 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
legendAreaText.attr('x', graph_width + 4 * size)
|
||||
.attr('y', margins.top + 3 * size);
|
||||
|
||||
legendShortRangeAreaIcon.attr('x', graph_width + size * 2.5)
|
||||
.attr('y', margins.top + 3.6 * size);
|
||||
legendShortRangeText.attr('x', graph_width + 4 * size)
|
||||
.attr('y', margins.top + 4 * size);
|
||||
if (button_full_exposure || button_long_exposure) {
|
||||
legendShortRangeAreaIcon.attr('x', graph_width + size * 2.5)
|
||||
.attr('y', margins.top + 3.6 * size);
|
||||
legendShortRangeText.attr('x', graph_width + 4 * size)
|
||||
.attr('y', margins.top + 4 * size);
|
||||
}
|
||||
|
||||
legendBBox.attr('x', graph_width * 1.07)
|
||||
.attr('y', margins.top * 1.2);
|
||||
|
|
@ -772,10 +784,12 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
legendAreaText.attr('x', 2 * size)
|
||||
.attr('y', graph_height + 2.6 * size);
|
||||
|
||||
legendShortRangeAreaIcon.attr('x', size * 0.50)
|
||||
.attr('y', graph_height * 1.175 + size);
|
||||
legendShortRangeText.attr('x', 2 * size)
|
||||
.attr('y', graph_height + 3.65 * size);
|
||||
if (button_full_exposure || button_long_exposure) {
|
||||
legendShortRangeAreaIcon.attr('x', size * 0.50)
|
||||
.attr('y', graph_height * 1.175 + size);
|
||||
legendShortRangeText.attr('x', 2 * size)
|
||||
.attr('y', graph_height + 3.65 * size);
|
||||
}
|
||||
|
||||
legendBBox.attr('x', 1)
|
||||
.attr('y', graph_height);
|
||||
|
|
@ -788,12 +802,16 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
draw_cumulative_line.attr("d", lineCumulative(data_for_graphs.cumulative_doses));
|
||||
}
|
||||
|
||||
document.getElementById("button_full_exposure").addEventListener("click", () => {
|
||||
update_concentration_plot(short_range_concentrations, data_for_graphs.short_range_concentrations);
|
||||
});
|
||||
document.getElementById("button_long_exposure").addEventListener("click", () => {
|
||||
update_concentration_plot(concentrations, data_for_graphs.concentrations);
|
||||
});
|
||||
if (button_full_exposure) {
|
||||
button_full_exposure.addEventListener("click", () => {
|
||||
update_concentration_plot(short_range_concentrations, data_for_graphs.short_range_concentrations, data_for_graphs.short_range_concentrations);
|
||||
});
|
||||
}
|
||||
if (button_long_exposure) {
|
||||
button_long_exposure.addEventListener("click", () => {
|
||||
update_concentration_plot(concentrations, data_for_graphs.short_range_concentrations, data_for_graphs.concentrations);
|
||||
});
|
||||
}
|
||||
|
||||
// If user double click, reinitialize the chart
|
||||
vis.on("dblclick",function(){
|
||||
|
|
@ -828,7 +846,7 @@ function draw_plot(svg_id, times, concentrations, short_range_concentrations, cu
|
|||
|
||||
// Draw for the first time to initialize.
|
||||
redraw();
|
||||
update_concentration_plot(short_range_concentrations, data_for_graphs.short_range_concentrations);
|
||||
update_concentration_plot(short_range_concentrations, data_for_graphs.short_range_concentrations, data_for_graphs.short_range_concentrations);
|
||||
|
||||
// Redraw based on the new size whenever the browser window is resized.
|
||||
window.addEventListener("resize", redraw);
|
||||
|
|
|
|||
|
|
@ -89,9 +89,10 @@
|
|||
{% endblock report_summary_footnote %}
|
||||
</div>
|
||||
<p id="section1">* The results are based on the parameters and assumptions published in the CERN Open Report <a href="https://cds.cern.ch/record/2756083"> CERN-OPEN-2021-004</a>.</p>
|
||||
<button class="btn btn-sm btn-primary" id="button_full_exposure">Full exposure</button>
|
||||
<button class="btn btn-sm btn-primary" id="button_long_exposure">Background concentration</button>
|
||||
|
||||
{% if form.short_range_option == "short_range_yes" %}
|
||||
<button class="btn btn-sm btn-primary" id="button_full_exposure">Full exposure</button>
|
||||
<button class="btn btn-sm btn-primary" id="button_long_exposure">Background concentration</button>
|
||||
{% endif %}
|
||||
<div id="concentration_plot" style="height: 400px"></div>
|
||||
<script type="application/javascript">
|
||||
var times = {{ times | JSONify }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue