cara/caimira/apps/calculator/static/js/report.js

function on_report_load(conditional_probability_plot) {
    // Check/uncheck uncertainties image generation
    document.getElementById('conditional_probability_plot').checked = conditional_probability_plot
}

/* Generate the concentration plot using d3 library. */
function draw_plot(svg_id) {

    // Used for controlling the short-range interactions 
    let button_full_exposure = document.getElementById("button_full_exposure");
    let button_hide_high_concentration = document.getElementById("button_hide_high_concentration");
    let long_range_checkbox = document.getElementById('long_range_cumulative_checkbox')
    let show_sr_legend = short_range_expirations.length > 0;

    var data_for_graphs = {
        'concentrations': [],
        'cumulative_doses': [],
        'long_range_cumulative_doses': [],
    }
    times.map((time, index) => data_for_graphs.concentrations.push({ 'time': time, 'hour': new Date().setHours(Math.trunc(time), (time - Math.trunc(time)) * 60), 'concentration': concentrations[index]}));
    times.map((time, index) => data_for_graphs.cumulative_doses.push({ 'time': time, 'hour': new Date().setHours(Math.trunc(time), (time - Math.trunc(time)) * 60), 'concentration': cumulative_doses[index]}));
    times.map((time, index) => data_for_graphs.long_range_cumulative_doses.push({ 'time': time, 'hour': new Date().setHours(Math.trunc(time), (time - Math.trunc(time)) * 60), 'concentration': long_range_cumulative_doses[index]}));

    const tooltip_data_for_graphs = Object.fromEntries(Object.entries(data_for_graphs).filter(([key]) => !key.includes('long_range_cumulative_doses')));

    // Add main SVG element
    var plot_div = document.getElementById(svg_id);
    var vis = d3.select(plot_div).append('svg');

    var time_format = d3.timeFormat('%H:%M');
    // H:M time format for x axis.
    xRange = d3.scaleTime().domain([data_for_graphs.concentrations[0].hour, data_for_graphs.concentrations[data_for_graphs.concentrations.length - 1].hour]),
    xTimeRange = d3.scaleLinear().domain([data_for_graphs.concentrations[0].time, data_for_graphs.concentrations[data_for_graphs.concentrations.length - 1].time]),
    bisecHour = d3.bisector((d) => { return d.hour; }).left,

    yRange = d3.scaleLinear(),
    yCumulativeRange = d3.scaleLinear(),
    
    yAxis = d3.axisLeft(),
    yCumulativeAxis = d3.axisRight();

    // X axis declaration.
    var xAxisEl = vis.append('svg:g')
        .attr('class', 'x axis');

    // X axis label.
    var xAxisLabelEl = vis.append('text')
        .attr('class', 'x label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Time of day')

    // Y axis declaration.
    var yAxisEl = vis.append('svg:g')
        .attr('class', 'y axis');

    // Y axis label.
    var yAxisLabelEl = vis.append('svg:text')
        .attr('class', 'y label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Mean concentration (IRP/m³)');

    // Y cumulative concentration axis declaration.
    var yAxisCumEl = vis.append('svg:g')
        .attr('class', 'y axis')
        .style("stroke-dasharray", "5 5");

    // Y cumulated concentration axis label.
    var yAxisCumLabelEl = vis.append('svg:text')
        .attr('class', 'y label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Mean cumulative dose (IRP)');

    // Legend for the plot elements - line and area.
    
    // Concentration line icon
    var legendLineIcon = vis.append('rect')
        .attr('width', 20)
        .attr('height', 3)
        .style('fill', '#1f77b4');
    // Concentration line text
    var legendLineText = vis.append('text')
        .text('Mean concentration')

    // Cumulative dose line icon
    var legendCumulativeIcon = vis.append('line')
        .style("stroke-dasharray", "5 5") //dashed array for line
        .attr('stroke-width', '2')
        .style("stroke", '#1f77b4');
    // Cumulative dose line text
    var legendCumutiveText = vis.append('text')
        .text('Cumulative dose')

    //  Area line icon
    var legendAreaIcon = vis.append('rect')
        .attr('width', 20)
        .attr('height', 15)
        .attr('fill', '#1f77b4')
        .attr('fill-opacity', '0.1');
    //  Area line text
    var legendAreaText = vis.append('text')
        .text('Presence of exposed person(s)')

    sr_unique_activities = [...new Set(short_range_expirations)]
    if (show_sr_legend) {
        // Long-range cumulative dose line legend - line and area
        var legendLongCumulativeIcon = vis.append('line')
            .style("stroke-dasharray", "5 5") //dashed array for line
            .attr('stroke-width', '2')
            .style("stroke", 'purple')
            .attr('opacity', 0);
        var legendLongCumutiveText = vis.append('text')
            .text('Long-range cumulative dose')
            .attr('opacity', 0);
        // Short-range area icon
        var legendShortRangeAreaIcon = {};
        sr_unique_activities.forEach((b, index) => {
        legendShortRangeAreaIcon[index] = vis.append('rect')
            .attr('width', 20)
            .attr('height', 15);
        // Short-range area icon colors
        if (sr_unique_activities[index] == 'Breathing') legendShortRangeAreaIcon[index].attr('fill', 'red').attr('fill-opacity', '0.2');
        else if (sr_unique_activities[index] == 'Speaking') legendShortRangeAreaIcon[index].attr('fill', 'green').attr('fill-opacity', '0.1');
        else legendShortRangeAreaIcon[index].attr('fill', 'blue').attr('fill-opacity', '0.1');
        });
        // Short-range area text
        var legendShortRangeText = {};
        sr_unique_activities.forEach((b, index) => {
            legendShortRangeText[index] = vis.append('text')
            .text('Short-range - ' + sr_unique_activities[index]);
        });
    }

    // Legend bounding
    if (show_sr_legend) legendBBox_height = 68 + 20 * sr_unique_activities.length;
    else legendBBox_height = 68;
    var legendBBox = vis.append('rect')
        .attr('width', 270)
        .attr('height', legendBBox_height)
        .attr('stroke', 'lightgrey')
        .attr('stroke-width', '2')
        .attr('rx', '5px')
        .attr('ry', '5px')
        .attr('stroke-linejoin', 'round')
        .attr('fill', 'none');

    var clip = vis.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect");

    var draw_area = vis.append('svg:g')
        .attr('clip-path', 'url(#clip)');
    // Line representing the mean concentration.
    var lineFunc = d3.line();
    draw_area.append('svg:path')
        .attr('class', 'line')
        .attr('stroke', '#1f77b4')
        .attr('stroke-width', 2)
        .attr('fill', 'none');
    
    // Line representing the cumulative concentration.
    var lineCumulative = d3.line();
    var draw_cumulative_line = draw_area.append('svg:path')
        .attr('stroke', '#1f77b4')
        .attr('stroke-width', 2)
        .style("stroke-dasharray", "5 5")
        .attr('fill', 'none');

    // Line representing the long-range cumulative concentration.
    if (show_sr_legend) {
        var longRangeCumulative = d3.line();
        var draw_long_range_cumulative_line = draw_area.append('svg:path')
            .attr('stroke', 'purple')
            .attr('stroke-width', 2)
            .style("stroke-dasharray", "5 5")
            .attr('fill', 'none')
            .attr('opacity', 0);      
    }

    // Area representing the presence of exposed person(s).
    var exposedArea = {};
    var drawArea = {};
    exposed_presence_intervals.forEach((b, index) => {
        exposedArea[index] = d3.area();
        drawArea[index] = draw_area.append('svg:path')
            .attr('fill', '#1f77b4')
            .attr('fill-opacity', '0.1');
    });

    // Area representing the short-range interaction(s).
    var shortRangeArea = {};
    var drawShortRangeArea = {};
    short_range_intervals.forEach((b, index) => {
        shortRangeArea[index] = d3.area();
        drawShortRangeArea[index] = draw_area.append('svg:path');

        if (short_range_expirations[index] == 'Breathing') drawShortRangeArea[index].attr('fill', 'red').attr('fill-opacity', '0.2');
        else if (short_range_expirations[index] == 'Speaking') drawShortRangeArea[index].attr('fill', 'green').attr('fill-opacity', '0.1');
        else drawShortRangeArea[index].attr('fill', 'blue').attr('fill-opacity', '0.1');
    });

    // Tooltip.
    var focus = {}, tooltip_rect = {}, tooltip_time = {}, tooltip_concentration = {}, toolBox = {};
    for (const [concentration, data] of Object.entries(tooltip_data_for_graphs)) {
        let data_length = String(Math.floor(Math.max(...data.map(el => el.concentration !== undefined ? el.concentration : 0)))).length;

        focus[concentration] = vis.append('svg:g')
            .style('display', 'none');

        focus[concentration].append('circle')
            .attr('r', 3);

        tooltip_rect[concentration] = focus[concentration].append('rect')
            .attr('fill', 'white')
            .attr('stroke', '#000')
            .attr('width', 65 + data_length * 8)
            .attr('height', 50)
            .attr('y', -22)
            .attr('rx', 4)
            .attr('ry', 4);

        tooltip_time[concentration] = focus[concentration].append('text')
            .attr('id', 'tooltip-time')
            .attr('x', 18)
            .attr('y', -2);

        tooltip_concentration[concentration] = focus[concentration].append('text')
            .attr('id', 'tooltip-concentration')
            .attr('x', 18)
            .attr('y', 18);

        toolBox[concentration] = vis.append('rect')
            .attr('fill', 'none')
            .attr('pointer-events', 'all')
            .on('mouseover', () => { for (const [concentration, data] of Object.entries(focus)) focus[concentration].style('display', null); })
            .on('mouseout', () => { for (const [concentration, data] of Object.entries(focus)) focus[concentration].style('display', 'none'); })
            .on('mousemove', mousemove);;
    }

    function update_concentration_plot(concentration_data, cumulative_data) {
        yRange.domain([0., Math.max(...concentration_data)*1.1]);
        yAxisEl.transition().duration(1000).call(yAxis);

        yCumulativeRange.domain([0., Math.max(...cumulative_data)*1.1]);
        yAxisCumEl.transition().duration(1000).call(yCumulativeAxis)
        
        // Concentration line
        lineFunc.defined(d => !isNaN(d.concentration))
            .x(d => xTimeRange(d.time))
            .y(d => yRange(d.concentration));
        draw_area.select('.line')
            .transition()
            .duration(1000)
            .attr("d", lineFunc(data_for_graphs.concentrations));

        // Cumulative line.
        lineCumulative.defined(d => !isNaN(d.concentration))
            .x(d => xTimeRange(d.time))
            .y(d => yCumulativeRange(d.concentration));
        draw_cumulative_line.transition()
            .duration(1000)
            .attr("d", lineCumulative(data_for_graphs.cumulative_doses));
    
        // Long-range cumulative line.
        if (show_sr_legend) {
            longRangeCumulative.defined(d => !isNaN(d.concentration))
                .x(d => xTimeRange(d.time))
                .y(d => yCumulativeRange(d.concentration));
            draw_long_range_cumulative_line.transition()
                .duration(1000)
                .attr("d", lineCumulative(data_for_graphs.long_range_cumulative_doses));
        }

        // Area.
        exposed_presence_intervals.forEach((b, index) => {
            exposedArea[index].x(d => xTimeRange(d.time))
                .y0(graph_height - 50)
                .y1(d => yRange(d.concentration)
            );
            drawArea[index].transition().duration(1000).attr('d', exposedArea[index](data_for_graphs.concentrations.filter(d => {
                    return d.time >= b[0] && d.time <= b[1]
            })));
        });

        // Short-Range Area.
        short_range_intervals.forEach((b, index) => {
            shortRangeArea[index].x(d => xTimeRange(d.time))
                .y0(graph_height - 50)
                .y1(d => yRange(d.concentration));

            drawShortRangeArea[index].transition().duration(1000).attr('d', shortRangeArea[index](data_for_graphs.concentrations.filter(d => {
                return d.time >= b[0] && d.time <= b[1]
            })));
        });

    }

    function redraw() {

        // Define width and height according to the screen size.
        var div_width = plot_div.clientWidth;
        var div_height = plot_div.clientHeight;
        graph_width = div_width;
        graph_height = div_height
        var margins = { top: 30, right: 20, bottom: 50, left: 60 };
        if (div_width >= 1000) { // For screens with width > 1000px legend can be on the graph's right side.
            div_width = 1000;
            graph_width = 600;
            const svg_margins = {'margin-left': '0rem'};
            Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val));
        }
        else {
            div_width = div_width * 1.1
            graph_width = div_width * .9;
            graph_height = div_height * .75; // On mobile screen sizes we want the legend to be on the bottom of the graph.
            const svg_margins = {'margin-left': '-1rem'};
            Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val));
        };

        // Use the extracted size to set the size of the SVG element.
        vis.attr("width", div_width)
            .attr('height', div_height);

        // SVG components according to the width and height.

        // clipPath: everything out of this area won't be drawn.
        clip.attr("x", margins.left)
            .attr("y", margins.top)
            .attr("width", graph_width - margins.right - margins.left)
            .attr("height", graph_height - margins.top - margins.bottom);

        // Axis ranges.
        xRange.range([margins.left, graph_width - margins.right]);
        xTimeRange.range([margins.left, graph_width - margins.right]);
        yRange.range([graph_height - margins.bottom, margins.top]);
        yCumulativeRange.range([graph_height - margins.bottom, margins.top]);

        // Axis.
        var xAxis = d3.axisBottom(xRange).tickFormat(d => time_format(d));
        yAxis.scale(yRange);
        yCumulativeAxis.scale(yCumulativeRange);

        xAxisEl.attr('transform', 'translate(0,' + (graph_height - margins.bottom) + ')')
            .call(xAxis);
        xAxisLabelEl.attr('x', (graph_width + margins.right) / 2)
            .attr('y', graph_height * 0.97);
        
        yAxisEl.attr('transform', 'translate(' + margins.left + ',0)');
        yAxisLabelEl.attr('x', (graph_height + margins.bottom * .55) / 2)
            .attr('y', (graph_height + margins.left) * 0.9)
            .attr('transform', 'rotate(-90, 0,' + graph_height + ')');

        yAxisCumEl.attr('transform', 'translate(' + (graph_width - margins.right) + ',0)').call(yCumulativeAxis);
        yAxisCumLabelEl.attr('transform', 'rotate(-90, 0,' + graph_height + ')')
            .attr('x', (graph_height + margins.bottom) / 2.1);

        if (plot_div.clientWidth >= 1000) {
            yAxisCumLabelEl.attr('y', graph_width * 1.7);
        }
        else {
            yAxisCumLabelEl.attr('y', graph_width + 325);
        }

        const size = 20;
        var legend_x_start = 50;
        const space_between_text_icon = 30;
        const text_height = 6;
        // Legend on right side.
        if (plot_div.clientWidth >= 1000) {
            legendLineIcon.attr('x', graph_width + legend_x_start)
                .attr('y', margins.top + size);
            legendLineText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                .attr('y', margins.top + size + text_height);

            legendCumulativeIcon.attr("x1", graph_width + legend_x_start)
                .attr("x2", graph_width + legend_x_start + 20)
                .attr("y1", margins.top + 2 * size)
                .attr("y2", margins.top + 2 * size);
            legendCumutiveText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                .attr('y', margins.top + 2 * size + text_height);
            
            legendAreaIcon.attr('x', graph_width + legend_x_start)
                .attr('y', margins.top + (3 * size) - 15/2);
            legendAreaText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                .attr('y', margins.top + 3 * size + text_height);
            
            if (show_sr_legend) {
                sr_unique_activities.forEach((b, index) => {
                    legendShortRangeAreaIcon[index].attr('x', graph_width + legend_x_start)
                        .attr('y', margins.top + (4 + index) * size - 15/2);
                    legendShortRangeText[index].attr('x', graph_width + legend_x_start + space_between_text_icon)
                        .attr('y', margins.top + (4 + index) * size + text_height);
                });
                legendLongCumulativeIcon.attr("x1", graph_width + legend_x_start)
                    .attr("x2", graph_width + legend_x_start + 20)
                    .attr("y1", margins.top + (4 + sr_unique_activities.length) * size)
                    .attr("y2", margins.top + (4 + sr_unique_activities.length) * size);
                legendLongCumutiveText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                    .attr('y', margins.top + (4 + sr_unique_activities.length) * size +  + text_height); 
            }
            
            legendBBox.attr('x', graph_width * 1.07)
                .attr('y', margins.top * 1.2);
        }
        // Legend on the bottom.
        else {
            legend_x_start = margins.left + 10;
            legendLineIcon.attr('x', legend_x_start)
                .attr('y', graph_height + size);
            legendLineText.attr('x', legend_x_start + space_between_text_icon)
                .attr('y', graph_height + size + text_height);

            legendCumulativeIcon.attr("x1", legend_x_start)
                .attr("x2", legend_x_start + 20)
                .attr("y1", graph_height + 2 * size)
                .attr("y2", graph_height + 2 * size);
            legendCumutiveText.attr('x', legend_x_start + space_between_text_icon)
                .attr('y', graph_height + 2 * size + text_height);

            legendAreaIcon.attr('x', legend_x_start)
                .attr('y', graph_height + 3 * size - 15/2);
            legendAreaText.attr('x', legend_x_start + space_between_text_icon)
                .attr('y', graph_height + 3 * size + text_height);

            if (show_sr_legend) {
                sr_unique_activities.forEach((b, index) => {
                    legendShortRangeAreaIcon[index].attr('x', legend_x_start)
                        .attr('y', graph_height + (4 + index) * size - 15/2);
                    legendShortRangeText[index].attr('x', legend_x_start + space_between_text_icon)
                        .attr('y', graph_height + (4 + index) * size + text_height);
                });
                legendLongCumulativeIcon.attr("x1", legend_x_start)
                    .attr("x2", legend_x_start + 20)
                    .attr("y1", graph_height + (4 + sr_unique_activities.length) * size)
                    .attr("y2", graph_height + (4 + sr_unique_activities.length) * size)
                legendLongCumutiveText.attr('x', legend_x_start + space_between_text_icon)
                    .attr('y', graph_height + (4 + sr_unique_activities.length) * size + text_height);
            }

            legendBBox.attr('x', margins.left)
                .attr('y', graph_height + 6);
        }

        // ToolBox.
        for (const [concentration, data] of Object.entries(tooltip_data_for_graphs)) {
            toolBox[concentration].attr('width', graph_width - margins.right)
                .attr('height', graph_height);
        }

    }

    if (show_sr_legend) {
        long_range_checkbox.addEventListener("click", () => {
            if (long_range_checkbox.checked) {
                draw_long_range_cumulative_line.transition().duration(1000).attr("opacity", 1);
                legendBBox.transition().duration(1000).attr("height", legendBBox_height + 20);
                legendLongCumulativeIcon.transition().duration(1000).attr("opacity", 1);
                legendLongCumutiveText.transition().duration(1000).attr("opacity", 1);
            }
            else {
                draw_long_range_cumulative_line.transition().duration(1000).attr("opacity", 0);
                legendBBox.transition().duration(1000).attr("height", legendBBox_height);
                legendLongCumulativeIcon.transition().duration(1000).attr("opacity", 0);
                legendLongCumutiveText.transition().duration(1000).attr("opacity", 0);
            }
        });
    };

    if (button_full_exposure) {
        button_full_exposure.addEventListener("click", () => {
            update_concentration_plot(concentrations, cumulative_doses);
            button_full_exposure.disabled = true;
            button_hide_high_concentration.disabled = false;
        });
    }
    if (button_hide_high_concentration) {
        button_hide_high_concentration.addEventListener("click", () => {
            update_concentration_plot(concentrations_zoomed, long_range_cumulative_doses);
            button_full_exposure.disabled = false;
            button_hide_high_concentration.disabled = true;
        });
    }

    function mousemove() {
        for (const [scenario, data] of Object.entries(tooltip_data_for_graphs)) {
            if (d3.pointer(event)[0] < graph_width / 2) {
                tooltip_rect[scenario].attr('x', 10)
                tooltip_time[scenario].attr('x', 18)
                tooltip_concentration[scenario].attr('x', 18);
            }
            else {
                tooltip_rect[scenario].attr('x', -10 - tooltip_rect[scenario].attr('width'))
                tooltip_time[scenario].attr('x', -2 - tooltip_rect[scenario].attr('width'))
                tooltip_concentration[scenario].attr('x', -2 - tooltip_rect[scenario].attr('width'))
            }
        }
        // Concentration line
        var x0 = xRange.invert(d3.pointer(event, this)[0]),
            i = bisecHour(data_for_graphs.concentrations, x0, 1),
            d0 = data_for_graphs.concentrations[i - 1],
            d1 = data_for_graphs.concentrations[i];
        if (d1) {
            var d = x0 - d0.hour > d1.hour - x0 ? d1 : d0;
            focus.concentrations.attr('transform', 'translate(' + xRange(d.hour) + ',' + yRange(d.concentration) + ')');
            focus.concentrations.select('#tooltip-time').text('x = ' + time_format(d.hour));
            focus.concentrations.select('#tooltip-concentration').text('y = ' + d.concentration.toFixed(2));
        }
        // Cumulative line
        var x0 = xRange.invert(d3.pointer(event, this)[0]),
            i = bisecHour(data_for_graphs.cumulative_doses, x0, 1),
            d0 = data_for_graphs.cumulative_doses[i - 1],
            d1 = data_for_graphs.cumulative_doses[i];
        if (d1 && d1.concentration) {
            var d = x0 - d0.hour > d1.hour - x0 ? d1 : d0;
            focus.cumulative_doses.attr('transform', 'translate(' + xRange(d.hour) + ',' + yCumulativeRange(d.concentration) + ')');
            focus.cumulative_doses.select('#tooltip-time').text('x = ' + time_format(d.hour));
            focus.cumulative_doses.select('#tooltip-concentration').text('y = ' + d.concentration.toFixed(2));
        }
    }

    // Draw for the first time to initialize.
    redraw();
    update_concentration_plot(concentrations, cumulative_doses);

    // Redraw based on the new size whenever the browser window is resized.
    window.addEventListener("resize", e => {
        redraw();
        if (button_full_exposure && button_full_exposure.disabled) update_concentration_plot(concentrations, cumulative_doses);
        else update_concentration_plot(concentrations_zoomed, long_range_cumulative_doses)
    });
}

// Generate a scenarios plot using d3 library.
// 'list_of_scenarios' is a dictionary with all the scenarios 
// 'times' is a list of times for all the scenarios
function draw_generic_concentration_plot(
        plot_svg_id,
        y_axis_label,
        h_lines,
    ) {

    list_of_scenarios = (plot_svg_id === 'CO2_concentration_graph') ? CO2_concentrations : alternative_scenarios
    // H:M format
    var time_format = d3.timeFormat('%H:%M');
    // D3 array of ten categorical colors represented as RGB hexadecimal strings.
    var colors = d3.schemeCategory10;

    // Variable for the highest concentration for all the scenarios
    var highest_concentration = 0.

    var data_for_scenarios = {}
    for (scenario in list_of_scenarios) {
        scenario_concentrations = list_of_scenarios[scenario].concentrations;

        highest_concentration = Math.max(highest_concentration, Math.max(...scenario_concentrations))

        var data = []
        times.map((time, index) => data.push({ 'time': time, 'hour': new Date().setHours(Math.trunc(time), (time - Math.trunc(time)) * 60), 'concentration': scenario_concentrations[index] }))

        // Add data into lines dictionary
        data_for_scenarios[scenario] = data
    }

    // We need one scenario to get the time range
    var first_scenario = Object.values(data_for_scenarios)[0]

    // Add main SVG element
    var plot_div = document.getElementById(plot_svg_id);
    var vis = d3.select(plot_div).append('svg');

    var xRange = d3.scaleTime().domain([first_scenario[0].hour, first_scenario[first_scenario.length - 1].hour]);
    var xTimeRange = d3.scaleLinear().domain([times[0], times[times.length - 1]]);
    var bisecHour = d3.bisector((d) => { return d.hour; }).left;

    var yRange = d3.scaleLinear();
    var yAxis = d3.axisLeft();

    // X axis.
    var xAxisEl = vis.append('svg:g')
        .attr('class', 'x axis');

    // X axis label.
    var xAxisLabelEl = vis.append('text')
        .attr('class', 'x label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Time of day');

    // Y axis declaration.
    var yAxisEl = vis.append('svg:g')
        .attr('class', 'y axis');

    // Y axis label.
    var yAxisLabelEl = vis.append('svg:text')
        .attr('class', 'y label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text(y_axis_label);

    // Legend bounding box.
    let h_lines_lenght = h_lines ? h_lines.length : 0
    let h_line_max_key = h_lines ? Math.max(...(h_lines.map(el => el.label.length))) : 0

    max_key_length = Math.max(Math.max(...(Object.keys(data_for_scenarios).map(el => el.length))), h_line_max_key);
    var legendBBox = vis.append('rect')
        .attr('width', 10 * max_key_length )
        .attr('height', 25 * ((Object.keys(data_for_scenarios).length) + h_lines_lenght))
        .attr('stroke', 'lightgrey')
        .attr('stroke-width', '2')
        .attr('rx', '5px')
        .attr('ry', '5px')
        .attr('stroke-linejoin', 'round')
        .attr('fill', 'none');

    var clip = vis.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect");

    var draw_area = vis.append('svg:g')
        .attr('clip-path', 'url(#clip)');

    // Line representing the mean concentration for each scenario.
    var lineFuncs = {}, draw_lines  = {}, label_icons = {}, label_text = {};
    for (const [scenario_name, data] of Object.entries(data_for_scenarios)) {
        var scenario_index = Object.keys(data_for_scenarios).indexOf(scenario_name)

        // Line representing the mean concentration.
        lineFuncs[scenario_name] = d3.line();

        draw_lines[scenario_name] = draw_area.append('svg:path')
            .attr("stroke", colors[scenario_index])
            .attr('stroke-width', 2)
            .attr('fill', 'none');

        // Legend for the plot elements - lines.
        label_icons[scenario_name] = vis.append('rect')
            .attr('width', 20)
            .attr('height', 3)
            .style('fill', colors[scenario_index]);

        label_text[scenario_name] = vis.append('text')
            .text(scenario_name);
    }
    if (h_lines) {
        var h_lines_draw = {}, h_line_label_icon = {}, h_line_label_text = {};
        h_lines.map((line) => {
            h_lines_draw[line.label] = draw_area.append('svg:line')
                .attr('stroke', line.color)
                .attr('stroke-width', 2)
                .attr('stroke-dasharray', line.style == 'dashed' ? (5, 5) : 0)

            // Legend for each of the horizontal lines

            h_line_label_icon[line.label] = vis.append('line')
                .style("stroke-dasharray", line.style == 'dashed' ? (5, 5) : 0)
                .attr('stroke-width', '2')
                .style("stroke", line.color);
            h_line_label_text[line.label] = vis.append('text')
                .text(line.label);
        })
    }

    // Tooltip.
    var focus = {}, tooltip_rect = {}, tooltip_time = {}, tooltip_concentration = {}, toolBox = {};
    for (const [scenario_name, data] of Object.entries(data_for_scenarios)) {
        let data_length = String(Math.floor(Math.max(...data.map(el => el.concentration !== undefined ? el.concentration : 0)))).length;
        focus[scenario_name] = vis.append('svg:g')
            .style('display', 'none');

        focus[scenario_name].append('circle')
            .attr('r', 3);

        tooltip_rect[scenario_name] = focus[scenario_name].append('rect')
            .attr('fill', 'white')
            .attr('stroke', '#000')
            .attr('width', 65 + data_length * 8)
            .attr('height', 50)
            .attr('y', -22)
            .attr('rx', 4)
            .attr('ry', 4);

        tooltip_time[scenario_name] = focus[scenario_name].append('text')
            .attr('id', 'tooltip-time')
            .attr('y', -2);

        tooltip_concentration[scenario_name] = focus[scenario_name].append('text')
            .attr('id', 'tooltip-concentration')
            .attr('y', 18);

        toolBox[scenario_name] = vis.append('rect')
            .attr('fill', 'none')
            .attr('pointer-events', 'all')
            .on('mouseover', () => { for (const [scenario_name, data] of Object.entries(focus)) focus[scenario_name].style('display', null); })
            .on('mouseout', () => { for (const [scenario_name, data] of Object.entries(focus)) focus[scenario_name].style('display', 'none'); })
            .on('mousemove', mousemove);
    }

    function update_concentration_plot(concentration_data) {
        list_of_scenarios = (plot_svg_id === 'CO2_concentration_graph') ? CO2_concentrations : alternative_scenarios
        var highest_concentration = 0.

        for (scenario in list_of_scenarios) {
            scenario_concentrations = list_of_scenarios[scenario][concentration_data];
            highest_concentration = Math.max(highest_concentration, Math.max(...scenario_concentrations));
        }

        yRange.domain([0., highest_concentration*1.1]);
        yAxisEl.transition().duration(1000).call(yAxis);

        for (const [scenario_name, data] of Object.entries(data_for_scenarios)) {
            // Lines.
            lineFuncs[scenario_name].defined(d => !isNaN(d.concentration))
                .x(d => xTimeRange(d.time))
                .y(d => yRange(d.concentration));
            draw_lines[scenario_name].transition().duration(1000).attr("d", lineFuncs[scenario_name](data));
        }

        if (h_lines) {
            h_lines.map((line) => {
                h_lines_draw[line.label]
                    .attr("x1", xTimeRange(times[0])) 
                    .attr("y1", yRange(line.y))
                    .attr("x2", xTimeRange(times[times.length - 1]))
                    .attr("y2", yRange(line.y));
            })
        }
    }

    var graph_width;
    var graph_height;

    function redraw() {
        // Define width and height according to the screen size. Always use an already defined
        var window_width = document.getElementById('concentration_plot').clientWidth;
        var div_width = window_width;
        var div_height = document.getElementById('concentration_plot').clientHeight;
        graph_width = div_width;
        graph_height = div_height;
        var margins = { top: 30, right: 20, bottom: 50, left: 60 };
        if (window_width >= 1000) { // For screens with width > 1000px legend can be on the graph's right side.
            div_width = 1000;
            graph_width = 600;
            const svg_margins = {'margin-left': '0rem'};
            Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val));
        }
        else {
            div_width = div_width * 1.1
            graph_width = div_width * .9;
            graph_height = div_height * .75; // On mobile screen sizes we want the legend to be on the bottom of the graph.
            const svg_margins = {'margin-left': '-1rem'};
            Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val));
        };

        // Use the extracted size to set the size of the SVG element.
        vis.attr("width", div_width)
            .attr('height', div_height);

        // SVG components according to the width and height.
        // clipPath: everything out of this area won't be drawn.
        clip.attr("x", margins.left)
            .attr("y", margins.top)
            .attr("width", graph_width - margins.right - margins.left)
            .attr("height", graph_height - margins.top - margins.bottom);

        // Axis ranges.
        xRange.range([margins.left, graph_width - margins.right]);
        xTimeRange.range([margins.left, graph_width - margins.right]);
        yRange.range([graph_height - margins.bottom, margins.top]);

        // Axis.
        var xAxis = d3.axisBottom(xRange).tickFormat(d => time_format(d));
        yAxis.scale(yRange);

        xAxisEl.attr('transform', 'translate(0,' + (graph_height - margins.bottom) + ')')
            .call(xAxis);
        xAxisLabelEl.attr('x', (graph_width + margins.right) / 2)
            .attr('y', graph_height * 0.97)

        yAxisEl.attr('transform', 'translate(' + margins.left + ',0)')
            .call(yAxis);
        yAxisLabelEl.attr('x', (graph_height + margins.bottom * .55) / 2)
            .attr('y', (graph_height + margins.left) * 0.9)
            .attr('transform', 'rotate(-90, 0,' + graph_height + ')');

        // Legend items
        var legend_x_start = 25;
        const space_between_text_icon = 30;
        const text_height = 6;
        for (const [scenario_name, data] of Object.entries(data_for_scenarios)) {
            var scenario_index = Object.keys(data_for_scenarios).indexOf(scenario_name)
            // Legend on right side.
            var size = 20 * (scenario_index + 1);
            if (window_width >= 1000) {
                label_icons[scenario_name].attr('x', graph_width + legend_x_start)
                    .attr('y', margins.top + size);
                label_text[scenario_name].attr('x', graph_width + legend_x_start + space_between_text_icon)
                    .attr('y', margins.top + size  + text_height);
            }
            // Legend on the bottom.
            else {
                legend_x_start = margins.left + 10;
                label_icons[scenario_name].attr('x', legend_x_start)
                    .attr('y', graph_height + size);
                label_text[scenario_name].attr('x', legend_x_start + space_between_text_icon)
                    .attr('y', graph_height + size  + text_height);
            }
        }
        if (h_lines) {
            h_lines.map((line, index) => {
                size = 21 * (scenario_index + index + 2); // account for previous legend elements
                if (window_width >= 1000) {
                    h_line_label_icon[line.label].attr("x1", graph_width + legend_x_start)
                        .attr("x2", graph_width + legend_x_start + 20)
                        .attr("y1", margins.top + size)
                        .attr("y2", margins.top + size);
                    h_line_label_text[line.label].attr('x', graph_width + legend_x_start + space_between_text_icon)
                        .attr('y', margins.top + size  + text_height);
                }
                // Legend on the bottom.
                else {
                    legend_x_start = margins.left + 10;
                    h_line_label_icon[line.label].attr("x1", legend_x_start)
                        .attr("x2", legend_x_start + 20)
                        .attr("y1", graph_height + size)
                        .attr("y2", graph_height + size);
                    h_line_label_text[line.label].attr('x', legend_x_start + space_between_text_icon)
                        .attr('y', graph_height + size  + text_height);
                }
            })
        }

        // Legend on right side.
        if (window_width >= 1000) {
            legendBBox.attr('x', graph_width * 1.02)
                .attr('y', margins.top * 1.15);
            
        }
        // Legend on the bottom.
        else {
            legendBBox.attr('x', margins.left)
                .attr('y', graph_height * 1.02)
        }

        // ToolBox.
        for (const [scenario_name, data] of Object.entries(data_for_scenarios)) {
            toolBox[scenario_name].attr('width', graph_width - margins.right)
                .attr('height', graph_height);
        }
    }

    function mousemove() {
        for (const [scenario_name, data] of Object.entries(data_for_scenarios)) {
            if (d3.pointer(event)[0] < graph_width / 2) {
                tooltip_rect[scenario_name].attr('x', 10)
                tooltip_time[scenario_name].attr('x', 18)
                tooltip_concentration[scenario_name].attr('x', 18);
            }
            else {
                tooltip_rect[scenario_name].attr('x', -10 - tooltip_rect[scenario_name].attr('width'))
                tooltip_time[scenario_name].attr('x', - tooltip_rect[scenario_name].attr('width'))
                tooltip_concentration[scenario_name].attr('x', - tooltip_rect[scenario_name].attr('width'))
            }
            var x0 = xRange.invert(d3.pointer(event, this)[0]),
                i = bisecHour(data, x0, 1),
                d0 = data[i - 1],
                d1 = data[i],
                d = x0 - d0.hour > d1.hour - x0 ? d1 : d0;
            focus[scenario_name].attr('transform', 'translate(' + xRange(d.hour) + ',' + yRange(d.concentration) + ')');
            focus[scenario_name].select('#tooltip-time').text('x = ' + time_format(d.hour));
            focus[scenario_name].select('#tooltip-concentration').text('y = ' + d.concentration.toFixed(2));
        }
    }

    // Draw for the first time to initialize.
    redraw();
    update_concentration_plot('concentrations');

    // Redraw based on the new size whenever the browser window is resized.
    window.addEventListener("resize", e => {
        redraw();
        update_concentration_plot('concentrations');
    });
}

function draw_histogram(svg_id, prob, prob_sd) {
    // Add main SVG element
    var plot_div = document.getElementById(svg_id);
    var vis = d3.select(plot_div).append('svg');

    let hist_count = prob_hist_count;
    let hist_bins = prob_hist_bins;

    // X axis:
    var xRange = d3.scaleLinear()
        .domain([0, d3.max(hist_bins)]);
    var xEl = vis.append("svg:g")
    
    // X axis label.
    var xLabel = vis.append('text')
        .attr('class', 'x label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Probability of Infection');

    // set the parameters for the histogram
    var histogram = d3.histogram()
        .value(d => d)
        .domain(xRange.domain())  // then the domain of the graphic
        .thresholds(xRange.ticks(100)); // then the numbers of bins
    
    // And apply this function to data to get the bins  
    var bins = histogram(prob_dist);

    // Y left axis: scale and draw:
    var yRangeLeft = d3.scaleLinear().domain([0, d3.max(hist_count)]);   // d3.hist has to be called before the Y axis obviously
    var yElLeft = vis.append("svg:g").attr('class', 'y axis');

    // Y left axis label.
    var yLabelLeft = vis.append('svg:text')
        .attr('class', 'y label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Density');

    // append the bar rectangles to the svg element
    var histRect = vis.selectAll("rect")
        .data(bins.slice(0, -1))
        .enter()
        .append("rect")
            .attr("x", 1)
            .attr('fill', '#1f77b4');
            
    // Y right axis: scale and draw:
    var yRangeRight = d3.scaleLinear().domain([0, 1]);
    var yElRight = vis.append("svg:g").attr('class', 'y axis');

    // Y right axis label.
    var yLabelRight = vis.append('svg:text')
        .attr('class', 'y label')
        .attr('fill', 'black')
        .attr('text-anchor', 'middle')
        .text('Cumulative Density Function (CDF)');
    
    // CDF Calculation
    let count_sum = hist_count.reduce((partialSum, a) => partialSum + a, 0);
    let pdf = hist_count.map((el, i) => el/count_sum);
    let cdf = pdf.map((sum => value => sum += value)(0));
    // Add the CDF line
    var cdfLine = vis.append("svg:path")
        .datum(cdf)
        .attr("fill", "none")
        .attr("stroke", "lightblue")
        .attr("stroke-width", 1.5);

    // Add the mean dashed line
    var meanLine = vis.append("svg:line")
        .attr("fill", "none")
        .attr('stroke-width', 2)
        .attr('stroke-dasharray', (5, 5))
        .attr("stroke", "grey");

    // Plot tile
    var plotTitle = vis.append("svg:text")
        .attr("text-anchor", "middle")  
        .text(`P(I) -- Mean(SD) = ${prob.toFixed(2)}(${prob_sd.toFixed(2)}) `);

    // CDF line icon
    var cdfLineIcon = vis.append('rect')
        .attr('width', 20)
        .attr('height', 3)
        .style('fill', 'lightblue')
    // CDF line text
    var cdfLineText = vis.append('text').text('CDF')      
    //  Hist icon
    var histIcon = vis.append('rect')
        .attr('width', 20)
        .attr('height', 15)
        .attr('fill', '#1f77b4');
    //  Hist text
    var histText = vis.append('text').text('Histogram');
    // Mean text
    var meanText = vis.append('line')
        .attr('stroke', 'grey')
        .attr('stroke-width', 2)
        .attr('stroke-dasharray', (5, 5));
    var meanLineText = vis.append('text').text('Mean');      

    // Legend Bbox
    var legendBBox = vis.append('rect')
        .attr('width', 120)
        .attr('height', 65)
        .attr('stroke', 'lightgrey')
        .attr('stroke-width', '2')
        .attr('rx', '5px')
        .attr('ry', '5px')
        .attr('stroke-linejoin', 'round')
        .attr('fill', 'none');

    function redraw() {
        // Define width and height according to the screen size.
        var div_width = plot_div.clientWidth;
        var div_height = plot_div.clientHeight;
        graph_width = div_width;
        graph_height = div_height
        var margins = { top: 30, right: 20, bottom: 50, left: 60 };
        if (div_width >= 1000) { // For screens with width > 1000px legend can be on the graph's right side.
            div_width = 1000;
            graph_width = 600;
            const svg_margins = {'margin-left': '0rem'};
            Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val));
        }
        else {
            div_width = div_width * 1.1
            graph_width = div_width * .9;
            graph_height = div_height * .75; // On mobile screen sizes we want the legend to be on the bottom of the graph.
            const svg_margins = {'margin-left': '-1rem'};
            Object.entries(svg_margins).forEach(([prop,val]) => vis.style(prop,val));
        };

        // Use the extracted size to set the size of the SVG element.
        vis.attr("width", div_width)
            .attr('height', div_height);

        // Axis definitions
        xRange.range([margins.left, graph_width - margins.right]);
        xEl.attr("transform", "translate(0," + (graph_height - margins.bottom) + ")").call(d3.axisBottom(xRange));
        xLabel.attr('x', (graph_width + margins.right) / 2).attr('y', graph_height * 0.97);
        
        yRangeLeft.range([graph_height - margins.bottom, margins.top]);
        yElLeft.attr('transform', 'translate(' + margins.left + ',0)').call(d3.axisLeft(yRangeLeft));
        yLabelLeft.attr('x', (graph_height * 0.9 + margins.bottom) / 2)
            .attr('y', (graph_height + margins.left) * 0.9)
            .attr('transform', 'rotate(-90, 0,' + graph_height + ')');
        
        yRangeRight.range([graph_height - margins.bottom, margins.top]);
        yElRight.attr('transform', 'translate(' + (graph_width - margins.right) + ',0)').call(d3.axisRight(yRangeRight));
        yLabelRight.attr('transform', 'rotate(-90, 0,' + graph_height + ')')
            .attr('x', (graph_height + margins.bottom) / 2.1);
        
        if (plot_div.clientWidth >= 1000) yLabelRight.attr('y', graph_width * 1.7);
        else yLabelRight.attr('y', graph_width + 325);

        // Histogram rectangles
        histRect.each(function (d, i) {
            var currentRect = d3.select(this);
            var x0 = xRange(d.x0);
            var x1 = xRange(d.x1);
            var yValue = yRangeLeft(hist_count[i]);
            currentRect
                .attr("transform", "translate(" + x0 + "," + yValue + ")")
                .attr("width", x1 - x0 - 1)
                .attr("height", graph_height - yValue - margins.bottom);
        });

        // CDF line
        cdfLine.attr("d", d3.line()
            .x(function(d, i) { return xRange(hist_bins[i]); })
            .y(function(d) { return yRangeRight(d); }
        ));

        // Mean dashed line
        meanLine.attr("x1", xRange(prob/100))
            .attr("y1", yRangeRight(1))
            .attr("x2", xRange(prob/100))
            .attr("y2", yRangeRight(0));

        // Plot title
        plotTitle.attr("x", xRange(0.5))
            .attr("y", 0 + margins.top);
        
        // Legend for the plot elements
        const size = 15;
        var legend_x_start = 50;
        const space_between_text_icon = 30;
        const text_height = 6;
        if (plot_div.clientWidth >= 1000) {
            // CDF line icon
            cdfLineIcon.attr('x', graph_width + legend_x_start)
                .attr('y', margins.top + size);
            // CDF line text
            cdfLineText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                .attr('y', margins.top + size + text_height);
            // Hist icon
            histIcon.attr('x', graph_width + legend_x_start)
                .attr('y', margins.top + (2 * size));
            // Hist text
            histText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                .attr('y', margins.top + 2 * size + text_height*2);
            // Mean text
            meanText.attr("x1", graph_width + legend_x_start)
                .attr("x2", graph_width + legend_x_start + 20)
                .attr("y1", margins.top + 3.85 * size)
                .attr("y2", margins.top + 3.85 * size);
            // Mean line text
            meanLineText.attr('x', graph_width + legend_x_start + space_between_text_icon)
                .attr('y', margins.top + 3 * size + text_height*3);
            // Legend BBox
            legendBBox.attr('x', graph_width * 1.07)
                .attr('y', margins.top * 1.1);
        }
        else {
            legend_x_start = margins.left + 10;
            // CDF line icon
            cdfLineIcon.attr('x', legend_x_start)
                .attr('y', graph_height + size);
            // CDF line text
            cdfLineText.attr('x', legend_x_start + space_between_text_icon)
                .attr('y', graph_height + size + text_height);
            // Hist icon
            histIcon.attr('x', legend_x_start)
                .attr('y', graph_height + (2 * size));
            // Hist text
            histText.attr('x', legend_x_start + space_between_text_icon)
                .attr('y', graph_height + 2 * size + text_height*2);
            // Mean text
            meanText.attr("x1", legend_x_start)
                .attr("x2", legend_x_start + 20)
                .attr("y1", graph_height + 3.85 * size)
                .attr("y2", graph_height + 3.85 * size);
            // Mean line text
            meanLineText.attr('x', legend_x_start + space_between_text_icon)
                .attr('y', graph_height + 3 * size + text_height*3);
            // Legend BBox
            legendBBox.attr('x', margins.left)
                .attr('y', graph_height + 4);
        }
    }

    // Draw for the first time to initialize.
    redraw();

    // Redraw based on the new size whenever the browser window is resized.
    window.addEventListener("resize", e => {
        redraw();
    });
}

function copy_clipboard(shareable_link) {

    $("#mobile_link").attr('title', 'Copied!')
          .tooltip('_fixTitle')
          .tooltip('show');
          
    navigator.clipboard.writeText(shareable_link);
}

function check_download_button() {
    // Handle the disable property of the download button
    let download_button = document.getElementById('downloadCSV');
    document.querySelectorAll('input[type="checkbox"]:checked').length <= 1 ? download_button.disabled = true : download_button.disabled = false;
}

function display_column_name_warning(checked) {
    let warning_element = document.getElementById("alternative_scenario_warning");
    checked ? warning_element.style.display = 'flex' : warning_element.style.display = 'none';
}

function display_rename_column(bool, id) {
    check_download_button();
    // Change the visibility of renaming section
    if (bool) document.getElementById(id).style.display = 'flex';
    else document.getElementById(id).style.display = 'none';
}

function conditional_probability_plot(value, is_generated) {
    // If the image was previously generated, there is no need to reload the page.
    if (value && is_generated == 1) {
        document.getElementById('conditional_probability_div').style.display = 'block'
    }
    else if (value && is_generated == 0) {
        document.getElementById('label_conditional_probability_plot').innerHTML = `<span id="loading_spinner" class="spinner-border spinner-border-sm mr-2 mt-0" role="status" aria-hidden="true"></span>Loading...`;
        document.getElementById('conditional_probability_plot').setAttribute('disabled', true);
        document.cookie = `conditional_plot= 1; path=/`;
        window.location.reload();
    }
    else document.getElementById('conditional_probability_div').style.display = "none";
}

function export_csv() {
    // This function generates a CSV file according to the user's input.
    // It is composed of a list of lists. 
    // The first item of the main list corresponds to the columns' name.
    // The remaining items correspond to each of the file row, i.e. the 
    // respective data from the selected inputs.

    let final_export = [];
    // Verify which items are checked
    let export_lists = document.getElementsByName('checkedItems');
    let checked_items = []; // The column to be added, with the id to be identified.
    let checked_names = []; // The column with the respective rename.
    let has_alternative_scenario = false;
    export_lists.forEach(e => {
        if (e.checked) {
            if (e.id == "Alternative Scenarios") {
                Object.entries(alternative_scenarios).map((scenario) => {
                    if (scenario[0] != 'Current scenario') {
                        checked_names.push(`Alternative scenario concentration - ${scenario[0]} \u2028(virions m⁻³)`);
                        has_alternative_scenario = true;
                    };
                });
            }
            else if (e.id == "Cumulative Dose") {
                var has_rename = document.getElementById(`${e.id}__rename`).value;
                var column_name = has_rename != '' ? has_rename : e.id;
                if (short_range_expirations.length > 0) {
                    checked_names.push(`Long-Range ${column_name} \u2028(infectious virus)`);
                    checked_items.push('Long-Range Dose');
                    // When we have short range interactions, we want the column for the cumulative dose to have the "Total" word before the column name
                    checked_names.push(`Total ${column_name} \u2028(infectious virus)`); 
                }
                else {
                    checked_names.push(`${column_name} \u2028(infectious virus)`);
                }
                checked_items.push(e.id);
            }
            else {
                var has_rename = document.getElementById(`${e.id}__rename`).value;
                var column_name = has_rename != '' ? has_rename : e.id;
                if (e.id == "Time") checked_names.push(`${column_name} \u2028(h)`);
                else if (e.id == "Concentration") checked_names.push(`${column_name} \u2028(virions m⁻³)`);
                else if (e.id == "CO2_Concentration") checked_names.push(`${column_name} \u2028(ppm)`);
                checked_items.push(e.id);
            }
        }
    });
    final_export.push(checked_names);

    // Add data for each column.
    times.forEach((e, i) => {
        let this_row = [];
        checked_items.includes("Time") && this_row.push(times[i].toFixed(2));
        checked_items.includes("Concentration") && this_row.push(concentrations[i]);
        checked_items.includes("Cumulative Dose") && this_row.push(cumulative_doses[i]);
        checked_items.includes("Long-Range Dose") && this_row.push(long_range_cumulative_doses[i]);
        checked_items.includes("CO2_Concentration") && this_row.push(CO2_concentrations[Object.keys(CO2_concentrations)[0]].concentrations[i]);
        if (has_alternative_scenario) {
            Object.entries(alternative_scenarios).map((scenario) => {
                if (scenario[0] != 'Current scenario') {
                    this_row.push(scenario[1].concentrations[i]);
                };
            });
        };
        final_export.push(this_row);
    });

    // Prepare the CSV file.
    let csvContent = "data:text/csv;charset=utf8," 
        + final_export.map(e => e.join(",")).join("\n");
    var encodedUri = encodeURI(csvContent);
    // Set a name for the file.
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "report_data.csv");
    document.body.appendChild(link);
    link.click();    
}