2b:null 2c:["$","title",null,{"children":"AI Worldview benchmark study — canvas version | Gapminder | Observable"}] 31:T1383,32:T503,BotHeader = function({vendor, top="none"}){ function getModelOptions(vendor) { return model_configurationWithHuman .filter(f => f.vendor === vendor && dataWithPrecomputedForceLayoutXY.has(f.model_configuration)) } const div = d3.create("div") .attr("class", "header") .style("top", top); div.append("div").attr("class", "logo").append("img") .attr("src", botLogos[vendor]?.src) //.style("width", "50px") .style("height", "100%") div.append("div").attr("class", "title") .text(vendor) .style("font-size", "2em") const modelOptions = getModelOptions(vendor); if (vendor !== "Human") { const select = div.append("div").attr("class", "input").append("select") .attr("name", "options") .attr("id", vendor) select.selectAll("option") .data(modelOptions) .join("option") .attr("value", d => d.model_configuration) .text(d => d.model_name) select.property('value', selectedModels[vendor]); select.on("change", event => { const setOption = d3.select(event.target).property("value"); const newSelectedModels = Object.assign({}, selectedModels, {[vendor]: setOption}); mutable selectedModels = newSelectedModels; }) } return div.node(); }33:T416,function OneChart({vendor, data, axis=null, marginBottom = 0, marginTop=0, height = 150}) { const chart = Plot.plot({ style: {fontSize: 24}, color: { legend: false, domain: Object.keys(sdgcolors), range: Object.values(sdgcolors), unknown: "#ccc" }, x: { axis, domain: [0,100], grid: true, tickFormat: (n) => n === 100 ? "100% " : n+"%", label: "Correct answers", labelArrow: false}, y: { axis: null }, marks: [ data && beeswarmX(data, { className: "swarm", x: (d) => d.correct_rate, y: () => 0, r: 4, opacity: 0.6, xStrength: 3, yStrength: 0.06, fill: d => questionMap.get(d.question).sdg_world_topics, strokeWidth: 1, stroke: "white", paintOrder: "stroke", }), Plot.ruleX([33.3], {stroke: "orange", strokeWidth: 3}), ], width, height, inset: 20, marginTop, marginRight: 0, marginLeft: 0, marginBottom }) return chart; } 34:Tb2a,function OneChartCanvas({ vendor, axis=null, marginBottom = 0, marginTop=0, height = 200, width = 800, data, fill = (d) => sdgcolors[questionMap.get(d.question).sdg_world_topics], highres = true, }) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); const ratio = window.devicePixelRatio || 1; if (highres) { canvas.width = width * ratio; canvas.height = height * ratio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; context.scale(ratio, ratio); } else { canvas.width = width; canvas.height = height; } function render(highlightSpec) { context.clearRect(0, 0, width, height); if(!data)return; for (const node of data) { const highlighted = highlightSpec && highlightSpec.goal === questionMap.get(node.question).sdg_world_topics || highlightSpec && highlightSpec.question === node.question; context.beginPath(); context.arc(node.x, node.y + height/2, highlighted ? 7 : node.r, 0, 2 * Math.PI); context.fillStyle = fill(node); context.globalAlpha = highlightSpec && !highlighted ? 0.1 : 1; // Change opacity if highlighted context.fill(); // Add a stroke if (highlighted) { context.lineWidth = 2; // Adjust the stroke width context.strokeStyle = "white"; // Stroke color context.stroke(); } context.globalAlpha = 1; // Reset opacity } // Draw the line context.strokeStyle = "orange"; // Line color context.lineWidth = 3; // Line width context.beginPath(); context.moveTo(xScale(33.3), marginTop); // Starting point (x1, y1) context.lineTo(xScale(33.3), height - marginBottom - marginTop); // Ending point (x2, y2) context.stroke(); // Render the line } // Add interactivity let lastHoveredIndex = null; canvas.addEventListener("mousemove", (event) => { const hoveredIndex = getNearestIndex(event); if (hoveredIndex !== lastHoveredIndex) canvas.dispatchEvent(new CustomEvent("circlehover", { detail: data[hoveredIndex] })); lastHoveredIndex = hoveredIndex; }); canvas.addEventListener("click", (event) => { const hoveredIndex = getNearestIndex(event); canvas.dispatchEvent(new CustomEvent("circleclick", { detail: data[hoveredIndex] })); }); function getNearestIndex(event){ const rect = canvas.getBoundingClientRect(); const mouseX = (event.clientX - rect.left); const mouseY = (event.clientY - rect.top); const distances = data.map((d, i)=>{ const dx = mouseX - d.x; const dy = mouseY - height/2 - d.y; return {index: i, distance: Math.sqrt(dx * dx + dy * dy)}; }).toSorted((a,b) => a.distance - b.distance); return distances[0].index; } render(); return {canvas, render}; }35:T293d,promptsPopup = { let inner_question; let inner_model; let inner_view; const getState = function(){return {question: inner_question, model: inner_model}}; const update = function({view = inner_view, question = inner_question, model = inner_model}){ if(model === "human") return; inner_model = model; inner_question = question; inner_view = view; view.html(""); view.style("display", "block"); view.append("div") .attr("class", "close-cross") .text("X") .on("click", () => { view.style("display", "none"); }); const questionProps = questionMap.get(question); const goal = questionProps.sdg_world_topics; function emphasizeWords(keywords, text) { // Define a list of common prepositions and articles to exclude const excludeWords = ['a', 'as', 'the', 'in', 'on', 'at', 'of', 'to', 'and', 'for', 'with', 'by', 'from']; // Extract the words between underscores in the first string const wordsToEmphasize = keywords .split('_') .filter(word => word && !excludeWords.includes(word.toLowerCase())); // Exclude common words // Create a regex pattern to match any of the words in the list, including optional apostrophes const regex = new RegExp(`\\b(${wordsToEmphasize.map(word => word.replace(/'/g, "\\'")).join('|')})\\b`, 'gi'); // Replace matching words with the tags const emphasizedText = text.replace(regex, '$1'); return emphasizedText; } const cscale = d3.scaleOrdinal() .domain(["correct","wrong", "very_wrong", "fail", "n/a"]) .range(["darkgreen", "#dd8757", "#ff2626", "grey", "blue"]) const cOptionScale = d3.scaleOrdinal() .domain(["1","2", "3", "fail", "n/a"]) .range(["darkgreen", "#dd8757", "#ff2626", "grey", "blue"]) const tscale = d3.scaleOrdinal() .domain(["correct","wrong", "very_wrong", "fail", "n/a"]) .range(["Correct","Wrong", "Very wrong", "Failed", "n/a"]) const escale = d3.scaleOrdinal() .domain(["correct","wrong", "very_wrong", "fail", "n/a"]) .range(["🟢","🟠", "🔴", "⚪️", "🔵"]) function getCorrectnessClassName(num){ if (num == 1) return "correct"; if (num == 2) return "wrong"; if (num == 3) return "verywrong"; } function getCorrectnessText(num){ if (num == 1) return "Correct"; if (num == 2) return "Wrong"; if (num == 3) return "Very wrong"; } const results = datapoints_prompt_variationMap.get(model).get(question) .toSorted((a,b) => cscale.domain().indexOf(a.evaluation_result) - cscale.domain().indexOf(b.evaluation_result)); view.append("h1").text("Question variations"); view.append("p").style("width", "100%").text(`Chatbots change their mind when we ask the same question with slight variations or provide differnt context. We made ${results.length} prompt variations for this question to see if bots would answer differently`); const vendor = model_configurationWithHumanMap.get(model).vendor; const modelName = model_configurationWithHumanMap.get(model).model_name; view.append("img").attr("src", botLogos[vendor].src) .style("width", "40px") .style("height", "40px") .style("position", "relative") .style("top", "9px") .style("margin-right", "5px") .style("display", "inline-block"); view.append("h1").style("display", "inline-block").text(modelName.split(" ")[0]); view.append("h1").style("display", "inline-block").style("margin-right", "10px").style("margin-left", "10px").text("–vs–"); view.append("div") .style("display", "inline-block") .html(` f.goal===goal).image.src}>`) .style("width", "40px") .style("height", "40px") .style("position", "relative") .style("top", "9px") .style("margin-right", "5px") view.append("h1") .style("display", "inline-block") .style("padding-left", "5px") .style("padding-right", "10px") .style("color", "white") .style("background-color", sdgcolors[goal]) .html(`${sdgGoalText[goal].title} Question ${question}`) view.append("p").text("Model configuration: " + modelName); function computeCorrectnessStats(results){ if (!results) return null; const resultsByCorrectness = d3.group(results, d => d.evaluation_result); const resultsSummary = cscale.domain().map(correctness => { const total = (resultsByCorrectness.get(correctness) || []).length; return {correctness, total, rate: total / results.length } }) return resultsSummary; } const currentModelResultsSummary = computeCorrectnessStats(results); view.append("div").attr("class", "text-stats") .selectAll("span") .data(currentModelResultsSummary) .join("span") .style("color", d => cscale(d.correctness)) .text((d, i) => `${tscale(d.correctness)}: ${d.total} ${i === 0 ? "prompt variations" : ""} (${Math.round(d.rate * 100)}%)`) const bar = view.append("div") .style("width", "95%") .on("mouseleave", (event, e) => highlightPrompt()); bar.selectAll("div") .data(currentModelResultsSummary) .join("span") .style("display", "inline-block") .each(function(d){ const view = d3.select(this) .style("width", (d.rate * 100) + "%") .style("height", "40px"); view.selectAll("span") .data(results.filter(f => f.evaluation_result === d.correctness)) .join("span") .attr("class", "prompt-hover") .attr("id", d => "span-"+d.prompt_variation) .style("display", "inline-block") .style("background", f => cscale(f.evaluation_result)) .style("box-sizing", "border-box") .style("cursor", "pointer") .style("width", 100/d.total+"%") .style("border-right", "1px solid white") .on("mouseenter", (event, e) => highlightPrompt(e)); }) const otherBots = [] .concat(model_configurationWithHuman.filter(f => f.vendor === vendor).map(m => m.model_configuration)) .concat(Object.values(selectedModels)) .filter(f => f !== "human" && f !== model) const otherBotsData = otherBots .map(mc => ({mc, prompts: datapoints_prompt_variationMap.get(mc)?.get(question)})) .map(({mc, prompts}) => ({mc, stats: computeCorrectnessStats(prompts)})) .filter(f => f.stats) view.append("div").text("For context, here is what other bots reply:") view.append("div") .style("width", "95%") .selectAll("div") .data(otherBotsData) .join("div") .each(function(d){ const view = d3.select(this) .style("line-height", "0.6em") .style("margin-top", "0.3em") .style("position","relative") .attr("class", "other-bot"); view.append("div") .style("font-size", "0.7em") .text(model_configurationWithHumanMap.get(d.mc).vendor + " " + model_configurationWithHumanMap.get(d.mc).model_name) .on("click", (event, d)=>{ update({model: d.mc}) }) view .selectAll("span") .data(d.stats) .join("span") .style("display", "inline-block") .style("background", e => cscale(e.correctness)) .style("height", "5px") .style("font-size", "0.1em") .style("width", e => (e.rate * 100) + "%"); }) const promptContainer = view.append("div").attr("class", "prompt"); function highlightPrompt(prompt){ promptContainer.html(""); const promptText = prompt && promptsMap.get(prompt.prompt_variation).replaceAll("\n"," "); const promptTextWithEm = promptText && emphasizeWords(prompt.prompt_variation, promptText); const questionText = questionProps.published_version_of_question || "The question probably had images in it, this app doesn't support it yet"; const compoundText = promptTextWithEm ? promptTextWithEm.replace("{question}", `“${questionText.trim()}”`) : `${questionText}`; promptContainer.append("div") .style("font-size", "1.5em") .html(compoundText) .select("span.info-question") .style("color", "white") .style("background-color", sdgcolors[goal]) promptContainer.append("div") .style("font-size", "0.7em") .html(` A (${getCorrectnessText(questionProps.option_a_correctness)}). ${questionProps.option_a} , B (${getCorrectnessText(questionProps.option_b_correctness)}). ${questionProps.option_b} , C (${getCorrectnessText(questionProps.option_c_correctness)}). ${questionProps.option_c} . `) promptContainer.append("div") .attr("class", "clip-effect") .text(prompt ? `${escale(prompt.evaluation_result)} Bot answered this variation ${tscale(prompt.evaluation_result)}` : "Hover some of the items above see how the bot answered") .style("color", prompt && cscale(prompt.evaluation_result)) .style("font-size", "1.5em") .style("margin-top", "20px"); } // let i = 0; // const interval = setInterval(()=>{ // console.log("i", i, results[i]) // highlightPrompt(results[i]); // bar.select(".prompt-hover#span-"+results[i].prompt_variation).style("height", "40px"); // if (i>0) bar.select(".prompt-hover#span-"+results[i-1].prompt_variation).style("height", "30px"); // i++; // if (i >= results.length) { // clearInterval(interval); // highlightPrompt(); // } // }, 20) highlightPrompt(); } return {getState, update}; }36:T125f,function interactivity(app, sections){ function toSentenceCase(str) { if (!str) return str; // Handle empty or null strings const hyphenTuned = str.replace("nfrastructure", "nfrastructure").replace("nnovation", "nnovation"); return hyphenTuned.charAt(0).toUpperCase() + hyphenTuned.slice(1).toLowerCase(); } const DOM = {}; DOM.container = d3.select(app); DOM.questionsSection = DOM.container.select(".questions-section"); DOM.qIconContainer = DOM.container.select(".question-icon-container"); DOM.qPileContainer = DOM.container.select(".question-pile-container"); DOM.qIcons = DOM.qIconContainer.selectAll(".question-icon"); DOM.qPiles = DOM.qPileContainer.selectAll(".question-pile"); DOM.qRects = DOM.qPileContainer.selectAll(".question-rect"); DOM.qDetails = DOM.container.select(".info-question-details"); DOM.hints = DOM.container.selectAll(".hoverHint"); DOM.intro = DOM.container.selectAll(".intro"); DOM.promptsPopup = DOM.container.select(".prompts-popup"); DOM.questionsSection .on("mouseleave", (event, d) => highlight(null)); DOM.qIcons .on("mouseenter", (event, d) => highlight({goal: d.goal})); DOM.qRects .on("mouseenter", (event, d) => highlight({question: d.question})) .on("click", (event, d) => { const defaultModel = Object.values(selectedModels)[0]; promptsPopup.update({ view: DOM.promptsPopup, show: true, question: d.question, model: promptsPopup.getState.model || defaultModel, }) }); sections.forEach(section => { const data = section.config.data; d3.select(section.chart.canvas) .on("mouseleave", (event, d) => highlight(null)) .on("circlehover", (event, i) => highlight({question: event?.detail?.question})) .on("circleclick", (event, i) => { promptsPopup.update({ view: DOM.promptsPopup, show: true, question: event?.detail?.question, model: event?.detail?.model_configuration }) }); }) function highlight(spec){ sections.forEach(section => section.chart.render(spec)); if(spec && spec.question){ DOM.qRects .style("opacity", q => q.question === spec.question ? 1 : 0.1) } if (!spec || spec.goal) { DOM.qRects.style("opacity", 1) } if(spec && spec.goal) { const text = sdgGoalText[spec.goal]; DOM.qDetails.html(`

${text.title}

${toSentenceCase(text.objective)}

${text.description}
`); DOM.qDetails.select(".info-image").html(` f.goal===spec.goal).image.src}>`) DOM.qDetails.select("h2").style("color", sdgcolors[spec.goal]); DOM.hints.style("display", "none"); DOM.intro.style("display", "none"); } if(spec && spec.question) { const text = questionMap.get(spec.question); const goal = text.sdg_world_topics; function getCorrectnessClassName(num){ if (num == 1) return "correct"; if (num == 2) return "wrong"; if (num == 3) return "verywrong"; } function getCorrectnessText(num){ if (num == 1) return "Correct answer:"; if (num == 2) return "Wrong answer:"; if (num == 3) return "Very wrong answer:"; } DOM.qDetails.html(`

${sdgGoalText[goal].title}

Question ${spec.question}

${text.published_version_of_question || "The question probably had images in it, this app doesn't support it yet"}

${getCorrectnessText(text.option_a_correctness)}
A. ${text.option_a}

${getCorrectnessText(text.option_b_correctness)}
B. ${text.option_b}

${getCorrectnessText(text.option_c_correctness)}
C. ${text.option_c}
`); DOM.qDetails.select(".info-image").html(` f.goal===goal).image.src}>`) DOM.qDetails.select("h2").style("color", sdgcolors[goal]); DOM.hints.style("display", "none"); DOM.intro.style("display", "none"); } if(!spec) { DOM.hints.style("display", "block"); DOM.intro.style("display", "block"); DOM.qDetails.text(""); } } //highlight(null); }37:Td26,sdgGoalText = ({ "sdg-world-01": { title: "UN Goal 1", objective: "No Poverty", description: "By 2030, eradicate extreme poverty for all people everywhere." }, "sdg-world-02": { title: "UN Goal 2", objective: "Zero Hunger", description: "End hunger, achieve food security and improved nutrition by 2030." }, "sdg-world-03": { title: "UN Goal 3", objective: "Good Health and Well-being", description: "Ensure healthy lives and promote well-being for all at all ages by 2030." }, "sdg-world-04": { title: "UN Goal 4", objective: "Quality Education", description: "Ensure that all girls and boys complete free, equitable and quality primary and secondary education by 2030." }, "sdg-world-05": { title: "UN Goal 5", objective: "Gender Equality", description: "To achieve gender equality and empower all women and girls." }, "sdg-world-06": { title: "UN Goal 6", objective: "Clean Water and Sanitation", description: "Ensure availability and sustainable management of water and sanitation for all by 2030." }, "sdg-world-07": { title: "UN Goal 7", objective: "Affordable and Clean Energy", description: "Ensure access to affordable, reliable, sustainable and modern energy for all by 2030." }, "sdg-world-08": { title: "UN Goal 8", objective: "Decent Work and Economic Growth", description: "Promote sustained, inclusive and sustainable economic growth." }, "sdg-world-09": { title: "UN Goal 9", objective: "Industry, Innovation and Infrastructure", description: "Build resilient infrastructure, promote inclusive and sustainable industrialization and foster innovation by 2030." }, "sdg-world-10": { title: "UN Goal 10", objective: "Reduced Inequality", description: "Reduce inequality within and among countries by 2030." }, "sdg-world-11": { title: "UN Goal 11", objective: "Sustainable Cities and Communities", description: "Make cities and human settlements inclusive, safe, resilient and sustainable." }, "sdg-world-12": { title: "UN Goal 12", objective: "Responsible Consumption and Production", description: "Ensure sustainable consumption and production patterns." }, "sdg-world-13": { title: "UN Goal 13", objective: "Climate Action", description: "Take urgent action to combat climate change and its impacts." }, "sdg-world-14": { title: "UN Goal 14", objective: "Life Below Water", description: "Conserve and sustainably use the oceans, seas and marine resources for sustainable development." }, "sdg-world-15": { title: "UN Goal 15", objective: "Life on Land", description: "Protect, restore and promote sustainable use of terrestrial ecosystems, combat desertification and halt biodiversity loss." }, "sdg-world-16": { title: "UN Goal 16", objective: "Peace and Justice Strong Institutions", description: "Promote peaceful and inclusive societies for sustainable development; provide access to justice for all." }, "sdg-world-17": { title: "UN Goal 17", objective: "Partnerships to achieve the Goal", description: "Strengthen the means of implementation and revitalize the global partnership for sustainable development." }, "other": { title: "Other", objective: "", description: "Questions not related to UN Sustainable Development Goals" } }) 38:[{"id":"a4ab1a54887736fbc9ece951066d60fc276906bcbd86730cb2343d0a92cac996c1b7c36d4fb2c47b1f792e1a8c9cccaa85e2a7f06a6e8b0e6be25b6e02ea7252","href":"https://static.observableusercontent.com/files/a4ab1a54887736fbc9ece951066d60fc276906bcbd86730cb2343d0a92cac996c1b7c36d4fb2c47b1f792e1a8c9cccaa85e2a7f06a6e8b0e6be25b6e02ea7252","name":"GOAL_3.svg","type":"image/svg+xml","lastModified":1733823467579.75,"size":6860},{"id":"f62a9ae2ee7d592c91cc7f88f14d8644148e225ea2104fca6b2e742e85e646634031389a3e43e6b85c43c53874be5f42f414c3df5f296b47e37767e032eeeac9","href":"https://static.observableusercontent.com/files/f62a9ae2ee7d592c91cc7f88f14d8644148e225ea2104fca6b2e742e85e646634031389a3e43e6b85c43c53874be5f42f414c3df5f296b47e37767e032eeeac9","name":"GOAL_13.svg","type":"image/svg+xml","lastModified":1733823467581.743,"size":6101},{"id":"e18187c7295984f29a8ece3017bed6ec013306a648fba534dd81bad581d14968464d25c1382ef8d29b3bf7b8289060b27b0e584edc625a1e870e7892451dfc60","href":"https://static.observableusercontent.com/files/e18187c7295984f29a8ece3017bed6ec013306a648fba534dd81bad581d14968464d25c1382ef8d29b3bf7b8289060b27b0e584edc625a1e870e7892451dfc60","name":"GOAL_17.svg","type":"image/svg+xml","lastModified":1733823467640.347,"size":7442},{"id":"e02c3784acc6de33a502e39308b8fca7684868b46c8fa4ade3703fb6a0d10712503b6d2d1fa37abc785704b167a16c74941f5916ff99751a4b405de72dc1e997","href":"https://static.observableusercontent.com/files/e02c3784acc6de33a502e39308b8fca7684868b46c8fa4ade3703fb6a0d10712503b6d2d1fa37abc785704b167a16c74941f5916ff99751a4b405de72dc1e997","name":"GOAL_5.svg","type":"image/svg+xml","lastModified":1733823467586.005,"size":4472},{"id":"93f359c76baafd4675a200ab952cf826cef58fabc6e94599cf8f44b086cfac0f63fb47ced33567ac38d9c1cfa1fd0b4a9ab8d8d06b6cbb33a35405548fa4ab99","href":"https://static.observableusercontent.com/files/93f359c76baafd4675a200ab952cf826cef58fabc6e94599cf8f44b086cfac0f63fb47ced33567ac38d9c1cfa1fd0b4a9ab8d8d06b6cbb33a35405548fa4ab99","name":"GOAL_7.svg","type":"image/svg+xml","lastModified":1733823467587.431,"size":8784},{"id":"6a087216c11d73cceb6e2dd84f79e71b34af3ae37ac887267d76cee3219a6d43953a1a6f66e894e8f4978ebd9471c1e8e797885ee836498f35c82ccf82f6179a","href":"https://static.observableusercontent.com/files/6a087216c11d73cceb6e2dd84f79e71b34af3ae37ac887267d76cee3219a6d43953a1a6f66e894e8f4978ebd9471c1e8e797885ee836498f35c82ccf82f6179a","name":"GOAL_6.svg","type":"image/svg+xml","lastModified":1733823467587.604,"size":5695},{"id":"be34c335f24193500599799502df79561aa2838789118489e026f94a6331b15af3812efa713403bf8fb443512c885fd9853285c9b0f6340f7e840ac8329f4acf","href":"https://static.observableusercontent.com/files/be34c335f24193500599799502df79561aa2838789118489e026f94a6331b15af3812efa713403bf8fb443512c885fd9853285c9b0f6340f7e840ac8329f4acf","name":"GOAL_15.svg","type":"image/svg+xml","lastModified":1733823467591.654,"size":5148},{"id":"365c82c116ed79a16a36f6e32e693c36181d1a1c76bcb6ca2f078a15541adbb42fcefc6d979c3cc683286ea650f62b00f9e5c78c26294fa25da21a98e0efe1bd","href":"https://static.observableusercontent.com/files/365c82c116ed79a16a36f6e32e693c36181d1a1c76bcb6ca2f078a15541adbb42fcefc6d979c3cc683286ea650f62b00f9e5c78c26294fa25da21a98e0efe1bd","name":"GOAL_2.svg","type":"image/svg+xml","lastModified":1733823467594.877,"size":4492},{"id":"1108c33ab779a1fa48ece84bb965ee5e9019a2dadaf3d8c9673a35c822542026b75700c15df3f6e5507ddb96b7d25b1365eb6b206734c98801ee83e468b04612","href":"https://static.observableusercontent.com/files/1108c33ab779a1fa48ece84bb965ee5e9019a2dadaf3d8c9673a35c822542026b75700c15df3f6e5507ddb96b7d25b1365eb6b206734c98801ee83e468b04612","name":"GOAL_1.svg","type":"image/svg+xml","lastModified":1733823467597.597,"size":6040},{"id":"1a69eb12329d6f71fb4b52471eb720c88b99740526fd307747cf8ccd745a76db86500c29ac3efdb7935ad19d46e39ffa8572174797371a3d4cd7e9572fb70a50","href":"https://static.observableusercontent.com/files/1a69eb12329d6f71fb4b52471eb720c88b99740526fd307747cf8ccd745a76db86500c29ac3efdb7935ad19d46e39ffa8572174797371a3d4cd7e9572fb70a50","name":"GOAL_4.svg","type":"image/svg+xml","lastModified":1733823467608.597,"size":4157},{"id":"f2c3756e8c3aebd53c6f92ef747c316848f081cf975d7f3a952f604bdb15059892190aa3a41986ee89b2aa38b9976c7e45395ad411c8c8fbc84ce2bed7ce16f3","href":"https://static.observableusercontent.com/files/f2c3756e8c3aebd53c6f92ef747c316848f081cf975d7f3a952f604bdb15059892190aa3a41986ee89b2aa38b9976c7e45395ad411c8c8fbc84ce2bed7ce16f3","name":"GOAL_14.svg","type":"image/svg+xml","lastModified":1733823467624.576,"size":6061},{"id":"93519007d379afe87f726392fe86cf7218d5fee331b7f5ef2e236ff53d60417b04c4ce5c52defeecf3e79d7eefe9dfd40f6e62416297b3ee5e27d51fd188d5d1","href":"https://static.observableusercontent.com/files/93519007d379afe87f726392fe86cf7218d5fee331b7f5ef2e236ff53d60417b04c4ce5c52defeecf3e79d7eefe9dfd40f6e62416297b3ee5e27d51fd188d5d1","name":"GOAL_8.svg","type":"image/svg+xml","lastModified":1733823467674.278,"size":8945},{"id":"d8b08cd9cf3488718d453803ef8ca5a28f93413931d9015dc165025795508106530e4e1d6bc94db9cc9a3b325d6026afec5225b356d593d3fa74c08195addf9f","href":"https://static.observableusercontent.com/files/d8b08cd9cf3488718d453803ef8ca5a28f93413931d9015dc165025795508106530e4e1d6bc94db9cc9a3b325d6026afec5225b356d593d3fa74c08195addf9f","name":"GOAL_9.svg","type":"image/svg+xml","lastModified":1733823467595.538,"size":9411},{"id":"947a40f2ac76bfef1cc33a6d28994bf0ed7f12888735483b9712e8fe6490704b726d2166e064f7f28127892a9d99cba5baf7b07f49e8123f3bcbe2a18dc08486","href":"https://static.observableusercontent.com/files/947a40f2ac76bfef1cc33a6d28994bf0ed7f12888735483b9712e8fe6490704b726d2166e064f7f28127892a9d99cba5baf7b07f49e8123f3bcbe2a18dc08486","name":"GOAL_12.svg","type":"image/svg+xml","lastModified":1733823467679.48,"size":11668},{"id":"58876ba02ea54849aac651168135ed172cc481642a6615c0e96ee40e7c0576ca131fe5afb0665741325ef44cd25a2fefe9cccbdd790cd1634d4086141ccc4f81","href":"https://static.observableusercontent.com/files/58876ba02ea54849aac651168135ed172cc481642a6615c0e96ee40e7c0576ca131fe5afb0665741325ef44cd25a2fefe9cccbdd790cd1634d4086141ccc4f81","name":"GOAL_10.svg","type":"image/svg+xml","lastModified":1733823467710.752,"size":5516},{"id":"5e960c4e038120696a17fd9b776e8e185ad8904f43cf42046cd1d774dbc488fc82fcd8f5789a2909972bf95b2a7ec9e47002d48acb7d4766f98645b038c221f2","href":"https://static.observableusercontent.com/files/5e960c4e038120696a17fd9b776e8e185ad8904f43cf42046cd1d774dbc488fc82fcd8f5789a2909972bf95b2a7ec9e47002d48acb7d4766f98645b038c221f2","name":"GOAL_16.svg","type":"image/svg+xml","lastModified":1733823467782.739,"size":9360},{"id":"59ad6434286c03c087c9b219de4a2a4080360ff676a93a6cb5c8f8c4c78ea2af97def09359ef8f0dfeb9c175719b4c54e1684ed4a5791ae3ae92199d34109e6c","href":"https://static.observableusercontent.com/files/59ad6434286c03c087c9b219de4a2a4080360ff676a93a6cb5c8f8c4c78ea2af97def09359ef8f0dfeb9c175719b4c54e1684ed4a5791ae3ae92199d34109e6c","name":"GOAL_11.svg","type":"image/svg+xml","lastModified":1733823467592.992,"size":11877},{"id":"b84923f660a64a1ef3719f18e92a7b2b8da17e257df34fde0e33c5fc7c912bb05f5146b7be344c3b93fe9eaae4507bd0055b3d4c690d98ae21191c1f93df32f9","href":"https://static.observableusercontent.com/files/b84923f660a64a1ef3719f18e92a7b2b8da17e257df34fde0e33c5fc7c912bb05f5146b7be344c3b93fe9eaae4507bd0055b3d4c690d98ae21191c1f93df32f9","name":"openai.png","type":"image/png","lastModified":1736720931564.069,"size":44124},{"id":"d3c87c029528dd46f0874efa9ddb64afc32f21e1ea41660703f3959b52bf967db16dd6577ae719180c0fc814a7bc2b1b4dca51f9b731a6362e1cc9ec0ccdbb67","href":"https://static.observableusercontent.com/files/d3c87c029528dd46f0874efa9ddb64afc32f21e1ea41660703f3959b52bf967db16dd6577ae719180c0fc814a7bc2b1b4dca51f9b731a6362e1cc9ec0ccdbb67","name":"xai.png","type":"image/png","lastModified":1736720931419.264,"size":10936},{"id":"e6ef9a90485f3055d29c7926f04c6ee8eed0d48c55a63ba9a26cc7783fc3a9eecbd422275d6d55cb4e3a0e7d52a48c0e34135a1989501e89ab9d6db9def3608f","href":"https://static.observableusercontent.com/files/e6ef9a90485f3055d29c7926f04c6ee8eed0d48c55a63ba9a26cc7783fc3a9eecbd422275d6d55cb4e3a0e7d52a48c0e34135a1989501e89ab9d6db9def3608f","name":"human.png","type":"image/png","lastModified":1736720931438.23,"size":35137},{"id":"14c6d9b7f4114b4ac1da7cdf45ffcf7a1972acb45c78580d9905e066cb7d95c7fc2a867e48264482fbb202ce229017da526e628cd1059d7b3c9ab557917e07c2","href":"https://static.observableusercontent.com/files/14c6d9b7f4114b4ac1da7cdf45ffcf7a1972acb45c78580d9905e066cb7d95c7fc2a867e48264482fbb202ce229017da526e628cd1059d7b3c9ab557917e07c2","name":"alibaba.png","type":"image/png","lastModified":1736720931503.054,"size":16607},{"id":"ff6131541a4d9230add4a9c414da2208d7c841531e169d9848795ec2083c3af3d7fa2466cae4603de8730db1bff3427fca0be795a2e9249b95d2a8818e6a7372","href":"https://static.observableusercontent.com/files/ff6131541a4d9230add4a9c414da2208d7c841531e169d9848795ec2083c3af3d7fa2466cae4603de8730db1bff3427fca0be795a2e9249b95d2a8818e6a7372","name":"chimp.png","type":"image/png","lastModified":1736720931470.26,"size":11191},{"id":"4a86a9ef534e19966ee31bc7e9bc3a1af05bb10ffe4f068950e29ed025f4d8e5af86245e32727e63225d7fe1c1e6a2d119ddcbc408f7bca71ac5964c580a5008","href":"https://static.observableusercontent.com/files/4a86a9ef534e19966ee31bc7e9bc3a1af05bb10ffe4f068950e29ed025f4d8e5af86245e32727e63225d7fe1c1e6a2d119ddcbc408f7bca71ac5964c580a5008","name":"meta.png","type":"image/png","lastModified":1736720931575.452,"size":77905},{"id":"cc355b965dd9fd6393a81e87387aef993e96ae4bd297772cd69ef80f7273254d46dd7c6afd9931784b8820014a8aff3012d0f72bb87c83ea47eb61a0c5bf18bb","href":"https://static.observableusercontent.com/files/cc355b965dd9fd6393a81e87387aef993e96ae4bd297772cd69ef80f7273254d46dd7c6afd9931784b8820014a8aff3012d0f72bb87c83ea47eb61a0c5bf18bb","name":"anthropic.png","type":"image/png","lastModified":1736720931633.461,"size":42963},{"id":"b73367813400d5c820793c31fa020c04f1ce1ebb5ea020644fba233e8c952ef483bad04aacf7745a81c2e54c116a2785349000e74981f6c3de9525415031fdcf","href":"https://static.observableusercontent.com/files/b73367813400d5c820793c31fa020c04f1ce1ebb5ea020644fba233e8c952ef483bad04aacf7745a81c2e54c116a2785349000e74981f6c3de9525415031fdcf","name":"google.png","type":"image/png","lastModified":1736720931722.035,"size":80560},{"id":"be513b1bdb4cad2ce0de311835790598cc50d6666381a0f68a5cc61edc7d50f677808fbdb63b631ca5cb7d5667dceb8c329342cf1c46da05c690586feb836213","href":"https://static.observableusercontent.com/files/be513b1bdb4cad2ce0de311835790598cc50d6666381a0f68a5cc61edc7d50f677808fbdb63b631ca5cb7d5667dceb8c329342cf1c46da05c690586feb836213","name":"GOAL_other.svg","type":"image/svg+xml","lastModified":1733841761953.373,"size":2728},{"id":"b2a37dce198f6b0913caca3f2bc90e820c0b1727672b0d1cac390814c6569da99a0898b50282ef0ed1ee570742c69f0486edb799be249c7bc493c2b26955da4f","href":"https://static.observableusercontent.com/files/b2a37dce198f6b0913caca3f2bc90e820c0b1727672b0d1cac390814c6569da99a0898b50282ef0ed1ee570742c69f0486edb799be249c7bc493c2b26955da4f","name":"mistral.png","type":"image/png","lastModified":1762003111237.917,"size":12475}] 2f:{"id":"7b5ec44e405a5b73","slug":"aiwb-canvas","title":"AI Worldview benchmark study — canvas version","thumbnail":"6be6a9c9aa8142835d6e8642c07dc3e03ce9cb19c98a7ac49d35120cd6dbd58f","access_level":"public","create_time":"$D2024-12-08T06:49:13.546Z","update_time":"$D2025-11-01T13:19:00.962Z","view_time":null,"first_public_time":"$D2024-12-10T10:34:37.736Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a9de5f7e4ccd5c5f","login":"gapminder","name":"Gapminder","avatar_url":"https://avatars-next.observableusercontent.com/703245112c5f35551dde65d78cb32392cb679d7124ff5da6f829674c492575e2","tier":"starter_2024"},"version":2172,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null}],"members":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"role":"editor"},{"type":"team","id":"a9de5f7e4ccd5c5f","login":"gapminder","name":"Gapminder","avatar_url":"https://avatars-next.observableusercontent.com/703245112c5f35551dde65d78cb32392cb679d7124ff5da6f829674c492575e2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"AI Worldview benchmark study — canvas version","cells":[{"id":0,"value":"# AI Worldview benchmark study — canvas version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1436,"value":"chartHeight = ({\n canvasHeight: 200,\n singleChartHeight: 140,\n headerShiftHeight: 30\n }\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"exportedCell = {\n const app = html`\n ${styles}\n
\n
\n ${explanation}\n
\n
\n
${explanationTopics}
\n
\n ${charts.map(m => html.fragment`
${m.header}${m.chart.canvas}
`)}\n \n
Chimp level (answering by random)
\n
${axis}
\n
\n
\n ${QuestionsCatalog}\n
\n
\n
\n `\n interactivity(app, charts);\n return app;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"explanation = html`
AI Worldview Benchmark
\n
We are testing if the chat bots suffer from the same misconceptions as humans. Here are the results from the ${questionMap.size} fact-questions that humans are generally wrong about.
\n
Hover circles to see which question they represent →
`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"explanationTopics = html`
Or browse questions by topics ↓
`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"charts = sections.map(config => ({config, header: BotHeader(config), chart: OneChartCanvas(config)}) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"# STYLE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":734,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"styles","database":"$undefined"},{"id":1046,"value":"# STATE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1183,"value":"function getChartWidth(){\n return Math.min(width * 4 /5, 2000*4/5);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"mutable selectedModels = {\n const rollup = d3.rollups(model_configurationWithHuman, v=>v[0].model_configuration, d => d.vendor)\n .filter(([_, f]) => dataWithPrecomputedForceLayoutXY.has(f))\n return Object.fromEntries(rollup);\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"sections = {\n const height = chartHeight.canvasHeight;\n const width = getChartWidth();\n const marginTop = 0;\n const marginBottom = chartHeight.canvasHeight - chartHeight.singleChartHeight;\n function getData(vendor) {\n return dataWithPrecomputedForceLayoutXY.get(selectedModels[vendor])\n }\n return vendors.map((vendor, index) => ({\n vendor, \n data: getData(vendor), \n height, width,\n marginTop: index === 0 ? marginTop : marginTop,\n marginBottom: index === vendors.length - 1 ? margin.bottom: marginBottom\n }))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2164,"value":"vendors = [...new Set(model_configurationWithHuman.map(d => d.vendor))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"margin = ({right: 20, left: 20, bottom: 40, top: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"xScale = d3.scaleLinear([0, 100], [margin.left, getChartWidth() - margin.right - margin.left]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"# DATA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"DDFCsvReader = require('https://unpkg.com/@vizabi/reader-ddfcsv@4.5.2/dist/reader-ddfcsv.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"readerInstance = {\n const reader = new DDFCsvReader.getDDFCsvReaderObject();\n reader.init({path: \"https://github.com/open-numbers/ddf--gapminder--ai_worldview_benchmark.git\"})\n return reader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"## Concepts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"concepts = readerInstance.read({\n from: \"concepts\",\n language: \"en\",\n select: {key: [\"concept\"], value: [\"concept_type\", \"name\"]},\n where: {}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"## Entities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"model_configuration = readerInstance.read({\n from: \"entities\",\n language: \"en\",\n select: {key: [\"model_configuration\"], value: [\"model_id\",\"model_name\", \"vendor\", \"model_publish_date\"]},\n where: {}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"model_configurationWithHuman = model_configuration.concat({\n model_configuration: \"human\",\n model_id: \"human\",\n model_name: \"Human\",\n vendor: \"Human\",\n}).toSorted((b, a) => new Date(a.model_publish_date) - new Date(b.model_publish_date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"model_configurationWithHumanMap = d3.rollup(model_configurationWithHuman, v=>v[0], d=>d.model_configuration)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"question = readerInstance.read({\n from: \"entities\",\n language: \"en\",\n select: {\n key: [\"question\"],\n value:[\n \"language\",\n \"published_version_of_question\",\n \"contentful_id\",\n \"human_wrong_percentage\",\n \"topic_list\",\"sdg_world_topics\",\n \"other_topics\",\n \"option_a\", \"option_b\", \"option_c\", \"option_a_correctness\", \"option_b_correctness\", \"option_c_correctness\",\n ]},\n where: {}\n}).then(\n r => r.map(m => ({...m, sdg_world_topics: m.sdg_world_topics || \"other\"}))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"questionMap = d3.rollup(question, v=>v[0], d=>d.question)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1587,"value":"prompt_variations = readerInstance.read({\n from: \"entities\",\n language: \"en\",\n select: {key: [\"prompt_variation\"], value: [\"language\",\"question_template\",\"question_prompt_template\"]},\n where: {}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"promptsMap = d3.rollup(prompt_variations, v=>v[0].question_prompt_template, d=>d.prompt_variation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"## Datapoints","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"human = question.map(m => ({question: m.question, model_configuration: \"human\", correct_rate: 100-(+m.human_wrong_percentage)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"datapoints_correct_rate = readerInstance.read({\n from: \"datapoints\",\n language: \"en\",\n select: {key: [\"question\", \"model_configuration\"], value: [\"correct_rate\"]},\n where: {}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"datapoints_ratesWithHuman = datapoints_correct_rate.concat(human)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"datapoints_ratesByModel = d3.groups(\n datapoints_ratesWithHuman,\n (d) => d.model_configuration\n );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"dataWithPrecomputedForceLayoutXY = {\n const generator = forceGenerators({\n datasets: datapoints_ratesByModel.map(m => m[1]),\n x: (d) => d.correct_rate,\n ticks: 50,\n });\n\n for await (const step of generator) {\n yield new Map(step.map((m,i) => [datapoints_ratesByModel[i][0], m]));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"datapoints_prompts = readerInstance.read({\n from: \"datapoints\",\n language: \"en\",\n select: {key: [\"question\", \"model_configuration\", \"prompt_variation\"], value: [\"evaluation_result\"]},\n where: {}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"datapoints_prompt_variationMap = d3.group(datapoints_prompts, d => d.model_configuration, d=>d.question)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"# FORCE LAYOUT SIMULATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1060,"value":"function forceLayout({\n data,\n x = (d) => d.x,\n y = () => Math.random() * 10 - 5,\n r = (d) => d.r || 3,\n gap = 1,\n xStrength = 0.9,\n yStrength = 0.02,\n}) {\n \n\n const nodes = data.map((d) => ({\n ...d,\n x: xScale(x(d)),\n y: y(d),\n r: r(d),\n }));\n\n const simulation = d3\n .forceSimulation(nodes)\n .force(\"x\", d3.forceX((d) => d.x).strength(xStrength))\n .force(\"y\", d3.forceY((d) => d.y).strength(yStrength))\n .force(\"collide\", d3.forceCollide().radius((d) => d.r + gap).iterations(3))\n .stop();\n\n return {simulation, nodes};\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"async function* forceGenerators({datasets, x, ticks = 10}){\n\n const forceLayouts = datasets.map(dataset => forceLayout({data: dataset, x}));\n \n for (let i = 0; i < ticks; i++) {\n forceLayouts.forEach(forceLayout => forceLayout.simulation.tick()); \n yield forceLayouts.map(forceLayout => forceLayout.nodes); \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"# VIEWS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"QuestionsCatalog = {\n const questionGroups = d3.create(\"div\");\n\n questionGroups \n .attr(\"class\", \"question-icon-container\")\n .selectAll(\"div\")\n .data(icons)\n .join(\"div\")\n .attr(\"class\", \"question-icon\")\n .append(d => d.image)\n\n const questionPiles = d3.create(\"div\");\n\n questionPiles \n .attr(\"class\", \"question-pile-container\")\n .selectAll(\"div\")\n .data(icons)\n .join(\"div\")\n .attr(\"class\", \"question-pile\")\n .each(function(d){\n const view = d3.select(this)\n view.selectAll(\"div\")\n .data(question.filter(f => f.sdg_world_topics === d.goal))\n .join(\"div\")\n .attr(\"class\", \"question-rect\")\n .style(\"background-color\", sdgcolors[d.goal])\n })\n\n return html`\n ${questionGroups.node()}\n ${questionPiles.node()}\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"axis = {\nconst svg = d3.create(\"svg\")\n .attr(\"width\", getChartWidth())\n .attr(\"height\", 25)\nsvg.append(\"g\")\n .call(d3.axisBottom(xScale).tickFormat(n => n + \"%\"));\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"# APP LOGIC","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1623,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"# REFERENCES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"icons = Promise.all([\n FileAttachment(\"GOAL_1.svg\").image(),\n FileAttachment(\"GOAL_2.svg\").image(),\n FileAttachment(\"GOAL_3.svg\").image(),\n FileAttachment(\"GOAL_4.svg\").image(),\n FileAttachment(\"GOAL_5.svg\").image(),\n FileAttachment(\"GOAL_6.svg\").image(),\n FileAttachment(\"GOAL_7.svg\").image(),\n FileAttachment(\"GOAL_8.svg\").image(),\n FileAttachment(\"GOAL_9.svg\").image(),\n FileAttachment(\"GOAL_10.svg\").image(),\n FileAttachment(\"GOAL_11.svg\").image(),\n FileAttachment(\"GOAL_12.svg\").image(),\n FileAttachment(\"GOAL_13.svg\").image(),\n FileAttachment(\"GOAL_14.svg\").image(),\n FileAttachment(\"GOAL_15.svg\").image(),\n FileAttachment(\"GOAL_16.svg\").image(),\n FileAttachment(\"GOAL_17.svg\").image(),\n FileAttachment(\"GOAL_other.svg\").image(),\n]).then(r => \n r.map((m,i)=>({\n goal: i===17 ? \"other\" : \"sdg-world-\" + d3.format(\"02\")(i+1),\n image: m\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"sdgcolors = ({\n\"sdg-world-01\": \"#E5243B\",\n\"sdg-world-02\": \"#DDA63A\",\n\"sdg-world-03\": \"#4C9F38\",\n\"sdg-world-04\": \"#C5192D\",\n\"sdg-world-05\": \"#FF3A21\",\n\"sdg-world-06\": \"#26BDE2\",\n\"sdg-world-07\": \"#FCC30B\",\n\"sdg-world-08\": \"#A21942\",\n\"sdg-world-09\": \"#FD6925\",\n\"sdg-world-10\": \"#DD1367\",\n\"sdg-world-11\": \"#FD9D24\",\n\"sdg-world-12\": \"#BF8B2E\",\n\"sdg-world-13\": \"#3F7E44\",\n\"sdg-world-14\": \"#0A97D9\",\n\"sdg-world-15\": \"#56C02B\",\n\"sdg-world-16\": \"#00689D\",\n\"sdg-world-17\": \"#19486A\",\n\"other\": \"#555\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"botLogos = ({\n \"Anthropic\": await FileAttachment(\"anthropic.png\").image(),\n \"OpenAI\": await FileAttachment(\"openai.png\").image(),\n \"Google\": await FileAttachment(\"google.png\").image(),\n \"Alibaba\": await FileAttachment(\"alibaba.png\").image(),\n \"Human\": await FileAttachment(\"human.png\").image(),\n \"Meta\": await FileAttachment(\"meta.png\").image(),\n \"XAI\": await FileAttachment(\"xai.png\").image(),\n \"Mistral\": await FileAttachment(\"mistral.png\").image(),\n \"Chimp\": await FileAttachment(\"chimp.png\").image()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {beeswarmX, beeswarmY} from \"@angiehjort/beeswarm-plot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"