28:null 29:["$","title",null,{"children":"Core: Visualizations | MARGO Climate framework | Observable"}] 2e:T5b2,multiplier = (unit, factor = 2, suffix = "%") => { const input = html``; const output = html``; // const output = html``; const left = Math.round(100 / factor) + "%"; const right = Math.round(100 * factor) + "%"; const reset = html`

`; const span = html`

${left}${input}${right}${reset}

`; const on_slider = () => { output.value = Math.round(100 * Math.pow(factor, input.value)); input.title = Math.round(100 * Math.pow(factor, input.value)) + "%"; reset.style.opacity = input.valueAsNumber == 0 ? "0" : "1"; }; input.oninput = on_slider; on_slider(); // const on_box = () => { // input.value = output.value; // reset.style.opacity = input.valueAsNumber == 100 ? "0" : "1"; // }; // output.oninput = on_box; reset.onclick = () => { input.value = 0; on_slider(); span.dispatchEvent(new CustomEvent("input", {})); }; Object.defineProperty(span, "value", { get: () => unit * Math.pow(factor, input.value), set: val => { input.value = Math.log2(val / unit) / Math.log2(factor); on_slider(); } }); return span; }2f:T54e,// multiplier = (unit, factor = 2, suffix = "%") => { // const input = html``; // const output = html``; // // const output = html``; // const reset = html`

`; // const span = html`${input}${output}${suffix}${reset}`; // const on_slider = () => { // output.value = Math.round(100 * Math.pow(factor, input.value)); // reset.style.opacity = input.valueAsNumber == 0 ? "0" : "1"; // }; // input.oninput = on_slider; // on_slider(); // // const on_box = () => { // // input.value = output.value; // // reset.style.opacity = input.valueAsNumber == 100 ? "0" : "1"; // // }; // // output.oninput = on_box; // reset.onclick = () => { // input.value = 0; // on_slider(); // span.dispatchEvent(new CustomEvent("input", {})); // }; // Object.defineProperty(span, "value", { // get: () => unit * Math.pow(factor, input.value), // set: val => { // input.value = Math.log2(val / unit) / Math.log2(factor); // on_slider(); // } // }); // return span; // } null30:T44d,/* multiplier = (unit, suffix = "") => { const input = html``; const output = html``; // const output = html``; const reset = html`

`; const span = html`${input}${output}${suffix}${reset}`; const on_slider = () => { span.value = (unit * input.value) / 100; output.value = span.value; reset.style.opacity = input.valueAsNumber == 100 ? "0" : "1"; }; input.oninput = on_slider; on_slider(); const on_box = () => { span.value = clamp(output.value, unit * .5, unit * 2); input.value = (span.value / unit) * 100; reset.style.opacity = input.valueAsNumber == 100 ? "0" : "1"; }; output.oninput = on_box; reset.onclick = () => { input.value = 100; on_slider(); span.dispatchEvent(new CustomEvent("input", {})); }; return span; } */ null31:Te9a,function generate(model = "forward") { const climate_parameter_views = model === "opt" ? { opt: { T_max: new View(2.0), allow_overshoot: new View(false), enable: { M: new View(true), R: new View(true), G: new View(false), A: new View(false) } }, economics: to_views(default_economics), physics: to_views(default_physics) } : model === "forward" ? { forward: { controls: { M: { mean: new View(2080), magnitude: new View(0.7), enabled: new View(true) }, R: { mean: new View(2120), magnitude: new View(0.2), enabled: new View(true) }, G: { mean: new View(2200), magnitude: new View(0.0), enabled: new View(false) }, A: { mean: new View(2200), magnitude: new View(0.0), enabled: new View(false) } } }, economics: to_views(default_economics), physics: to_views(default_physics) } : { forward_emissions: { controls: { emissions_1: { mean: new View(2080), magnitude: new View(0.7), enabled: new View(true) } } }, economics: to_views(default_economics), physics: to_views(default_physics) }; const hovered_subject = new View(""); const display_parameter_views = { show_intermediates: new View(false), concentrations: { relative_to_1700: new View(true) }, controls: { show_costs: new View(true) }, costs: { show: { baseline: new View(true), controls: new View(true), damages: new View(true) } }, climate_panels: new View("E") }; const climate_parameters = new View(); const display_parameters = new View(); const result = new View(); const obj = { climate_parameters: climate_parameters, climate_parameter_views: climate_parameter_views, display_parameters: display_parameters, display_parameter_views: display_parameter_views, hovered_subject: hovered_subject, result: result }; bundle_nested_views(climate_parameter_views, climate_parameters); bundle_nested_views(display_parameter_views, display_parameters); async_foreach(Generators.input(climate_parameters), async params => { // console.info( // "New params", // params, // transform_climate_parameters(params, model) // ); result.value = await margo_client.sendreceive( model === "opt" ? "opt_controls_temp" : "forward_controls_temp", { dt: year_step, ...transform_climate_parameters(params, model) } ); // console.log(result.value); }); obj.charts = { controls: control_graph_stacked(obj), controls_clone: control_graph_stacked(obj), temperature: temperature_graph(obj), temperature_clone: temperature_graph(obj), costs: costs_graph(obj), costs_clone: costs_graph(obj), emissions: emissions_graph(obj), emissions_clone: emissions_graph(obj), concentrations: concentrations_graph(obj), concentrations_clone: concentrations_graph(obj), controls_input: controls_input(obj), controls_input_clone: controls_input(obj), emissions_input: emissions_input(obj), emissions_input_clone: emissions_input(obj) }; return obj; }32:T1229,controls_input = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { const node = DOM.svg(width, height); const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO controls connecting no_touch_action"); node.onselectstart = () => false; // // Setup s.append("g").call(axis.year); s.append("g").call(axis.percent); add_connecting_warning(s); add_series(s); add_legend(s); add_infeasibility_warning(s); const control_input_node = s.append("g").classed("control_input_node", true); // // Mouse interaction var dragging = null; const handle_mouse = e => { if (dragging.length === 1 && "MRGA".includes(dragging)) { if (climate_parameter_views.forward != null) { const p = climate_parameter_views.forward.controls[dragging]; if (p.enabled.value) { p.mean.value = invert_clamp( scale.year, e.clientX - node.getBoundingClientRect().left ); p.magnitude.value = invert_clamp( scale.percent, e.clientY - node.getBoundingClientRect().top ); } } } }; node.addEventListener("pointerdown", e => { dragging = e.target.id; node.addEventListener("pointermove", handle_mouse); handle_mouse(e); }); const mouseup = e => { node.removeEventListener("pointermove", handle_mouse); dragging = null; }; document.addEventListener("pointerup", mouseup); document.addEventListener("pointerleave", mouseup); // // Update const update_input = new_parameters => { if (new_parameters.forward != null) { control_input_node .selectAll("circle") .data(Object.entries(new_parameters.forward.controls)) .join("circle") .attr("id", d => d[0]) // .transition() // .duration(300) .attr('r', 8) .attr('cx', d => scale.year(d[1].mean)) .attr('cy', d => scale.percent(d[1].magnitude)) .attr('stroke', d => colors[d[0]]) .attr('stroke-width', 8) .attr('stroke-opacity', .2) // .attr('stroke-dasharray', ({ dasharray = undefined }) => dasharray) // .attr('stroke-miterlimit', d => 1) // .attr('opacity', ({ opacity = 1.0 }) => opacity) .attr('fill', d => colors[d[0]]) .classed('hidden', d => !d[1].enabled); } }; const update_output = (new_result, new_display_parameters) => { if (climate_parameter_views.forward == null) { return; } s.classed("infeasible", !status_ok(new_result)); const [M, R, G, A] = get_MRGA(new_result, false); const all = [ { vals: A, line: colors.A, subject: "A", opacity: climate_parameter_views.forward.controls.A.enabled.value ? 1.0 : 0.0 }, { vals: G, line: colors.G, subject: "G", opacity: climate_parameter_views.forward.controls.G.enabled.value ? 1.0 : 0.0 }, { vals: R, line: colors.R, subject: "R", opacity: climate_parameter_views.forward.controls.R.enabled.value ? 1.0 : 0.0 }, { vals: M.slice(0, years_before_end_of_oil), line: colors.M, subject: "M", opacity: climate_parameter_views.forward.controls.M.enabled.value ? 1.0 : 0.0 } ]; series( s, scale.year, scale.percent, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all.filter(x => x.opacity === 1.0)); s.all = all; s.classed("connecting", false); }; // const update_hover = new_subject => { // subject_opacity(s.select("g.series.fills"), hovered_subject.value); // const show_total = new_subject === "controls"; // s.selectAll("#controls").attr( // "style", // show_total ? undefined : "display: none" // ); // }; // async_foreach(Generators.input(hovered_subject), () => { // update_hover(hovered_subject.value); // }); // async_foreach(Generators.input(display_parameters), () => { // update_output(result.value, display_parameters.value); // update_hover(hovered_subject.value); // }); async_foreach(Generators.input(climate_parameters), () => { update_input(climate_parameters.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); // update_hover(hovered_subject.value); }); return s; }33:T10dc,emissions_input = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { // // Setup const node = DOM.svg(width, height); node.onselectstart = () => false; const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO emissions connecting no_touch_action"); s.append("g") .call(axis.year) .attr("transform", `translate(0 ${scale.emissions(0.0)})`); s.append("g").call(axis.emissions); add_y_axis_label(s, "ppm / year"); const patterns = add_all_patterns(s, .5); add_connecting_warning(s); add_series(s); add_legend(s); add_infeasibility_warning(s); const control_input_node = s.append("g").classed("control_input_node", true); // // Mouse interaction var dragging = null; const handle_mouse = e => { if (climate_parameter_views.forward_emissions != null) { const p = climate_parameter_views.forward_emissions.controls[dragging]; if (p != null) { if (p.enabled.value) { p.mean.value = invert_clamp( scale.year, e.clientX - node.getBoundingClientRect().left ); p.magnitude.value = invert_clamp( scale.percent, e.clientY - node.getBoundingClientRect().top ); } } } }; node.addEventListener("pointerdown", e => { dragging = e.target.id; node.addEventListener("pointermove", handle_mouse); handle_mouse(e); }); const mouseup = e => { node.removeEventListener("pointermove", handle_mouse); dragging = null; }; document.addEventListener("pointerup", mouseup); document.addEventListener("pointerleave", mouseup); // // Update const update_input = new_parameters => { if (new_parameters.forward_emissions != null) { control_input_node .selectAll("circle") .data(Object.entries(new_parameters.forward_emissions.controls)) .join("circle") .attr("id", d => d[0]) // .transition() // .duration(300) .attr('r', 8) .attr('cx', d => scale.year(d[1].mean)) .attr('cy', d => scale.percent(d[1].magnitude)) .attr('stroke', d => colors[d[0]]) .attr('stroke-width', 8) .attr('stroke-opacity', .2) // .attr('stroke-dasharray', ({ dasharray = undefined }) => dasharray) // .attr('stroke-miterlimit', d => 1) // .attr('opacity', ({ opacity = 1.0 }) => opacity) .attr('fill', d => colors[d[0]]) .classed('hidden', d => !d[1].enabled); } }; const update_output = (new_result, new_display_parameters) => { if (climate_parameter_views.forward_emissions == null) { return; } s.classed("infeasible", !status_ok(new_result)); const all = [ { vals: new_result.computed.emissions.baseline, line: colors.baseline, dasharray: "5,5", subject: "baseline_emissions" }, { vals: new_result.computed.emissions.MRGA, fill: colors.emissions, line: colors.emissions, subject: "emissions" } ]; series( s, scale.year, scale.emissions, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all); s.classed("connecting", false); }; // const update_hover = new_subject => { // subject_opacity(s.select("g.series.fills"), hovered_subject.value); // const show_total = new_subject === "controls"; // s.selectAll("#controls").attr( // "style", // show_total ? undefined : "display: none" // ); // }; // async_foreach(Generators.input(hovered_subject), () => { // update_hover(hovered_subject.value); // }); // async_foreach(Generators.input(display_parameters), () => { // update_output(result.value, display_parameters.value); // update_hover(hovered_subject.value); // }); async_foreach(Generators.input(climate_parameters), () => { update_input(climate_parameters.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), "asdfasdf"); // update_hover(hovered_subject.value); }); return s; }34:Tcde,control_graph_stacked = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { const node = DOM.svg(width, height); node.onselectstart = () => false; const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO controls connecting"); // // Setup s.append("g").call(axis.year); const y_axis_costs = s.append("g"); y_axis_costs.append("g").call(axis.costs_S); add_y_axis_label(y_axis_costs, "trillion USD / year"); const y_axis_percent = s.append("g").call(axis.percent); add_connecting_warning(s); add_series(s); add_legend(s); add_infeasibility_warning(s); // // Update const update_output = (new_result, new_display_parameters) => { s.classed("infeasible", !status_ok(new_result)); y_axis_costs.classed("hidden", !new_display_parameters.controls.show_costs); y_axis_percent.classed( "hidden", new_display_parameters.controls.show_costs ); const [M, R, G, A] = get_MRGA( new_result, new_display_parameters.controls.show_costs ); const stacked = new_display_parameters.controls.show_costs; const show_total = new_display_parameters.controls.show_costs; const all = [ { vals: stacked ? plus(plus(plus(M, R), G), A) : A, prev_stack: stacked ? plus(plus(M, R), G) : null, fill: stacked ? colors.A : null, line: colors.A, subject: "A" }, { vals: stacked ? plus(plus(M, R), G) : G, prev_stack: stacked ? plus(M, R) : null, fill: stacked ? colors.G : null, line: colors.G, subject: "G" }, { vals: stacked ? plus(M, R) : R, prev_stack: stacked ? M : null, fill: stacked ? colors.R : null, line: colors.R, subject: "R" }, { vals: stacked ? M : M.slice(0, years_before_end_of_oil), prev_stack: null, fill: stacked ? colors.M : null, line: colors.M, subject: "M" }, { vals: new_result.computed.costs.MRGA.discounted, fill: show_total ? colors.controls : undefined, line: undefined, subject: "controls" // opacity: .5 } ]; series( s, scale.year, new_display_parameters.controls.show_costs ? scale.costs_S : scale.percent, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all); s.all = all; s.classed("connecting", false); }; const update_hover = new_subject => { subject_opacity(s.select("g.series.fills"), hovered_subject.value); const show_total = new_subject === "controls"; s.selectAll("#controls").attr( "style", show_total ? undefined : "display: none" ); }; async_foreach(Generators.input(hovered_subject), () => { update_hover(hovered_subject.value); }); async_foreach(Generators.input(display_parameters), () => { update_output(result.value, display_parameters.value); update_hover(hovered_subject.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); update_hover(hovered_subject.value); }); return s; }35:T12c7,temperature_graph = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { const node = DOM.svg(width, height); node.onselectstart = () => false; // // Mouse interaction const handle_mouse = e => { const new_temp = scale.temperature.invert( e.clientY - node.getBoundingClientRect().top ); if (climate_parameter_views.opt != null) { climate_parameter_views.opt.T_max.value = Math.max( scale.temperature.domain()[0], Math.min(scale.temperature.domain()[1], new_temp) ); } }; node.addEventListener("pointerdown", e => { node.addEventListener("pointermove", handle_mouse); handle_mouse(e); }); const mouseup = e => { node.removeEventListener("pointermove", handle_mouse); }; document.addEventListener("pointerup", mouseup); document.addEventListener("pointerleave", mouseup); // // Setup const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO temperature connecting"); s.append("g").call(axis.year); s.append("g").call(axis.temperature); add_connecting_warning(s); // s.append("text") // .attr("transform", "translate(-7 -7)") // .append("textPath") // .attr("xlink:href", "#temperature_baseline") // .attr("startOffset", "25%") // .text("Business as usual"); const warning_bands = s.append("g").attr("class", "paris"); horizontal_band( warning_bands, scale.temperature, 3.0, Infinity, colors.above_paris ); horizontal_band( warning_bands, scale.temperature, 2.0, Infinity, colors.above_paris ); add_series(s); add_legend(s); add_infeasibility_warning(s); const patterns = add_all_patterns(s, .5); const T_max_line = s .append("g") .attr("class", "T_max") .append("line") .attr('x1', scale.year(year_start)) .attr('x2', scale.year(year_end)) .attr('stroke', colors.T_max) .attr('stroke-width', 2); // // Update const update_output = (new_result, new_display_parameters) => { s.classed("infeasible", !status_ok(new_result)); const fill_intermediate = new_display_parameters.show_intermediates; const intermediates = [ { vals: new_result.computed.temperatures.MRGA, prev_stack: new_result.computed.temperatures.baseline, fill: fill_intermediate ? "white" : undefined, subject: undefined, opacity: 1.0 }, { vals: new_result.computed.temperatures.M, prev_stack: new_result.computed.temperatures.baseline, fill: fill_intermediate ? patterns.M : undefined, subject: "M" }, { vals: new_result.computed.temperatures.MR, prev_stack: new_result.computed.temperatures.M, fill: fill_intermediate ? patterns.R : undefined, subject: "R" }, { vals: new_result.computed.temperatures.MRG, prev_stack: new_result.computed.temperatures.MR, fill: fill_intermediate ? patterns.G : undefined, subject: "G" }, { vals: new_result.computed.temperatures.MRGA, prev_stack: new_result.computed.temperatures.MRG, fill: fill_intermediate ? patterns.A : undefined, subject: "A" } ]; const all = [ { vals: new_result.computed.temperatures.baseline, line: colors.baseline, dasharray: "5,5", subject: "baseline_temperature" }, ...intermediates, { vals: new_result.computed.temperatures.MRGA, line: colors.temperature, subject: "temperature" } ]; series( s, scale.year, scale.temperature, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all); s.classed("connecting", false); }; async_foreach(Generators.input(climate_parameters), cp => { const T_max_interact = cp.opt != null; if (T_max_interact) { T_max_line.attr('y1', scale.temperature(cp.opt.T_max)).attr( 'y2', scale.temperature(cp.opt.T_max) ); } T_max_line.classed("hidden", !T_max_interact); s.classed("cursor_move_vertical", T_max_interact); }); async_foreach(Generators.input(hovered_subject), () => { subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(display_parameters), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); return s; }36:Ta8e,costs_graph = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { const node = DOM.svg(width, height); node.onselectstart = () => false; const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO costs connecting"); s.append("g").call(axis.year); s.append("g").call(axis.costs_L); add_y_axis_label(s, "trillion USD / year"); add_connecting_warning(s); add_series(s); add_legend(s); add_infeasibility_warning(s); s.append("g").attr("class", "cost_labels"); s.update_input = (result, { temp_goal }, { hovered_subject }) => { subject_opacity(s.select("g.series.fills"), hovered_subject.value); }; const update_output = (new_result, new_display_parameters) => { s.classed("infeasible", !status_ok(new_result)); const all = [ ...(new_display_parameters.costs.show.baseline ? [ { vals: new_result.computed.damages.baseline.discounted, fill: colors.baseline, line: colors.baseline, dasharray: "5,5", subject: "baseline_damages" } ] : []), ...(new_display_parameters.costs.show.controls ? [ { vals: plus( new_result.computed.costs.MRGA.discounted, new_result.computed.damages.MRGA.discounted ), prev_stack: new_result.computed.damages.MRGA.discounted, fill: colors.controls, line: colors.controls, subject: "controls" } ] : []), ...(new_display_parameters.costs.show.damages ? [ { vals: new_result.computed.damages.MRGA.discounted, fill: colors.damages, line: colors.damages, subject: "damages" } ] : []) ]; series( s, scale.year, scale.costs_L, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all); s.classed("connecting", false); }; async_foreach(Generators.input(hovered_subject), () => { subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(display_parameters), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); return s; }37:T9a6,emissions_graph = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { // // Setup const node = DOM.svg(width, height); node.onselectstart = () => false; const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO emissions connecting"); s.append("g") .call(axis.year) .attr("transform", `translate(0 ${scale.emissions(0.0)})`); s.append("g").call(axis.emissions); add_y_axis_label(s, "ppm / year"); const patterns = add_all_patterns(s, .5); add_connecting_warning(s); add_series(s); add_legend(s); add_infeasibility_warning(s); // // Update const update_output = (new_result, new_display_parameters) => { s.classed("infeasible", !status_ok(new_result)); const fill_intermediate = new_display_parameters.show_intermediates; const line_intermediate = false; const intermediates = [ { vals: new_result.computed.emissions.M, prev_stack: new_result.computed.emissions.baseline, fill: fill_intermediate ? patterns.M : undefined, subject: "M" }, { vals: new_result.computed.emissions.MRGA, prev_stack: new_result.computed.emissions.M, fill: fill_intermediate ? patterns.R : undefined, subject: "R" } ]; const all = [ { vals: new_result.computed.emissions.baseline, line: colors.baseline, dasharray: "5,5", subject: "baseline_emissions" }, ...intermediates, { vals: new_result.computed.emissions.MRGA, fill: colors.emissions, line: colors.emissions, subject: "emissions" } ]; series( s, scale.year, scale.emissions, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all); s.classed("connecting", false); }; async_foreach(Generators.input(hovered_subject), () => { subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(display_parameters), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); return s; }38:Td3b,concentrations_graph = ({ climate_parameters, climate_parameter_views, display_parameters, hovered_subject, result }) => { // // Setup const node = DOM.svg(width, height); node.onselectstart = () => false; const s = d3.select(node); s.append("style").text(style); s.attr("class", "MARGO concentrations connecting"); s.append("g") .call(axis.year) .attr("transform", `translate(0 ${scale.concentrations(0.0)})`); const y_axis_absolute = s.append("g"); y_axis_absolute.append("g").call(axis.concentrations); y_axis_absolute .append("text") .text("ppm") .attr("y", 30) .attr("x", 5) .attr("text-anchor", "start") .attr("style", "font-style: italic") .attr("opacity", .6); // add_y_axis_label(y_axis_absolute, "ppm", 0); const y_axis_relative = s.append("g").call(axis.concentrations_relative); const patterns = add_all_patterns(s, .5); add_connecting_warning(s); add_series(s); add_legend(s); add_infeasibility_warning(s); // // Update const update_output = (new_result, new_display_parameters) => { s.classed("infeasible", !status_ok(new_result)); const relative_to_1700 = new_display_parameters.concentrations.relative_to_1700; const rel_scale = relative_to_1700 ? x => x / 280 : x => x; y_axis_absolute.classed("hidden", relative_to_1700); y_axis_relative.classed("hidden", !relative_to_1700); const fill_intermediate = new_display_parameters.show_intermediates; const line_intermediate = false; const intermediates = [ { vals: new_result.computed.concentrations.M.map(rel_scale), prev_stack: new_result.computed.concentrations.baseline.map(rel_scale), fill: fill_intermediate ? patterns.M : undefined, line: line_intermediate ? colors.M : undefined, subject: "M" }, { vals: new_result.computed.concentrations.MRGA.map(rel_scale), prev_stack: new_result.computed.concentrations.M.map(rel_scale), fill: fill_intermediate ? patterns.R : undefined, line: line_intermediate ? colors.R : undefined, subject: "R" } ]; const all = [ { vals: new_result.computed.concentrations.baseline.map(rel_scale), line: colors.baseline_concentrations, dasharray: "5,5", subject: "baseline_concentrations" }, ...intermediates, { vals: new_result.computed.concentrations.MRGA.map(rel_scale), line: colors.concentrations, subject: "concentrations" } ]; series( s, scale.year, relative_to_1700 ? scale.concentrations_relative : scale.concentrations, domain_array(new_result.model_parameters.domain), all, hovered_subject ); legend_items(s, all); s.classed("connecting", false); }; async_foreach(Generators.input(hovered_subject), () => { subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(display_parameters), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); async_foreach(Generators.input(result), () => { update_output(result.value, display_parameters.value); subject_opacity(s.select("g.series.fills"), hovered_subject.value); }); return s; }39:T458,legend_items = (group, items) => { const data = items; group .select("g.legend") .selectAll("g") .data(data.filter(d => d.line || d.fill), d => d.subject) .join( enter => { const g = enter .append("g") .attr("id", d => d.subject) .attr("transform", (d, i) => `translate(0 ${25 * i})`); g.append("text") .text(d => (names[d.subject] ? names[d.subject] : d.subject)) .attr("y", 10) .attr("x", 20); const [a, b] = [0, 0].map(() => g .append("rect") .attr("width", 10) .attr("height", d => (d.fill ? 10 : 1)) .attr("y", d => (d.fill ? 0 : 4)) ); a.attr("fill", d => d.fill).attr( "opacity", ({ opacity = .3 }) => opacity ); b.attr("fill", "none") .attr("stroke", d => (d.line ? d.line : colors[d.subject])) .attr("stroke-width", 2) .attr("rx", 2); }, update => { update.attr("transform", (d, i) => `translate(0 ${25 * i})`); } ); }3a:T4a7,style = ` @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); svg.MARGO { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } svg.MARGO.no_touch_action { touch-action: none; } svg.MARGO.connecting>* { opacity: .2; } svg.MARGO.connecting>g.callout { opacity: unset; } svg.MARGO text.infeasibility_warning, svg.MARGO text.connecting_warning { display: none; } svg.MARGO g.callout text { font-size: 30px; font-family: "Source Serif Pro", serif; font-style: italic; font-weight: 600; } svg.MARGO.infeasible text.infeasibility_warning { display: unset; } svg.MARGO.connecting text.connecting_warning { display: unset; } svg.MARGO g.series, svg.MARGO g.series.fills { transition: opacity .2s; } svg.MARGO.infeasible g.series, svg.MARGO.infeasible g.series.fills { opacity: .0; } svg.MARGO text { font-family: "Roboto"; font-size: 14px; } .cursor_move_vertical{ cursor: ns-resize; } .control_input_node { cursor: move; } /* svg.MARGO g.series.fills path { opacity: .1; } svg.MARGO g.series.fills path:hover { opacity: .3; } */ svg.MARGO .hidden { display: none; } `3b:T7cf,axis = ({ year: g => g .attr("class", "axis year") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(scale.year) .ticks(width / 80, "f") .tickSizeOuter(0) ), costs_S: g => g .attr("class", "axis costs_S") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(scale.costs_S).ticks(height / 40)), //.tickFormat() costs_L: g => g .attr("class", "axis costs_L") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(scale.costs_L).ticks(height / 40)), //.tickFormat() percent: g => g .attr("class", "axis percent") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(scale.percent).ticks(height / 40, "%")), temperature: g => g .attr("class", "axis temperature") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(scale.temperature) // .tickValues(d3.range(0, scale.temperature.domain()[1] + 1)) .tickValues([0, 1, 2, 3]) .tickSizeOuter(0) //.ticks(height / 40) .tickFormat(d => "+" + d3.format(".0f")(d) + " °C") ), emissions: g => g .attr("class", "axis emissions") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(scale.emissions).ticks(height / 40)), concentrations: g => g .attr("class", "axis emissions") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(scale.concentrations).ticks(height / 40)), concentrations_relative: g => g .attr("class", "axis emissions") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(scale.concentrations_relative) .tickValues([1, 2, 3, 4]) .tickSizeOuter(0) //.ticks(height / 40) .tickFormat(d => d3.format(".0f")(d) + "x") ) })3c:[] 2c:{"id":"f0e6a2fd28a5fef8","slug":"visualizations","title":"Core: Visualizations","thumbnail":"2681e15ca435d1f87b26d19104d0d3a3d107ae750f901e1da5bec34b03b58d6c","access_level":"public","create_time":"$D2020-08-07T15:16:00.841Z","update_time":"$D2021-05-19T14:04:10.966Z","view_time":null,"first_public_time":"$D2020-08-18T12:37:57.809Z","has_unpublished_edits":null,"fork":{"id":"b35794049f0ac63b","slug":"plots","title":"Attic: Old visualizations","owner":{"id":"d50c1b9be1f36075","login":"margo","name":"MARGO Climate framework"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d50c1b9be1f36075","login":"margo","name":"MARGO Climate framework","avatar_url":"https://avatars-next.observableusercontent.com/8b992c689b5bb260e9385dac0fab6d33f5989a7d6e9db4a92a7b583d85e915b9","tier":"starter_2024"},"version":1809,"publish_version":1809,"role":null,"authored":false,"authors":[{"type":"individual","id":"6aca374b28a4bb6d","login":"olivier_plas_123456","name":"","avatar_url":null,"tier":null}],"members":[{"type":"team","id":"d50c1b9be1f36075","login":"margo","name":"MARGO Climate framework","avatar_url":"https://avatars-next.observableusercontent.com/8b992c689b5bb260e9385dac0fab6d33f5989a7d6e9db4a92a7b583d85e915b9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Core: Visualizations","cells":[{"id":803,"value":"md`# Core: _Visualizations_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"title","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"margo_intro_short","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"notebook_intro","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"md` _Model:_ ${which_model_view.bind(\n click_cycle([\n { label: 'Optimize', value: \"opt\" },\n { label: 'Forward', value: \"forward\" },\n { label: 'Forward emissions', value: \"forward_emissions\" }\n ])\n)}\n\n> _(Click 👆 to change the model type)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"which_model === \"opt\"\n ? md`*Maximum temperature:* \n\n${html`

0.0 C ${m.climate_parameter_views.opt.T_max.bind(\n html``\n)} 5.0 C

`}\n\n_Temperature overshoot:_ ${m.climate_parameter_views.opt.allow_overshoot.bind(\n click_cycle([\n { label: 'Not allowed', value: false },\n { label: 'Allowed', value: true }\n ])\n )}\n`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"which_model === \"opt\"\n ? html`\n

Which controls?

\n\n\n\n\n\n\n\n\n\n${Object.entries(m.climate_parameter_views.opt.enable).map(\n ([k, v]) =>\n html``\n)}\n\n

	Enabled?	Cost multiplier
${k}	${v.bind(\n html``\n )}	${m.climate_parameter_views.economics[\n MRGA_medium_names[k] + \"_cost\"\n ].bind(\n multiplier(default_economics[MRGA_medium_names[k] + \"_cost\"], 4)\n )}

Other parameters

\n\n\n\n\n\n\n\n\n\n\n\n\n\n

	Value multiplier
Climate sensitivity (B)	${m.climate_parameter_views.physics.B.bind(\n multiplier(default_physics.B)\n )}
Damage parameter (β)	${m.climate_parameter_views.economics.β.bind(\n multiplier(default_economics.β)\n )}
Discount rate (ρ)	${m.climate_parameter_views.economics.ρ.bind(\n multiplier(default_economics.ρ)\n )}

`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"which_model === \"forward\"\n ? md`\n## Manual controls\n\n_Click and drag to interact!_\n\n${m.charts.controls_input.node()}`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"which_model === \"opt\"\n ? md`## Optimal controls\n\n${m.charts.controls.node()}\n\n_Control deployment unit:_ ${m.display_parameter_views.controls.show_costs.bind(\n click_cycle([\n { label: 'Cost', value: true },\n { label: 'Saturation', value: false }\n ])\n )}\n`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"which_model === \"forward_emissions\"\n ? md`\n## Manual controls\n\n_Click and drag to interact!_\n\n${m.charts.emissions_input.node()}`\n : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`## CO₂ emissions\n\n${m.charts.emissions.node()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Costs & damages\n\n${m.charts.costs.node()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## Global warming since 1800 average\n\n_Click and drag to interact!_\n\n${m.charts.temperature.node()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`_Show effects:_ ${m.display_parameter_views.show_intermediates.bind(\n click_cycle([\n { label: 'Total', value: false },\n { label: 'Per phase', value: true }\n ])\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"add_y_axis_label = (s, text, offset = 20) => {\n const label_group = s\n .append(\"g\")\n .attr(\"transform\", `translate(10,${offset})`);\n\n // label_group\n // .append(\"text\")\n // .text(\"Cost\")\n // .attr(\"text-anchor\", \"end\")\n // .attr(\"style\", \"font-weight: bold\")\n // .attr(\"transform\", \"rotate(-90) translate(-7,0)\");\n\n label_group\n .append(\"text\")\n .text(text)\n .attr(\"text-anchor\", \"end\")\n .attr(\"style\", \"font-style: italic\")\n .attr(\"opacity\", .6)\n .attr(\"transform\", \"rotate(-90)\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`## CO₂ concentrations\n\n${m.charts.concentrations.node()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`_Concentrations unit:_ ${m.display_parameter_views.concentrations.relative_to_1700.bind(\n click_cycle([\n { label: 'Relative to pre-1700', value: true },\n { label: 'Parts per million', value: false }\n ])\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"m = generate(which_model)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"which_model_view = new View(\"opt\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"viewof which_model = which_model_view","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"transform_climate_parameters = (p, model) =>\n model === \"opt\"\n ? {\n opt_parameters: {\n temp_overshoot: p.opt.allow_overshoot ? 999.0 : p.opt.T_max,\n temp_goal: p.opt.T_max,\n max_deployment: {\n mitigate: p.opt.enable.M ? 1 : 0,\n remove: p.opt.enable.R ? 1 : 0,\n geoeng: p.opt.enable.G ? 1 : 0,\n adapt: p.opt.enable.A ? .4 : 0\n }\n },\n economics: p.economics,\n physics: p.physics\n }\n : model === \"forward\"\n ? {\n controls: {\n M: gauss(p.forward.controls.M),\n R: gauss(p.forward.controls.R),\n G: gauss(p.forward.controls.G),\n A: gauss(p.forward.controls.A)\n }\n }\n : {\n controls: {\n M: gauss_inv(p.forward_emissions.controls.emissions_1),\n R: gauss_inv(p.forward_emissions.controls.emissions_1).map(\n x => x / 4\n ),\n G: years.map(_ => 0),\n A: years.map(_ => 0)\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"year_start = 2020","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"year_end = 2200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"year_step = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"years = d3.range(year_start, year_end + year_step, year_step) // inclusive range","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"years_before_end_of_oil = years.map(y => y < 2150).reduce((a, b) => a + b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"// Based on the gaussian function, but with some artistic additions\n// It does not matter that this is not the actuall gaussian, MARGO uses the actual curve values that you see, they don't need to be gaussian.\n\ngauss = ({ mean, magnitude }) => {\n const my_stdev = gauss_stdev * (1 + magnitude);\n return years.map(t =>\n clamp(\n (1.5 *\n magnitude *\n (-0.4 +\n Math.exp(\n (-1 * ((t - mean) * (t - mean))) / (2 * my_stdev * my_stdev)\n ))) /\n (1.0 - 0.4),\n 0.0,\n 1.0\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"gauss_inv = ({ mean, magnitude }) =>\n gauss({ mean: mean, magnitude: 1 - magnitude })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"gauss_stdev = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Application logic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1676,"value":"MRGA_medium_names = ({\n M: \"mitigate\",\n\n R: \"remove\",\n\n G: \"geoeng\",\n\n A: \"adapt\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"default_economics = ({\n mitigate_cost: 0.034,\n remove_cost: 13.0,\n geoeng_cost: 0.126,\n adapt_cost: 0.18,\n β: 0.002222222222222222,\n ρ: 0.02\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"default_physics = ({\n B: 1.13\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1636,"value":"to_views = obj =>\n Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, new View(v)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## Plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"add_series = (s, name = \"series\") => {\n s.append(\"g\").attr(\"class\", name + \" fills\");\n s.append(\"g\").attr(\"class\", name + \" lines\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"add_legend = s => {\n const legend = s\n .append(\"g\")\n .attr(\"class\", \"legend\")\n .attr(\n \"transform\",\n `translate(${width - margin.right + margin_legend.left} ${\n margin_legend.top\n })`\n );\n\n legend\n .append(\"rect\")\n .attr(\"width\", margin.right - margin_legend.left - margin_legend.right)\n .attr(\"height\", height - margin_legend.top - margin_legend.bottom)\n .attr(\"rx\", 4)\n // .attr(\"stroke\", \"#00000033\")\n // .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\");\n\n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"series = (...args) => {\n series_lines(...args)\n series_fills(...args)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"series_lines = (\n s,\n x_scale,\n y_scale,\n domain,\n data,\n hovered_subject,\n name = \"series\"\n) => {\n s.select(`g.${name}.lines`)\n .selectAll(\"path\")\n .data(data.filter(d => d.line), d => d.subject)\n .join(\"path\")\n .attr(\"id\", d => d.subject)\n .transition()\n .duration(300)\n .attr('d', d => line(x_scale, y_scale)(d3.zip(domain, d.vals)))\n .attr('stroke', d => d.line)\n .attr('stroke-width', ({ width = 5 }) => width)\n .attr('stroke-dasharray', ({ dasharray = undefined }) => dasharray)\n .attr('stroke-miterlimit', d => 1)\n .attr('opacity', ({ opacity = 1.0 }) => opacity)\n .attr('fill', d => 'none');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"series_fills = (\n s,\n x_scale,\n y_scale,\n domain,\n data,\n hovered_subject,\n name = \"series\"\n) => {\n s.select(`g.${name}.fills`)\n .selectAll(\"path\")\n .data(data.filter(d => d.fill), d => d.subject)\n .join(\"path\")\n .attr(\"id\", d => d.subject)\n .on(\"mouseover\", d => {\n hovered_subject.value = d.subject;\n })\n .on(\"mouseout\", d => {\n hovered_subject.value = undefined;\n })\n .transition()\n .duration(300)\n .attr('d', d =>\n line(x_scale, y_scale)(\n d.prev_stack == null\n ? with_fill_points(d3.zip(domain, d.vals))\n : with_stack_points(\n d3.zip(domain, d.vals),\n d3.zip(domain, d.prev_stack)\n )\n )\n )\n .attr('stroke', \"none\")\n // .attr('opacity', ({ fill_opacity = 1 }) => fill_opacity)\n .attr('fill', d => d.fill);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"line = (x_scale, y_scale) =>\n d3\n .line()\n .x(d => x_scale(d[0]))\n .y(d => y_scale(d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"with_fill_points = (top, zero = 0) => {\n const first = [top[0][0], zero];\n const last = [top[top.length - 1][0], zero];\n return [first, ...top, last];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"with_stack_points = (top, bottom) => [...top, ...bottom.slice().reverse()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"horizontal_band = (s, vertical_scale, from, to, fill) => {\n const y = to === Infinity ? margin.top : vertical_scale(to);\n return s\n .append(\"rect\")\n .attr(\"x\", margin.left)\n .attr(\"y\", y)\n .attr(\"width\", width - margin.right - margin.left)\n .attr(\"height\", vertical_scale(from) - y)\n .attr(\"fill\", fill);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"subject_opacity = (s, hovered_subject) => {\n s.selectAll(\"path\").attr(\"opacity\", ({ subject, opacity = .2 }) => {\n return subject == hovered_subject ? 2 * opacity : opacity;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`#### Callout text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"add_infeasibility_warning = s => {\n return callout_text(s, \"No solution found\").attr(\n \"class\",\n \"infeasibility_warning\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"add_connecting_warning = s => {\n return callout_text(s, \"Connecting...\").attr(\"class\", \"connecting_warning\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"callout_text = (s, text) => {\n return s\n .append(\"g\")\n .attr(\"class\", \"callout\")\n .append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", height / 2)\n .attr(\"text-anchor\", \"middle\")\n .text(text);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"names = ({\n baseline: \"Baseline\",\n baseline_emissions: \"Baseline\",\n baseline_concentrations: \"Baseline\",\n baseline_temperature: \"Baseline\",\n baseline_damages: \"Baseline\",\n temperature: \"Temperature\",\n above_paris: \"Above Paris\",\n M: \"Mitigation\",\n R: \"Removal\",\n A: \"Adaptation\",\n G: \"Geo-engineering\",\n T_max: \"Goal temperature\",\n controls: \"Controls\",\n damages: \"Damages\",\n emissions: \"Emissions\",\n concentrations: \"Concentrations\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"colors = ({\n baseline: \"#dddddd\",\n baseline_emissions: \"#dddddd\",\n baseline_concentrations: \"#dddddd\",\n baseline_temperature: \"#dddddd\",\n temperature: \"#edc949\",\n above_paris: \"#e1575910\",\n M: \"#4E79A7\",\n R: \"#F28E2C\",\n A: \"#59A14F\",\n G: \"#E15759\",\n T_max: \"#00000080\",\n controls: \"#af7aa1\",\n damages: \"#e15759\",\n avoided_damages: \"#e49734\",\n benefits: \"#7abf5e\",\n emissions: \"brown\",\n concentrations: \"brown\",\n emissions_1: \"#4E79A7\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"compact = width < 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"margin = compact\n ? { top: 10, right: 20, bottom: 30, left: 45 }\n : { top: 10, right: 100, bottom: 30, left: 45 }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"margin_legend = compact\n ? { top: 4, right: 0, bottom: margin.bottom, left: 1000 }\n : { top: 4, right: 0, bottom: margin.bottom, left: 10 }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"{\n const node = DOM.svg(50, 50);\n const s = d3.select(node);\n\n const p = add_all_patterns(s, .3);\n\n s.append(\"rect\")\n .attr(\"width\", 50)\n .attr(\"height\", 50)\n .attr(\"fill\", p.A);\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"add_pattern = (s, ratio, fill) => {\n const id = Math.random()\n .toString()\n .substr(2);\n const pattern = s\n .append(\"pattern\")\n .attr(\"id\", id)\n .attr(\"patternUnits\", \"userSpaceOnUse\")\n .attr(\"width\", 10)\n .attr(\"height\", 10);\n\n const g = pattern.append(\"g\").attr(\"transform\", \"rotate(45)\");\n g.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"height\", Math.sqrt(2) * 5 * ratio)\n .attr(\"width\", 20)\n .attr(\"fill\", fill);\n\n g.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", -Math.sqrt(2) * 5)\n .attr(\"height\", Math.sqrt(2) * 5 * ratio)\n .attr(\"width\", 20)\n .attr(\"fill\", fill);\n\n return `url('#${id}')`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"add_all_patterns = (s, ratio) => {\n const d = s.append(\"defs\");\n return Object.fromEntries(\n Object.keys(colors).map(c => {\n return [c, add_pattern(d, ratio, colors[c])];\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`### Scales & axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"horizontal_scale = domain =>\n d3\n .scaleLinear()\n .domain(domain)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"vertical_scale = (domain) => d3\n .scaleLinear()\n .domain(domain)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"scale = ({\n year: horizontal_scale([2020, year_end]),\n temperature: vertical_scale([0.0, 5.0]),\n emissions: vertical_scale([-4.0, 10.0]),\n concentrations: vertical_scale([0, 1390.0]),\n concentrations_relative: vertical_scale([0, 1300.0 / 280.0]),\n percent: vertical_scale([0.0, 1.0]),\n costs_S: vertical_scale([0.0, 1.4]),\n costs_L: vertical_scale([0.0, 6.0])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`### Calculations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"clamp = (x, lower, upper) => Math.min(Math.max(x, lower), upper)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"invert_clamp = (original_scale, x) =>\n clamp(\n original_scale.invert(x),\n original_scale.domain()[0],\n original_scale.domain()[1]\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"plus = (a, b) => a.map((x, i) => x + b[i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"minus = (a, b) => a.map((x, i) => x - b[i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"squared = a => a.map(x => x * x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"get_MRGA = (r, give_costs) => {\n if (give_costs) {\n return [\n r.computed.costs.M.discounted,\n r.computed.costs.R.discounted,\n r.computed.costs.G.discounted,\n r.computed.costs.A.discounted\n ];\n } else {\n return [\n r.controls.mitigate,\n r.controls.remove,\n r.controls.geoeng,\n r.controls.adapt\n ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"domain_array = domain => {\n return d3.range(\n domain.initial_year,\n domain.final_year + domain.dt * .5,\n domain.dt\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"click_cycle = options => {\n const span = html``;\n const update = index => {\n span.onclick = e => {\n if (index == options.length - 1) {\n update(0);\n } else {\n update(index + 1);\n }\n };\n\n span.innerHTML = options[index].label;\n span.value = options[index].value;\n span.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n update(0);\n\n return span;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"status_ok = result =>\n result == null ||\n result.status == null ||\n [\n \"OPTIMAL\",\n \"LOCALLY_SOLVED\",\n \"ALMOST_OPTIMAL\",\n \"ALMOST_LOCALLY_SOLVED\"\n ].includes(result.status)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"height = 240","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`### Async & View`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"async_map = async function*(generator, fn) {\n for await (let x of generator) {\n try {\n yield await fn(x);\n } catch (e) {\n console.error(e);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"async_foreach = async function(generator, fn) {\n for await (let x of generator) {\n try {\n await fn(x);\n } catch (e) {\n console.error(e);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"function map_to_values(views_obj) {\n if (views_obj instanceof View) {\n return views_obj.value;\n } else {\n return Object.fromEntries(\n Object.entries(views_obj).map(([k, v]) => [k, map_to_values(v)])\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"function extract_views(views_obj) {\n if (views_obj instanceof View) {\n return views_obj;\n } else {\n return [].concat(\n ...Object.entries(views_obj).map(([k, v]) => extract_views(v))\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"function bundle_nested_views(input_views, output_view) {\n extract_views(input_views)\n .map(Generators.input)\n .forEach(g => {\n async_foreach(g, () => {\n output_view.value = map_to_values(input_views);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"default_url = new URL(\"https://margo-api-test-1.herokuapp.com\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"staging_url = new URL(\"https://margo-api-staging.herokuapp.com/\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"ngrok_url = new URL(\"https://2aa603eece93.ngrok.io/\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"import { margo_client } with { staging_url as margo_url } from \"@margo/api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"import { View } from \"@margo/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"import {title, margo_intro_short, notebook_intro} from \"@margo/introductions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 2d:"$2c:body"