2b:null 2c:["$","title",null,{"children":"Evolution der kollateralen Sensitivität und Resistenz. | KielSCN Spektrum Living Lab | Observable"}] 31:T1edb,figC = { const arcWidth = 8; const initialPoints = points.map((point) => [...point, 1]); const initialColor = d3.hsl(scaleOrdinal(fallbackValueFigA.res)); const initialDirection = initialColor.h; const initialSelectedGroup = dataCs .filter( (d) => d.mutant == fallbackValueFigA.mutant && d.res == fallbackValueFigA.res ) .sort((a, b) => a.m - b.m); let groupRotation = initialDirection; let currentColor = initialColor; const fig = d3.create("figure"); const svg = fig .append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;") .style("font", "10px sans-serif"); fig.append("figcaption").text(init_i18n.t("figC.caption", { lng: language })); const cScale = d3 .scaleOrdinal() .domain(d3.range(divergingReverse.length)) .range(divergingReverse); const pie = d3 .pie() .value((d) => d) .sort(null); // Arc for Axis const arc = d3 .arc() .innerRadius(radius) .outerRadius(radius + arcWidth); // Arcs for Points const arcs = d3 .arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .cornerRadius((outerRadius - innerRadius) / 2) .startAngle(0) .endAngle(scaleAngular(0) * 2); // Points Group let groupPoints = svg.append("g").attr("id", "groupPoints"); // group per single point let groupPoint = groupPoints .selectAll("g") .data(initialPoints, (d) => d.slice(0, 2).join(", ")) .join("g") .attr("id", "point") .attr( "transform", (d) => `translate(${d[0]},${d[1]}) rotate(${ -radiansToDegrees(scaleAngular(0)) + 90 + initialDirection })` ) .attr("opacity", 1); // Point Shield let shield = groupPoint .append("path") .attr("d", arcs) .attr("fill", "gray" /* initialColor */) .attr("opacity", 0.5); // Point Circle const point = groupPoint .append("circle") .attr("r", innerRadius / 2) .attr("fill", "gray"); // Axis Group let groupAxis = svg .append("g") .attr("id", "groupAxis") .attr( "transform", `translate(${width / 2}, ${height / 2}) rotate(${initialDirection})` ); // groupAxis / groupTicks const groupTicks = groupAxis.append("g").attr("id", "groupTicks"); // groupAxis / groupTicks / groupTicksChallenged const groupTicksChallenged = groupTicks .append("g") .attr("id", "groupTicksChallenged"); // Initial rendering const tickChallengedEnter = groupTicksChallenged .selectAll("g") .data(initialSelectedGroup, (d) => d.challenged) .enter() .append("g"); // Set initial attributes for the new groups tickChallengedEnter .attr("transform", (d) => { let rotation = radiansToDegrees(scaleAngular(d.m)); rotation = isEven(d.challenged) ? rotation : -rotation; return `rotate(${rotation})`; }) .attr("opacity", (d) => d.challenged === fallbackValueFigA.challenged ? 1 : 0.3 ); // Ticks for challenged tickChallengedEnter.call(setTickAttributes); // Label for challenged tickChallengedEnter.call(setLabelAttributes, groupRotation); // groupAxis / groupTicks / groupTicksRes const groupTicksRes = groupTicks.append("g").attr("id", "groupTicksRes"); // Tick for "resistant to" groupTicksRes .append("g") /* .attr("stroke-width", 1.5) */ .append("path") .attr("d", triangle) .attr("transform", `translate(${radius}, 0) rotate(${-90})`) .attr("fill", "white") .attr("stroke", "gray"); // Label for "resistant to" const labelsRes = groupTicksRes .append("text") .text((d) => fallbackValueFigA.res) .attr("dominant-baseline", "middle") .attr("text-anchor", (d) => getTextAnchor(extentCs[1], groupRotation)) .attr("transform", (d) => labelTransform(extentCs[1], groupRotation)); const groupArcs = groupAxis.append("g").attr("id", "groupArcs"); // Axis Ring const ring = groupArcs .selectAll(".arc") .data(pie(Array(divergingReverse.length).fill(1))) .enter() .append("g") .attr("transform", "rotate(270)") .attr("class", "arc") .attr("stroke-width", 2) .attr("stroke", "white"); // Axis Arcs ring .append("path") .attr("d", arc) .attr("fill", (d, i) => cScale(i)); return Object.assign(fig.node(), { update(colorDirection = null, selection = null) { const t = svg.transition().duration(400).delay(100); if (colorDirection) { currentColor = colorDirection; groupRotation = colorDirection.h; // Update the Axis Group groupAxis .transition(t) .attr( "transform", `translate(${width / 2}, ${height / 2}) rotate(${groupRotation})` ); // Update the Points Group groupPoint .transition(t) .attr( "transform", (d) => `translate(${d[0]},${d[1]}) rotate(${ -radiansToDegrees(scaleAngular(0)) + 90 + groupRotation })` ); // Update the Shield /* shield.transition(t).attr("fill", colorDirection); */ // Update the Labels in groupTicksChallenged groupTicksChallenged .selectAll("g") .call((selection) => setLabelAttributes(selection, groupRotation)); } if (selection) { console.log("update on labels called"); const selectedGroup = dataCs .filter((d) => d.mutant == selection.mutant && d.res == selection.res) .sort((a, b) => a.m - b.m); groupTicksChallenged .selectAll("g") .data(selectedGroup, (d) => d.challenged) .join( (enter) => enter.append("g").call((enter) => { // For new groups, set initial attributes, ticks, and labels enter.attr("transform", (d) => { let rotation = radiansToDegrees(scaleAngular(d.m)); rotation = isEven(d.challenged) ? rotation : -rotation; return `rotate(${rotation})`; }); enter.call(setTickAttributes); enter.call(setLabelAttributes, groupRotation); }), (update) => update.call((update) => { // Update existing groups' attributes, ticks, and labels update .transition(t) // Apply the transition .attr("transform", (d) => { let rotation = radiansToDegrees(scaleAngular(d.m)); rotation = isEven(d.challenged) ? rotation : -rotation; return `rotate(${rotation})`; }); update.call(setTickAttributes); update.call(setLabelAttributes, groupRotation); }), (exit) => exit.remove() // Remove any obsolete groups ); // Axis Label "resistant to" labelsRes .text(selection.res) .attr("text-anchor", (d) => getTextAnchor(extentCs[1], groupRotation)) .attr("transform", (d) => labelTransform(extentCs[1], groupRotation)); } }, updatePoints(points) { const t = svg.transition().duration(400).delay(100); // Enter, update, or exit the groups const groups = groupPoints .selectAll("g") .data(points, (d) => d.slice(0, 2).join(", ")) .join( (enter) => enter, (update) => update.transition(t).attr("opacity", (d) => d[2]), (exit) => exit ) .transition(t) .attr( "transform", (d) => `translate(${d[0]},${d[1]}) rotate(${ -radiansToDegrees(scaleAngular(0)) + 90 + groupRotation })` ); } }); }32:T52d,viewof figA = Plot.plot({ caption: md`${init_i18n.t("figA.caption", { lng: language, colorStartEn: colorSchemeToSpectrumEn[figOneConfig.colorScheme][0], colorEndEn: colorSchemeToSpectrumEn[figOneConfig.colorScheme][1], colorStartDe: colorSchemeToSpectrumDe[figOneConfig.colorScheme][0], colorEndDe: colorSchemeToSpectrumDe[figOneConfig.colorScheme][1] })}`, marginLeft: 64, marginTop: 48, fx: { label: init_i18n.t("figA.xAxis", { lng: language }), labelOffset: 40, domain: antibiotics.map((d) => d.abbr) }, y: { label: init_i18n.t("figA.yAxis", { lng: language }), labelOffset: 56, domain: antibiotics.map((d) => d.abbr) }, x: { title: "Mutant", label: null }, color: { label: init_i18n.t("figA.legend", { lng: language }), legend: true, ...createColorScale(extentCs) }, marks: [ Plot.tickX( dataCs.filter((d) => d.res !== "CON"), { x: "mutant", y: "res", fx: "challenged", stroke: "m", strokeWidth: figOneConfig.tickWidth } ), Plot.axisX({ facetAnchor: "empty" }), Plot.tip( dataCs.filter((d) => d.res !== "CON"), Plot.pointer({ x: "mutant", y: "res", fx: "challenged", channels: { value: "m" } }) ) ] })33:Tcbd,viewof figB = Plot.plot({ height: 200, /* width: 320, */ insetBottom: 16, marginBottom: 48, marginLeft: 64, caption: md`${init_i18n.t("figB.caption", { lng: language, colorStartEn: colorSchemeToSpectrumEn[figOneConfig.colorScheme][0], colorEndEn: colorSchemeToSpectrumEn[figOneConfig.colorScheme][1], colorStartDe: colorSchemeToSpectrumDe[figOneConfig.colorScheme][0], colorEndDe: colorSchemeToSpectrumDe[figOneConfig.colorScheme][1] })}`, x: { label: `${init_i18n.t("figB.xAxis", { lng: language, abbr: outputFigA.challenged, drug: antibiotics.find((obj) => obj.abbr === outputFigA.challenged).drug })}`, labelAnchor: "right", labelArrow: "auto" }, y: { label: `${init_i18n.t("figB.yAxis", { lng: language, abbr: outputFigA.res, drug: antibiotics.find((obj) => obj.abbr === outputFigA.res).drug })}`, domain: [0, odExtent[1]] }, style: { isolation: "isolate" }, marks: [ [dataControl, dataEvolved].map((data, i) => Plot.areaY( data, Plot.groupX( { y: "mean" }, { x: "id", y: "od", fill: i % 2 === 0 ? colorSchemeToInterpolator[figOneConfig.colorScheme](0.55) : colorSchemeToInterpolator[figOneConfig.colorScheme](0.45), mixBlendMode: i % 2 === 0 ? undefined : "screen", curve: "monotone-x" } ) ) ), [dataControl, dataEvolved].map((data, i) => Plot.lineY( data, Plot.groupX( { y: "mean" }, { x: "id", y: "od", opacity: 0.7, curve: "monotone-x", marker: i % 2 === 0 ? "none" : "circle", strokeDasharray: i % 2 === 0 ? "2 4" : 0 } ) ) ), figTwoConfig.rangeMeasurement ? [dataControl, dataEvolved].map((data, i) => Plot.areaY( data, Plot.groupX( { y1: "min", y2: "max" }, { x: "id", y1: "od", y2: "od", fill: "res", curve: "monotone-x", opacity: 0.1 } ) ) ) : null, Plot.ruleY([0]), Plot.ruleX( dataEvolved, Plot.pointerX( Plot.groupX( { py: "mean" }, { x: "id", py: "od", stroke: "black", strokeDasharray: "2 2", opacity: 0.5 } ) ) ), Plot.dot( dataEvolved, Plot.pointerX( Plot.groupX( { y: "mean" }, { x: "id", y: "od", stroke: "black", strokeWidth: 1, r: 3, opacity: 1, fill: "white" } ) ) ), // Custom grid lines which will be drawn above other marks. figTwoConfig.gridY ? Plot.gridX() : null, figTwoConfig.gridX ? Plot.gridY() : null, Plot.axisX({ text: (d) => { const { conc } = concFiltered.find((obj) => obj.id === d) || {}; return conc; } }) ] })34:T1e6b,// Define translations translations = ({ en: { translation: { h1: "# Evolution of collateral sensitivity and resistance.", h2: '## These visualizations try to add interactivity to the Fig. 3A and 3B from the Paper "[Alternative evolutionary paths to bacterial antibiotic resistance cause distinct collateral effects](https://doi.org/10.1093/molbev/msx158)"', intro: "When bacteria develop resistance to one antibiotic, they might become more vulnerable to another. This phenomenon, known as collateral sensitivity, could be harnessed to devise innovative and sustainable methods to combat the alarming rise of drug resistance. To date, research on the existence and underlying mechanisms of collateral sensitivity has been limited to a handful of bacterial species. The implications for human pathogens, like Pseudomonas aeruginosa, remain largely unexplored. In a recent study, scientists analyzed how 160 separate P. aeruginosa populations adapted when exposed to high doses of eight prevalent antibiotics. The bacteria quickly developed resistance but also showed varying degrees of collateral sensitivity and cross-resistance. These results emphasize the diverse adaptive responses among samples, which could influence their future use in antibiotic treatments.", context: { headline: "## Context", text: 'This notebook, a product of the collaborative partnership between the Kiel Science Communication Network ([KielSCN](https://www.kielscn.de/en/)) and [Spektrum der Wissenschaft](https://www.spektrum.de), showcases interactive visualizations which accompany an article penned by Hinrich Schulenburg called ["Mit Darwin gegen die Antibiotikakrise"](https://www.spektrum.de/news/evolution-mit-darwin-gegen-die-antibiotikakrise/2142567#:~:text=Antibakterielle%20Arzneistoffe%20verlieren%20zunehmend%20an,Bakterien%20gezielt%20steuert%20und%20ausnutzt.). The article, hosted on Spektrum.de, delves deeper into the significant research spearheaded by Prof. Schulenburg and his dedicated team at Kiel University. To gain a comprehensive understanding and insight into their groundbreaking work, readers are encouraged to visit the article on Spektrum.de.' }, participation: { headline: " ## Participation", text: "This notebook is aiming to pioneer new methods for interactive science communication. Are you intrigued? Help us enhance the infographics! Adjust the graphics as you wish using the provided controls. Please feel free to share your suggestions by commenting on the graphics or get involved—'fork' this notebook and propose your own visualizations." }, figA: { caption: `${pcFigAEn}`, xAxis: "Challenged against", yAxis: "Resistant to", legend: "← Sensitivity / Resistance →" }, figB: { caption: `${pcFigBEn}`, xAxis: `concentration of antibiotic {{abbr}} ({{drug}}) (ug/ml)`, yAxis: `relative growth of population resistant to {{abbr}} ({{drug}})` }, figC: { caption: `${pdFigCEn}` }, customization: { headline: "Customize this visualization", selectColor: "Select a color scheme", selectScale: "Symetric color Scale", selectTick: "Tick width", selectMeasurement: "Measurement Range", selectGridX: "Grid parallel to x-Axis", selectGridY: "Grid parallel to y-Axis" }, appendix: { headline: "## Appendix", text: "Below, you'll find the algorithms that power the interactive visualizations. If you have experience with d3 or Observable Plot, this section is tailored for you." } } }, de: { translation: { h1: "# Evolution der kollateralen Sensitivität und Resistenz.", h2: '## Diese Visualisierungen versuchen, den Abb. 3A und 3B aus dem Artikel "[Alternative evolutionary paths to bacterial antibiotic resistance cause distinct collateral effects](https://doi.org/10.1093/molbev/msx158)" Interaktivität hinzuzufügen.', intro: 'Wenn Bakterien eine Resistenz gegen ein Antibiotikum entwickeln, werden sie möglicherweise anfälliger für ein anderes. Dieses Phänomen, das als "Kollaterale Sensitivität" bezeichnet wird, könnte genutzt werden, um innovative und nachhaltige Methoden zur Bekämpfung der alarmierenden Zunahme der Arzneimittelresistenz zu entwickeln. Bislang ist die Forschung über die Existenz und die zugrunde liegenden Mechanismen der kollateralen Sensitivität auf eine Handvoll von Bakterienarten beschränkt. Die Auswirkungen auf menschliche Krankheitserreger, wie Pseudomonas aeruginosa, sind noch weitgehend unerforscht. In einer kürzlich durchgeführten Studie untersuchten Wissenschaftler, wie sich 160 verschiedene P. aeruginosa-Populationen an hohe Dosen von acht weit verbreiteten Antibiotika anpassten. Die Bakterien entwickelten schnell eine Resistenz, zeigten aber auch ein unterschiedliches Maß an kollateraler Sensitivität und Kreuzresistenz. Diese Ergebnisse unterstreichen die unterschiedlichen Anpassungsreaktionen der einzelnen Proben, was ihre künftige Verwendung in der Antibiotikabehandlung beeinflussen könnte.', context: { headline: "## Kontext", text: 'Dieses Notebook, ein Produkt der Zusammenarbeit zwischen dem Kiel Science Communication Network ([KielSCN](https://www.kielscn.de/en/)) und [Spektrum der Wissenschaft](https://www.spektrum.de), zeigt interaktive Visualisierungen, die einen Artikel von Hinrich Schulenburg mit dem Titel ["Mit Darwin gegen die Antibiotikakrise"](https://www.spektrum.de/news/evolution-mit-darwin-gegen-die-antibiotikakrise/2142567#:~:text=Antibakterielle%20Arzneistoffe%20verlieren%20zunehmend%20an,Bakterien%20gezielt%20steuert%20und%20ausnutzt.) begleiten. Der Artikel, der auf Spektrum.de zu finden ist, gibt einen Einblick in die bedeutenden Forschungsarbeiten von Prof. Schulenburg und seinem engagierten Team an der Universität Kiel. Um ein umfassendes Verständnis und einen Einblick in ihre bahnbrechende Arbeit zu erhalten, sollten die Leser den Artikel auf Spektrum.de besuchen.' }, participation: { headline: "## Partizipation", text: 'Mit diesem Notebook sollen neue Methoden für die interaktive Wissenschaftskommunikation erprobt werden. Sind Sie neugierig geworden? Helfen Sie uns, die Infografiken zu verbessern! Passen Sie die Grafiken mit den bereitgestellten Steuerelementen nach Ihren Wünschen an. Bitte teilen Sie uns Ihre Vorschläge mit, indem Sie die Grafiken kommentieren, oder beteiligen Sie sich an diesem Notebook, indem Sie es "forken" und Ihre eigenen Visualisierungen vorschlagen.' }, figA: { caption: `${pcFigADe}`, xAxis: "Herausgefordert gegen", yAxis: "Resistent gegen", legend: "← Sensitivität / Resistenz →" }, figB: { caption: `${pcFigBDe}`, xAxis: `Antibiotikakonzentration von {{abbr}} ({{drug}}) (ug/ml)`, yAxis: `Relatives Wachstum der gegen {{abbr}} ({{drug}}) resistenten Population` }, figC: { caption: `${pdFigCDe}` }, customization: { headline: "Diese Visualisierung anpassen", selectColor: "Ein Farbschema wählen", selectScale: "Symetrische Farbskala", selectTick: "Tick Weite", selectMeasurement: "Messbereich", selectGridX: "Raster parallel zur x-Achse", selectGridY: "Raster parallel zur y-Achse" }, appendix: { headline: "## Appendix", text: "Im Folgenden finden Sie die Algorithmen, die den interaktiven Visualisierungen zugrunde liegen. Wenn Sie Erfahrung mit d3 oder Observable Plot haben, ist dieser Abschnitt für Sie gedacht." } } } })35:[{"id":"362834b6ed4b9a696f938f49259a0d720b300c3f0a2464aef14d5d332a767bd12abdf261eae0b04bb5cd8370b56aaa88ff55ded5e2111c20d2a30f6557ebf7d6","href":"https://static.observableusercontent.com/files/362834b6ed4b9a696f938f49259a0d720b300c3f0a2464aef14d5d332a767bd12abdf261eae0b04bb5cd8370b56aaa88ff55ded5e2111c20d2a30f6557ebf7d6","name":"all2.txt","type":"text/plain","lastModified":1689150494445.346,"size":429540},{"id":"b0813cc769e3a69fa6a811d48500e3e3d77bf8a69d21818d00b4dd51282f3a4e5aca9f3487d20ec9098fa5fb56476edb49be57fb307a06f671d50148d599debd","href":"https://static.observableusercontent.com/files/b0813cc769e3a69fa6a811d48500e3e3d77bf8a69d21818d00b4dd51282f3a4e5aca9f3487d20ec9098fa5fb56476edb49be57fb307a06f671d50148d599debd","name":"conc.txt","type":"text/plain","lastModified":1689171285893.571,"size":802},{"id":"cd5d079d2b721101990447ad6dcd78d3c999fe63a61d4d1468beeed80c67b9a640055732ad8525848aeb2ddc11abb475bf21cf0ffe1110e3811095148545b29a","href":"https://static.observableusercontent.com/files/cd5d079d2b721101990447ad6dcd78d3c999fe63a61d4d1468beeed80c67b9a640055732ad8525848aeb2ddc11abb475bf21cf0ffe1110e3811095148545b29a","name":"cs_auc.csv","type":"text/csv","lastModified":1689337711040.134,"size":22283}] 2f:{"id":"da7c66810b8a046a","slug":null,"title":"Evolution der kollateralen Sensitivität und Resistenz.","thumbnail":"8c6ec71c9210fdf98b1da096f7e3ce4b65fe9a80f3ccc120000a1f8644ad804a","access_level":"public","create_time":"$D2023-07-12T08:21:55.441Z","update_time":"$D2023-08-21T16:28:25.237Z","view_time":null,"first_public_time":"$D2023-07-12T08:21:55.441Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9c9093a3d6001885","login":"kielscn-spektrum-living-lab","name":"KielSCN Spektrum Living Lab","avatar_url":"https://avatars-next.observableusercontent.com/1cdf082064d7bfeb48cb6e3b15cbc1df63bb57fa109cf82d122ee8ba22e489d0","tier":"starter_2024"},"version":1467,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa6fcb579fb87ef9","login":"kielscn","name":"KielSCN","avatar_url":"https://avatars-next.observableusercontent.com/ad62e3391f954b60f9d7eed4fdb0ebaf6c2b018bc6ed85e6d47421082969c99d","tier":null}],"members":[{"type":"individual","id":"aa6fcb579fb87ef9","login":"kielscn","name":"KielSCN","avatar_url":"https://avatars-next.observableusercontent.com/ad62e3391f954b60f9d7eed4fdb0ebaf6c2b018bc6ed85e6d47421082969c99d","tier":null,"role":"editor"},{"type":"team","id":"9c9093a3d6001885","login":"kielscn-spektrum-living-lab","name":"KielSCN Spektrum Living Lab","avatar_url":"https://avatars-next.observableusercontent.com/1cdf082064d7bfeb48cb6e3b15cbc1df63bb57fa109cf82d122ee8ba22e489d0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Evolution der kollateralen Sensitivität und Resistenz.","cells":[{"id":1467,"value":"md`${init_i18n.t(\"h1\", { lng: language })}\\n${init_i18n.t(\"h2\", {\n lng: language\n})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"viewof language = Inputs.radio(\n new Map([\n [\"English\", \"en\"],\n [\"Deutsch\", \"de\"]\n ]),\n { value: \"en\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"md`${init_i18n.t(\"intro\", { lng: language })}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1463,"value":"md`${init_i18n.t(\"context.headline\", { lng: language })}\\n${init_i18n.t(\n \"context.text\",\n {\n lng: language\n }\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1461,"value":"md`${init_i18n.t(\"participation.headline\", { lng: language })}\\n${init_i18n.t(\n \"participation.text\",\n {\n lng: language\n }\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1459,"value":"layoutOne = html`

${viewof figA}

${init_i18n.t(\"customization.headline\", {\n lng: language\n })}

${viewof figOneConfig}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"layoutTwo = html`

${viewof figB}

${init_i18n.t(\"customization.headline\", {\n lng: language\n })}

${viewof figTwoConfig}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1455,"value":"md`${init_i18n.t(\"appendix.headline\", { lng: language })}\\n${init_i18n.t(\n \"appendix.text\",\n {\n lng: language\n }\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"### fig. A – code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":657,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"### fig. B – code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"### fig. A config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1281,"value":"viewof figOneConfig = Inputs.form({\n language: Inputs.bind(\n Inputs.radio(\n new Map([\n [\"English\", \"en\"],\n [\"Deutsch\", \"de\"]\n ]),\n { value: \"en\" }\n ),\n viewof language\n ),\n colorScheme: Inputs.select([\"BrBG\", \"PRGn\", \"PiYG\", \"PuOr\", \"RdBu\", \"RdGy\"], {\n label: init_i18n.t(\"customization.selectColor\", { lng: language }),\n value: \"BrBG\"\n }),\n /* symmetric: Inputs.toggle({ label: \"Symetric color Scale\", value: false }), */\n symmetric: Inputs.toggle({\n label: init_i18n.t(\"customization.selectScale\", { lng: language }),\n value: false\n }),\n tickWidth: Inputs.range([1, 6], {\n label: init_i18n.t(\"customization.selectTick\", { lng: language }),\n step: 1,\n value: 4\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"### fig. B config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1279,"value":"viewof figTwoConfig = Inputs.form({\n language: Inputs.bind(\n Inputs.radio(\n new Map([\n [\"English\", \"en\"],\n [\"Deutsch\", \"de\"]\n ]),\n { value: \"en\" }\n ),\n viewof language\n ),\n rangeMeasurement: Inputs.toggle({\n label: init_i18n.t(\"customization.selectMeasurement\", { lng: language }),\n value: false\n }),\n gridX: Inputs.toggle({\n label: init_i18n.t(\"customization.selectGridX\", { lng: language }),\n value: false\n }),\n gridY: Inputs.toggle({\n label: init_i18n.t(\"customization.selectGridY\", { lng: language }),\n value: false\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"\n### Miscellaneous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1440,"value":"function labelTransform(value, groupRotation, parity = true) {\n const angleRad = scaleAngular(value);\n let angleDeg = radiansToDegrees(angleRad);\n angleDeg = parity ? angleDeg : -angleDeg + 360;\n const scale = getOrientation(angleDeg, groupRotation);\n const translateX = radius + labelOffset;\n\n return `\n translate(${translateX}, 0)\n ${scale}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"// Function to create tick transformation string\ntickTransform = (d, i) => {\n const rotation = radiansToDegrees(scaleAngular(d.m));\n return `rotate(${rotation})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"// Axis Tick template\ntriangle = d3.symbol().type(d3.symbolTriangle).size(256)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"// Function to set common tick attributes\nsetTickAttributes = (selection) => {\n const g = selection.append(\"g\").attr(\"class\", \"tick-index\");\n /* .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1.5); */\n\n g.selectAll(\"path\")\n .data((d) => [d]) // Repeat the data for the child element\n .join(\"path\")\n .attr(\"d\", triangle)\n .attr(\"transform\", `translate(${radius}, 0) rotate(${-90})`);\n /* .attr(\"fill\", \"gray\"); */\n /* .attr(\"opacity\", (d) => (d.challenged === challenged ? 1 : 0.3)); */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"function setLabelAttributes(selection, groupRotation) {\n return selection\n .selectAll(\"text\")\n .data((d) => [d]) // Repeat the data for the child element\n .join(\"text\")\n .text((d) => d.challenged)\n .attr(\"class\", \"tick-label-challenged\")\n .attr(\"dominant-baseline\", \"middle\")\n .attr(\"transform\", (d) => labelTransform(d.m, groupRotation, isEven(d.challenged)))\n .attr(\"text-anchor\", (d) => getTextAnchor(d.m, groupRotation, isEven(d.challenged)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"function updateLabelAttributes(selection, groupRotation) {\n selection\n .text((d) => d.challenged)\n .attr(\"class\", \"tick-label-challenged\")\n .attr(\"dominant-baseline\", \"middle\")\n .attr(\"transform\", (d) =>\n labelTransform(d.m, groupRotation, isEven(d.challenged))\n )\n .attr(\"text-anchor\", (d) =>\n getTextAnchor(d.m, groupRotation, isEven(d.challenged))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"figCUpdateSelection = figC.update(null, outputFigA)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"figCUpdateDirection = figC.update(colorDirection, outputFigA)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"figCUpdatePoints = figC.updatePoints(pointsExtended)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"// helps to keep the last value returned by plot\nupdateOutputFigA = {\n if (figA !== null) {\n mutable outputFigA = figA;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"mutable outputFigA = fallbackValueFigA","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"fallbackValueFigA = dataCs[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"fallbackValueFigB = [\n { mutant: \"a\", id: 2, res: \"CAR\", challenged: \"CAR\", od: 0.175, rep: 1 },\n { mutant: \"a\", id: 2, res: \"CAR\", challenged: \"CAR\", od: 0.174, rep: 2 },\n { mutant: \"a\", id: 2, res: \"CAR\", challenged: \"CAR\", od: 0.173, rep: 3 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"// Set a default value so that there is a value on pageload and if no mouseover event is triggered\nsetFigA = set(viewof figA, fallbackValueFigA)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"// Set a default value so that there is a value on pageload and if no mouseover event is triggered\nsetFigB = set(viewof figB, fallbackValueFigB)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1421,"value":"antibiotics = [\n {\n abbr: \"CIP\",\n drug: \"Ciprofloxacin\",\n class: \"Quinolones\",\n target: \"DNA repair\"\n },\n {\n abbr: \"DOR\",\n drug: \"Doripenem\",\n class: \"Carbapenems\",\n target: \"Cell wall synthesis\"\n },\n {\n abbr: \"IMI\",\n drug: \"Imipenem\",\n class: \"Carbapenems\",\n target: \"Cell wall synthesis\"\n },\n {\n abbr: \"CEF\",\n drug: \"Cefsulodin\",\n class: \"Cephalosporins\",\n target: \"Cell wall synthesis\"\n },\n {\n abbr: \"CAR\",\n drug: \"Carbenicillin\",\n class: \"Penicillins\",\n target: \"Cell wall synthesis\"\n },\n {\n abbr: \"PIT\",\n drug: \"Piperacillin + Tazobactam\",\n class: \"Penicillins\",\n target: \"Cell wall synthesis\"\n },\n {\n abbr: \"GEN\",\n drug: \"Gentamicin\",\n class: \"Aminoglycosides\",\n target: \"Protein synthesis\"\n },\n {\n abbr: \"STR\",\n drug: \"Streptomycin\",\n class: \"Aminoglycosides\",\n target: \"Protein synthesis\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"antibioticClasses = d3.group(antibiotics, (d) => d.class)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"classOrder = Array.from(antibioticClasses.keys())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"### Caption","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1255,"value":"pdFigAEn = \"Fig. A: The graphic displays the collateral profiles of experimentally developed populations. Each row corresponds to the drugs used during their evolution, while columns represent the various antibiotics they were tested against. Within each section, vertical bars stand for the individual populations. Different intensities of {{colorEndEn}} indicate sensitivity levels, while shades of {{colorStartEn}} represent resistance. For detailed data, hover over individual segments to view figure B.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"pcFigAEn = `${pdFigAEn} © Living Lab, with data from Barbosa, C. et. al.: Alternative evolutionary paths to bacterial antibiotic resistance cause distinct collateral effects. Molecular Biology and Evolution 34, 2017, fig. 3B / CC BY-NC 4.0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"pdFigADe = \"Abb. A: Die Grafik zeigt die kollateralen Profile der experimentell entwickelten Populationen. Jede Zeile entspricht den während ihrer Evolution verwendeten Medikamenten, während die Spalten die verschiedenen Antibiotika darstellen, gegen die sie getestet wurden. Innerhalb jedes Abschnitts stehen die vertikalen Balken für die einzelnen Populationen. Unterschiedliche {{colorEndDe}}töne zeigen die Empfindlichkeit an, während {{colorStartDe}}töne für Resistenz stehen. Detaillierte Daten finden Sie in Abb. B, wenn Sie mit dem Mauszeiger über die einzelnen Segmente fahren.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"pcFigADe = `${pdFigADe} © Living Lab, mit Daten aus Barbosa, C. et. al.: Alternative evolutionary paths to bacterial antibiotic resistance cause distinct collateral effects. Molecular Biology and Evolution 34, 2017, fig. 3B / CC BY-NC 4.0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"pdFigBEn = \"Fig. B: The depiction showcases the method used to determine evolved collateral resistance or sensitivity. Bacterial growth, relative to a drug-free environment, was measured for all evolved populations (represented by a solid line) and the ancestral P. aeruginosa PA14 (indicated by a dotted line) across different antibiotic concentrations. The area under the curve for the ancestral strain was then subtracted from that of each population. Negative values suggest sensitivity ({{colorEndEn}}), while positive values indicate resistance ({{colorStartEn}}). By hovering over the diagram, one can view the corresponding population distribution in figure C.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"pcFigBEn = `${pdFigBEn} © Living Lab, with data from Barbosa, C. et. al.: Alternative evolutionary paths to bacterial antibiotic resistance cause distinct collateral effects. Molecular Biology and Evolution 34, 2017, fig. 3A / CC BY-NC 4.0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"pdFigBDe = \"Fig. B: Die Darstellung veranschaulicht die Methode, die zur Bestimmung der Kreuzresistent bzw. kollateralen Sensitivität der evolvierten Populationen verwendet wurde. Das Bakterienwachstum wurde im Vergleich zu einer antibiotikafreien Umgebung für alle entwickelten Populationen (dargestellt durch eine durchgezogene Linie) und den angestammten P. aeruginosa-Stamm PA14 (dargestellt durch eine gepunktete Linie) bei verschiedenen Antibiotika-Konzentrationen gemessen. Die Fläche unter der Kurve für den Urstamm wurde dann von der Fläche jeder Population abgezogen. Negative Werte deuten auf Sensitivität ({{colorEndDe}}), positive Werte auf Resistenz ({{colorStartDe}}) hin. Fährt man mit dem Mauszeiger über das Diagramm, kann man die entsprechende Populationsverteilung in Abbildung C sehen.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"pcFigBDe = `${pdFigBDe} © Living Lab, mit Daten aus Barbosa, C. et. al.: Alternative evolutionary paths to bacterial antibiotic resistance cause distinct collateral effects. Molecular Biology and Evolution 34, 2017, fig. 3A / CC BY-NC 4.0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"pdFigCEn = \"Fig. C: Directional mapping of the collateral sensitivity or resistence. This illustration tries to convey the idea that when bacteria develop resistance to one antibiotic, they may inadvertently expose a vulnerability to another by picturing a shield that guards one side but leaves the other exposed. This graphic can be controlled by selecting values from fig. A and fig. B\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"pdFigCDe = \"Fig. C: Direktionale Zuordnung der kollateralen Sensitivität oder Kreuzresistenz. Diese Abbildung versucht die Idee zu vermitteln, dass Bakterien, die eine Resistenz gegen ein Antibiotikum entwickeln, gleichzeitig eine Schwachstelle für ein anderes Antibiotikum aufweisen können, indem sie ein Schild darstellt, das die eine Seite schützt, aber die andere Seite ungeschützt lässt. Diese Grafik kann durch Auswahl von Werten aus Abb. A und Abb. B gesteuert werden.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"---\n### Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"divergingSchemes = [\n \"BrBG\",\n \"PRGn\",\n \"PiYG\",\n \"PuOr\",\n \"RdBu\",\n \"RdGy\",\n \"RdYlBu\",\n \"RdYlGn\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"selectedInterpolator = colorSchemeToInterpolator[figOneConfig.colorScheme]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"colorSchemeToInterpolator = ({\n BrBG: d3.interpolateBrBG,\n PRGn: d3.interpolatePRGn,\n PiYG: d3.interpolatePiYG,\n PuOr: d3.interpolatePuOr,\n RdBu: d3.interpolateRdBu,\n RdGy: d3.interpolateRdGy,\n RdYlBu: d3.interpolateRdYlBu,\n RdYlGn: d3.interpolateRdYlGn,\n Spectral: d3.interpolateSpectral,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"colorSchemeToSpectrumEn = ({\n BrBG: [\"brown\", \"blue-green\"],\n PRGn: [\"purple\", \"green\"],\n PiYG: [\"green\", \"pink\"], // reversed because of the usage in this project\n PuOr: [\"purple\", \"orange\"],\n RdBu: [\"red\", \"blue\"],\n RdGy: [\"red\", \"grey\"],\n RdYlBu: [\"red\", \"blue\"],\n RdYlGn: [\"red\", \"green\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1398,"value":"colorSchemeToSpectrumDe = ({\n BrBG: [\"Braun\", \"Blaugrün\"],\n PRGn: [\"Violett\", \"Grün\"],\n PiYG: [\"Grün\", \"Pink\"], // reversed because of the usage in this project\n PuOr: [\"Violett\", \"Orange\"],\n RdBu: [\"Rot\", \"Blau\"],\n RdGy: [\"Rot\", \"Grau\"],\n RdYlBu: [\"Rot\", \"Blau\"],\n RdYlGn: [\"Rot\", \"Grün\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"scaleAngular = d3\n .scaleLinear()\n .domain(\n figOneConfig.symmetric\n ? [-extentCs[1], extentCs[1]].concat(extentCs[1])\n : extentCs.concat(extentCs[1])\n )\n .range([Math.PI, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"scaleOrdinal = d3.scaleOrdinal(\n [\"CON\", ...antibiotics.map((d) => d.abbr)],\n d3.schemeTableau10\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"scalePoints = d3.scaleLinear().domain([0, odExtent[1]]).range([0, points.length])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"function createColorScale(domain) {\n return Plot.scale({\n color: {\n type: \"diverging\",\n domain: domain,\n symmetric: figOneConfig.symmetric,\n clamp: false,\n interpolate: (t) => selectedInterpolator(1 - t)\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"d3.scaleLinear().domain(odExtent).nice().domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"---\n### Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"divergingReverse = addReverseToArray(divergingRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"divergingRange = createDivergingRange(extentCs, figOneConfig.symmetric)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"function createDivergingRange(extent, symmetric = true) {\n const start = symmetric ? -extent[1] : extent[0];\n return d3\n .range(start, extent[1] + 1)\n .map((d) => createColorScale(extentCs).apply(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"colorDirection = d3.hsl(scaleOrdinal(outputFigA.res))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"---\n### Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1387,"value":"labelOffset = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"height = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"radius = 240","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"radiusInnerCircle = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"outerRadius = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"innerRadius = outerRadius / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"---\n### i18n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1379,"value":"languageValue = init_i18n.changeLanguage(language)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"// Initialize i18next\ninit_i18n = {\n console.log(\"init called\");\n await i18next.init({\n debug: false,\n fallbackLng: \"en\",\n lng: \"en\", // default language\n resources: translations\n });\n return i18next;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"---\n### Utility Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1376,"value":"function addOpacity(points, n) {\n // Make sure that n is not greater than the length of the points array\n n = Math.min(n, points.length);\n\n // Randomly choose n indices\n const chosenIndices = [];\n while (chosenIndices.length < n) {\n const index = Math.floor(Math.random() * points.length);\n if (!chosenIndices.includes(index)) {\n chosenIndices.push(index);\n }\n }\n\n // Add 1 to the randomly chosen points and 0.1 to the rest\n const result = points.map((point, i) => {\n const value = chosenIndices.includes(i) ? 1 : 0;\n return [...point, value];\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"function getOrientation(angle, groupRotation) {\n const rangeStart = normalizeAngle(90 - groupRotation);\n const rangeEnd = normalizeAngle(270 - groupRotation);\n\n let scaleX = 1; // Default scaling factor for x-axis\n let scaleY = 1; // Default scaling factor for y-axis\n if (isAngleInRange(angle, [rangeStart, rangeEnd])) {\n scaleX = -1; // Invert the x-axis scaling if the angle is in the specified range\n scaleY = -1; // Invert the x-axis scaling if the angle is in the specified range\n }\n\n return `scale(${scaleX}, ${scaleY})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"function isEven(challenged) {\n let index = classOrder.indexOf(\n antibiotics.find((d) => d.abbr === challenged).class\n );\n return index % 2 === 0 ? true : false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"getTextAnchor = (value, groupRotation, parity = true) => {\n const angleRad = scaleAngular(value);\n let angleDeg = radiansToDegrees(angleRad);\n angleDeg = parity ? angleDeg : -angleDeg + 360;\n const rangeStart = normalizeAngle(90 - groupRotation);\n const rangeEnd = normalizeAngle(270 - groupRotation);\n\n return isAngleInRange(angleDeg, [rangeStart, rangeEnd]) ? \"end\" : \"start\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"value2Degree = (value) => {\n const angleRad = scaleAngular(value);\n const angleDeg = radiansToDegrees(angleRad);\n return angleDeg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"function isAngleInRange(angle, range) {\n angle = normalizeAngle(angle);\n let [start, end] = range.map(normalizeAngle);\n\n if (start <= end) {\n return angle >= start && angle <= end;\n } else {\n // This is a wrapping range, so the angle must be outside the end-to-start range\n return angle >= start || angle <= end;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"function normalizeAngle(angle) {\n angle = angle % 360;\n if (angle < 0) angle += 360;\n return angle;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"roundWithSign = (number) => {\n return Math.sign(number) * Math.ceil(Math.abs(number));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1302,"value":"function addReverseToArray(arr) {\n return arr.concat(arr.slice().reverse());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"function radiansToDegrees(radians) {\n return radians * (180 / Math.PI);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"degreesToRadians = (degrees) => {\n return degrees * (Math.PI / 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"function distance(x1, y1, x2, y2) {\n return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"---\n### Data for relative growth chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1369,"value":"// Merge csMean values back into original data\ndataControlWithDiff = dataControl.map((d) => ({\n ...d,\n odMean: groupedData.find((g) => g.id === d.id).odMean\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"dataWithDiffMerged = dataWithDiff.map((d) => ({\n ...d,\n diffMean: groupedData.find((g) => g.id === d.id).diffMean\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"// Neccessary to compute mean of the difference for the bottom chart because couldn't be achieved by plot.transform.groupX\ngroupedData = Array.from(\n d3.group(dataWithDiff, (d) => d.id),\n ([id, values]) => ({ id, diffMean: d3.mean(values, (d) => d.diff) })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"// Neccessary to compute mean of the difference for the bottom chart because couldn't be achieved by plot.transform.groupX\ndataWithDiff = dataControl.map((d, i) => ({\n ...d,\n diff: dataEvolved[i].od - d.od\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"dataEvolved = rawData.filter(\n (d) =>\n d.mutant == outputFigA.mutant &&\n d.res == outputFigA.res &&\n d.challenged == outputFigA.challenged\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"dataControl = rawData.filter(\n (d) =>\n d.mutant == outputFigA.mutant &&\n d.res == \"CON\" &&\n d.challenged == outputFigA.challenged\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"odExtent = d3.extent(result, (d) => d.odDiff)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"result = rawData\n .filter((d) => d.res !== \"CON\") // Filter for \"DOR\" rows\n .map((dRes) => {\n const dCon = rawData.find(\n (d) =>\n d.id === dRes.id &&\n d.mutant === dRes.mutant &&\n d.rep === dRes.rep &&\n d.challenged === dRes.challenged &&\n d.res === \"CON\"\n ); // Find corresponding \"CON\" row\n if (dCon) {\n return {\n mutant: dRes.mutant,\n id: dRes.id,\n res: dRes.res,\n challenged: dRes.challenged,\n odDiff: dRes.od - dCon.od, // Calculate the difference\n rep: dRes.rep\n };\n }\n return null;\n })\n .filter((d) => d !== null) // Remove null entries","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"rawData = FileAttachment(\"all2.txt\").tsv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"---\n### Data for legend of relative growth chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":880,"value":"concFiltered = conc.filter((d) => d.challenged === outputFigA.challenged)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"conc = FileAttachment(\"conc.txt\").tsv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"---\n### Data for Collateral Sensitivity Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1292,"value":"extentCs = d3.extent(dataCs, (d) => d.m).map((d) => roundWithSign(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"extentCs1 = d3.extent(dataCs, (d) => d.m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"selectedGroup = dataCs\n .filter((d) => d.mutant == outputFigA.mutant && d.res == outputFigA.res)\n .sort((a, b) => a.m - b.m)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"dataCs = FileAttachment(\"cs_auc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"scaledOd = Math.floor(scalePoints(meanOd))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"meanOd = d3.mean(figB ? figB : fallbackValueFigB, (d) => d.od)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"pointsExtended = addOpacity(points, scaledOd)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"points = [\n ...poissonDiscSampler(\n outerRadius,\n outerRadius,\n width - outerRadius,\n height - outerRadius,\n outerRadius * 2\n )\n].filter((point) => {\n const dist = distance(point[0], point[1], width / 2, height / 2);\n return dist <= radiusInnerCircle;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"import { poissonDiscSampler } from \"@mbostock/the-delaunays-dual\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"i18next = import(\"https://cdn.skypack.dev/i18next@latest\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"