2b:null 2c:["$","title",null,{"children":"Requirements Specifications for AIS Vision-based Perception (v.02) | Hamed Barzamini | Observable"}] 31:T115d,# Idias RE-AIS refers to humans' semantic knowledge of domain concepts to establish a benchmark for assessing the quality of AIS randomly-collected training datasets. Within this framework, a process is implemented to extract common social specifications of primary concepts in a domain, which in turn, derives useful knowledge to be passed to AIS, such that domain specifications are well-met within the intelligent model. RE-AIS automatically creates a set of domain-specific benchmarks, which are further referred to for the purpose of relative evaluation of the correctness and completeness of AIS visual perception. In consequence, AIS data-driven perception, gained through AIS inductive nature, is enhanced with knowledge-based domain analysis. The improvement occurs through the incorporation of inferred knowledge into the AIS training process, exploiting a semantic layout to compensate for the dataset missing variation of a targeted domain concept, and later, to repair AIS misconception of the concept. For a fair evaluation of a software product or process, a reference point allows to relatively qualify the comparison, yet, none of the said approaches provided an oracle. Without a reliable point of reference for assessment purposes, the proposal of dataset quality metrics sounds rather abstract, since even assuming that the expected metrics are satisfied (e.g., the dataset is complete), no one could confirm. We aim to use visual representations and techniques to effectively communicate, analyze, and comprehend the requirements and expectations for AI-enabled software. The goal is to connect all components through interactive visualization methods, to ensure the requirements are clear, thorough, properly defined, and aligned with the desired outcomes and constraints of the AI system. ## Design: Our objective in this project phase is to arrange the information gathered from encyclopedias in a manner that allows us to compare the knowledge derived from this source with that of the image dataset. To achieve this, we have implemented topic modeling to the gathered data, with the aim of uncovering relationships, patterns, and trends within the specifications. By creating a hierarchical structure, we can more accurately represent the connections between the specifications, which will help to clarify any ambiguity and refine the specifications, particularly for complex or difficult-to-specify concepts. To derive a hierarchy of relationships, we utilized a pre-trained transformer-based neural network, BERTopic, to extract higher-level topics and their relationships among related specifications. To identify topics associated with an image dataset, we are using BLIP, a deep multi-modal model to calculate the embeddings of a multimodal dataset, which includes both images and captions. After generating the embeddings using this model, we feed them into BERTopic modeling techniques based on transformers. Although this technique is commonly used for text data, it can be applied to other data types if embeddings are calculated beforehand. The calculated embeddings, along with other metadata like captions, will then be fed into the topic modeling process. This approach will enable us to cluster image embeddings and generate topic representations based on the associated captions. ## Finding similar topics between image datasets and text documents: To identify similar topics between an image dataset and text documents, we trained separate BERTopic models on the different modalities, and now we want to explore the similarities between these models. Specifically, we aim to determine if there is any overlap between the topics in the text model and those in the image model. In other words, can we find topics in the text model that are similar to those in the image model? To achieve this, we compare the topic representations of the two models by examining the c-TF-IDF representations. By analyzing the c-TF-IDF representations, we can determine if there are shared topics or themes between the two modalities. This information can be useful in identifying potential correlations between the image dataset and text documents, and in gaining a better understanding of the relationships between the different topics. Additionally, this analysis can help us identify areas where further research and exploration may be necessary to fully understand the connections between the two modalities. 32:T458,## How is it working? It works as follows: on the left-hand side, there is a hierarchical chart that displays 30 clusters with their initial terms, followed by their corresponding topics calculated using BerTopic. On the right-hand side, there is an image gallery that shows the images corresponding to the clicked node. The similarity threshold can be adjusted using the range input, and the maximum similarity between an image topic and a text topic is 0.30. Additionally, the number of images per topic can be controlled using the image per topic input range. The hierarchy links are color-coded according to the similarity values, where the darker shades of blue represent higher similarities between the text topics and image dataset topics. When hovering over a node, a tooltip is displayed that shows all the specifications assigned to that node, along with its corresponding image topic and similarity. If a parent node that has a child is clicked, it will collapse and display its children. When a child node's image differs from the previously selected image topic, the gallery is updated accordingly.33:T23a4,function createChart(finalJson) { const root = d3.hierarchy(finalJson); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "25px sans-serif") .style("user-select", "none"); const linkStrokeWidthBase = 3; const gLink = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.7) .attr("stroke-width", linkStrokeWidthBase); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); // function selectImage(node) { // let imgTopic = getImgTid(node.data.name); // if (imgTopic !== null) { // dispatch.call("circle-clicked", null, imgTopic); // } // } let idQueue = []; // Initialize node queue to an empty array const updateCircles = (node) => { // Check if ID already exists in the queue for (let i = 0; i < idQueue.length; i++) { if (idQueue[i].id === node.id) { // console.log(`ID ${node.id} already exists in the queue`); return; } } if (Array.isArray(node.data.children) && node.data.children.length === 0) { return; // return if the node has an empty children array } let imgTopic = getImgTid(node.data.name); if (imgTopic === null) { return; } // Assign a color to new object based on the color of the previous object let color; let divTag; if (idQueue.length === 0) { color = "purple"; divTag = "app1"; } else if (idQueue[idQueue.length - 1].color === "purple") { color = "red"; divTag = "app2"; } else { color = "purple"; divTag = "app1"; } // Add new object to queue if (idQueue.length < 2) { idQueue.push({ node: node, color: color, divTag: divTag }); } else { // Replace oldest object with new object idQueue[0] = idQueue[1]; idQueue[1] = { node: node, color: color, divTag: divTag }; } gNode.selectAll("circle").attr("fill", d => { const queueNode = idQueue.find(qNode => qNode.node.id === d.id); // find the corresponding node in idQueue if (queueNode) { return queueNode.color; // if node exists in idQueue, use its color } else { return d._children ? "#555" : "#999"; // otherwise, use default color } }).attr("r", d => { const queueNode = idQueue.find(qNode => qNode.node.id === d.id); // find the corresponding node in idQueue if (queueNode) { return 10; // if node exists in idQueue, use its color } else { return 6; // otherwise, use the default size } }).transition() .duration(500) .delay(1000) .attrTween("opacity", function(d) { const queueNode = idQueue.find(qNode => qNode.node.id === d.id); // find the corresponding node in idQueue if (queueNode) { return d3.interpolate(0, 1); } else { return () => {}; // return empty function for non-queue nodes } }) .transition() .duration(500) .delay(1000) .attrTween("opacity", function(d) { const queueNode = idQueue.find(qNode => qNode.node.id === d.id); // find the corresponding node in idQueue if (queueNode) { return d3.interpolate(1, 0); } else { return () => {}; // return empty function for non-queue nodes } }) .transition() .duration(500) .delay(1000) .attrTween("opacity", function(d) { const queueNode = idQueue.find(qNode => qNode.node.id === d.id); // find the corresponding node in idQueue if (queueNode) { return d3.interpolate(0, 1); } else { return () => {}; // return empty function for non-queue nodes } }); dispatch.call("circle-clicked", null, { id: imgTopic, tag: divTag}); }; function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { // console.log(d.data.labels); d.children = d.children ? null : d._children; update(d); // selectImage(d); updateCircles(d); }) // Add mouseover and mouseout events .on("mouseover", function (event, d) { // Get all ancestors of the node const ancestors = d.ancestors(); // Select all links on the path to the node and make them thicker gLink.selectAll("path") .filter(link => ancestors.includes(link.source) && ancestors.includes(link.target)) .attr("stroke-width", 6) .attr("stroke", "red") .attr("stroke-opacity", 1); }) .on("mouseout", function (event, d) { gLink.selectAll("path") .attr("stroke-width", linkStrokeWidthBase) .attr("stroke", d => d.target.data.similarity ? simColorScale(d.target.data.similarity) : avgColorScale(avgSimilarity[d.target.data.id])) .attr("stroke-opacity", 0.7); }); nodeEnter.append("circle") .attr("r", 6) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 15); nodeEnter.append("text") .attr("dy", "-0.31em") .attr("x", -40) .attr("text-anchor", "start") .text(d => d.data.labels ? d.data.labels.slice(0, 2).join(', ') : "") .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 5) .attr("stroke", "white"); // Add title element to show labels information nodeEnter.append("title") .text(d => { let labelStr = d.data.labels ? d.data.labels.join(", ") : ""; let simStr = d.data.similarity ? "\nSimilarity: " + d.data.similarity : ""; let imgTopicStr = d.data.img_tid ? ", Image Topic#: " + d.data.img_tid : ""; return labelStr + simStr + imgTopicStr; }); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); const diagonal = d3.linkHorizontal() .x(d => d.y) .y(d => d.x); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }).attr("stroke", d => d.target.data.similarity ? simColorScale(d.target.data.similarity) : avgColorScale(avgSimilarity[d.target.data.id])) .attr("stroke-width", linkStrokeWidthBase) .attr("fill", "none") .attr("stroke-linejoin", "round"); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal) .attr("stroke", d => d.target.data.similarity ? simColorScale(d.target.data.similarity) : avgColorScale(avgSimilarity[d.target.data.id])) .attr("stroke-width", linkStrokeWidthBase); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); dispatchImg.on("img-clicked", (imageTopic) => { console.log(imageTopic); }); return svg.node(); }34:T475,This is a React functional component called Gallery that takes props as an argument. The component uses a randomImageByTopicsMap object to retrieve an array of image URLs and captions based on the id property in props. It then maps the URLs and captions into an images array of objects containing url and caption properties. The component uses the useState hook to manage the number of rows to display, and sets the number of rows based on the number of images and the number of columns, which is set to 2. The useEffect hook is used to recalculate the number of rows whenever the columns or images array changes. The containerStyle object defines the CSS style for the gallery container, using CSS grid to display the images in a grid layout with a fixed height and scrolling enabled. The component then returns a div container with two child elements: an empty div element and a container element for the gallery images. The containerStyle object is applied to the gallery container, and each image is rendered as a div element with an img element and a caption element. The key for each image is set to its index in the images array.35:T7b2,function Gallery(props) { let urls = randomImageByTopicsMap.get(props.id).map(obj => obj.img_url); let captions = randomImageByTopicsMap.get(props.id).map(obj => obj.captions); const columns = 2; const [rows, setRows] = useState(1); const images = urls.map((url, index) => ({ url, caption: captions[index], })); useEffect(() => { const totalImages = images.length; const newRows = Math.ceil(totalImages / columns); setRows(newRows); }, [columns, images]); const imageElements = images.map((image, index) => { return React.createElement('div', { key: index, style: { display: 'inline-block', marginRight: '10px', position: 'relative', // add relative positioning width: '200px', height: '200px', overflow: 'hidden', }, }, [ React.createElement('img', { key: 'img', src: image.url, style: { width: '100%', height: '100%', objectFit: 'cover', }, }), React.createElement('div', { key: 'caption', style: { position: 'absolute', bottom: '0', left: '0', right: '0', padding: '0px', color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.5)', // textOverflow: 'ellipsis', maxHeight: '50px', overflowY: 'scroll', whiteSpace: 'nowrap', zIndex: 1, // add z-index to make sure caption is on top }, }, image.caption), ]); }); return React.createElement('div', {}, [ React.createElement('div', { key: 'title', style: { fontSize: '18px', fontWeight: 'bold', marginBottom: '10px', textAlign: "center", }, }, `Image topic: #${props.id}`), React.createElement('div', { key: 'gallery', style: { width: '600px', height: '220px', overflowX: 'auto', whiteSpace: 'nowrap', }, }, imageElements), ]); } 36:T446,This is a JavaScript function that creates a hierarchical chart using the D3.js library. It takes a JSON object as input and constructs a tree structure using the d3.hierarchy() function. The chart is drawn using an SVG element and consists of nodes and links. Each node represents a data object in the JSON hierarchy, and links represent the relationships between them. The function sets up event listeners for mouseover, mouseout, and click events on the nodes. When a node is clicked, its children are either expanded or collapsed, depending on their current state. The function also calls a separate function called selectImage() which, based on the node data, selects a corresponding image. The update() function is responsible for updating the chart when a node is clicked or when the tree structure changes. It uses D3's enter-update-exit pattern to manipulate the DOM elements based on the new data. The code also includes a few constants, such as the stroke width of the links and the font size of the text, as well as some helper functions, such as updateCircles() and getImgTid().37:T4bf,// { // let idQueue = []; // function addIdToQueue(id) { // // Check if ID already exists in the queue // for (let i = 0; i < idQueue.length; i++) { // if (idQueue[i].id === id) { // console.log(`ID ${id} already exists in the queue`); // return; // } // } // // Assign color to new object based on color of previous object // let color; // let divTag; // if (idQueue.length === 0) { // color = "green"; // divTag = "app1"; // } else if (idQueue[idQueue.length - 1].color === "green") { // color = "red"; // divTag = "app2"; // } else { // color = "green"; // divTag = "app1"; // } // // Add new object to queue // if (idQueue.length < 2) { // idQueue.push({ id: id, color: color, divTag: divTag }); // } else { // // Replace oldest object with new object // idQueue[0] = idQueue[1]; // idQueue[1] = { id: id, color: color, divTag: divTag }; // } // console.log(`ID ${id} added to queue with color ${color} and divTag ${divTag}`); // } // addIdToQueue(1); // addIdToQueue(2); // addIdToQueue(2); // addIdToQueue(1); // addIdToQueue(3); // addIdToQueue(1); // addIdToQueue(2); // return idQueue; // }38:[] 2f:{"id":"cdbc60836096bf1a","slug":null,"title":"Requirements Specifications for AIS Vision-based Perception (v.02)","thumbnail":"757d1085ca7cf333625a65845417a723a131e16c263eb55feeb31773cc800b81","access_level":"public","create_time":"$D2023-04-12T07:25:04.333Z","update_time":"$D2023-04-13T05:45:50.998Z","view_time":null,"first_public_time":"$D2023-04-12T07:25:04.333Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6318f9ef8f09080d","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":"starter_2024"},"version":1922,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8259129fb117d602","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":null}],"members":[{"type":"individual","id":"8259129fb117d602","login":"hbarzamini","name":"Hamed Barzamini","avatar_url":"https://avatars-next.observableusercontent.com/6bbe415c39c636d3bf25ce1f85d1e5b8844187d795884047ae18ee04d25a695a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Requirements Specifications for AIS Vision-based Perception (v.02)","cells":[{"id":0,"value":"md`# Requirements Specifications for AIS Vision-based Perception (v.02)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1648,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1339,"value":"viewof ex2 = pack({\n threshold: Range([minSimilarity, maxSimilarity + 0.0001], {label: \"Similarity\", step:stepValue, value: initialValue}),\n imagePerTopics: Range([8, 40], {label: \"Image Per Topics\", step: 4, value: 12}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"

\n ${createChart(finalJson)}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1902,"value":"// function renderApp() {\n// const randomId = Array.from(randomImageByTopicsMap.keys())[Math.floor(Math.random() * randomImageByTopicsMap.size)];\n// ReactDOM.render(\n// React.createElement(Gallery, { id: randomId }),\n// document.getElementById(\"app1\")\n// );\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"dispatch.on(\"circle-clicked\", (obj) => {\n ReactDOM.render(\n React.createElement(Gallery, obj),\n document.getElementById(obj.tag)\n );\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1801,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1796,"value":"// {\n// const randomId = Array.from(randomImageByTopicsMap.keys())[Math.floor(Math.random() * randomImageByTopicsMap.size)];\n// ReactDOM.render(\n// React.createElement(Gallery, { id: randomId }),\n// document.getElementById(\"app2\")\n// );\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"// function wrapperApp() {\n// React.useEffect(() => {\n// renderApp();\n// }, [randomImageByTopicsMap]);\n\n// return React.createElement(\"div\", { id: \"app1\" });\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"// ReactDOM.render(React.createElement(wrapperApp), document.getElementById(\"app1\"));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"// renderApp();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"// function renderApp() {\n// const randomId = Array.from(randomImageByTopicsMap.keys())[Math.floor(Math.random() * randomImageByTopicsMap.size)];\n// ReactDOM.render(\n// React.createElement(Gallery, { id: randomId }),\n// document.getElementById(\"app1\")\n// );\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"// dispatch.on(\"circle-clicked\", (id) => {\n// ReactDOM.render(\n// React.createElement(Gallery, { id }),\n// document.getElementById(\"app1\")\n// );\n// });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1718,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1518,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1584,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1804,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"margin = ({top: 25, right: 50, bottom: 10, left: 7.5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"dy = width / 2.4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"dx = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"dispatch = d3.dispatch(\"circle-clicked\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"dispatchImg = d3.dispatch(\"img-clicked\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"groupedData = d3.group(imageCsv, d => d.topic);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"filteredImageTopics = new Map([...groupedData].filter(([key, value]) => uniqueImageTopics.includes(key)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"randomImageByTopicsMap = new Map(\n Array.from(filteredImageTopics.entries()).map(([key, values]) => {\n if (values.length < ex2.imagePerTopics) {\n return [key, values];\n }\n return [key, d3.shuffle(values).slice(0, ex2.imagePerTopics)];\n })\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"flattenedRandomSelection = Array.from(randomImageByTopicsMap, ([key, values]) =>\n values.map(value => ({ ...value }))\n).flatMap(array => array);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"imageCsv = d3.csv(\n \"https://raw.githubusercontent.com/AI-EnabledSoftwareEngineering-AISE/RE4VIS/main/data/images_df.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"uniqueImageTopics = Array.from(new Set(filteredData.flatMap(obj => obj.children.map(child => child.img_tid))));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"filteredData = sampleData.children.map(child => {\n if (child.children) {\n let filteredChildren = child.children.filter(grandchild => {\n return grandchild.similarity && grandchild.similarity >= ex2.threshold;\n });\n return {...child, children: filteredChildren};\n } else {\n return child;\n }\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"avgSimilarity = finalJson.children.map(entry => {\n const sum = entry.children.reduce((acc, child) => acc + child.similarity, 0);\n const avg = sum / entry.children.length || 0; // to avoid division by zero\n // return { id: entry.id, avgSimilarity: avg };\n return avg ;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"similarities = finalJson.children.flatMap(d => d.children.map(c => c.similarity)).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"avgSimilaritiesSorted = [...avgSimilarity].sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"// Create the quantile scale\n// https://observablehq.com/@d3/color-schemes\navgColorScale = d3.scaleQuantile()\n .domain([d3.quantileSorted(avgSimilaritiesSorted, 0.25), d3.quantileSorted(avgSimilaritiesSorted, 0.5), d3.quantileSorted(avgSimilaritiesSorted, 0.75)])\n .range([\"#9ebcda\", \"#6baed6\", \"#4292c6\", \"#08519c\"]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"simColorScale = d3.scaleQuantile()\n .domain([d3.quantileSorted(similarities, 0.25), d3.quantileSorted(similarities, 0.5), d3.quantileSorted(similarities, 0.75)])\n .range([\"#9ebcda\", \"#6baed6\", \"#4292c6\", \"#08519c\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"avgWidthScale = d3.scaleQuantile()\n .domain([d3.quantileSorted(avgSimilaritiesSorted, 0.25), d3.quantileSorted(avgSimilaritiesSorted, 0.5), d3.quantileSorted(avgSimilaritiesSorted, 0.75)])\n .range([1.5, 2.5, 3.5, 4.5]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"simWidthScale = d3.scaleQuantile()\n .domain([d3.quantileSorted(similarities, 0.25), d3.quantileSorted(similarities, 0.5), d3.quantileSorted(similarities, 0.75)])\n .range([1.5, 2.5, 3.5, 4.5]);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"maxSimilarity = d3.max(sampleData.children, d => d3.max(d.children, child => child.similarity));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"minSimilarity = d3.min(sampleData.children, d => d3.min(d.children, child => child.similarity));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"stepValue = (maxSimilarity - minSimilarity) / 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"initialValue = minSimilarity + 7* stepValue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"finalJson = {\n return {\n name:\"\",\n children:filteredData\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"sampleData = d3.json(\"https://raw.githubusercontent.com/AI-EnabledSoftwareEngineering-AISE/RE4VIS/main/data/flare_v1.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"getIndexOfObjectWithTopic(7)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"function getIndexOfObjectWithTopic(topic) {\n for (let i = 0; i < flattenedRandomSelection.length; i++) {\n if (flattenedRandomSelection[i].topic === topic) {\n return i;\n }\n }\n return -1; // topic not found in any object in data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"getImgTid(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"function getImgTid(name) {\n let maxSim = -Infinity;\n let imgTid = null;\n if (name === '') {\n // Search for entry with the highest similarity\n finalJson.children.forEach(child => {\n child.children.forEach(grandchild => {\n if (grandchild.similarity > maxSim) {\n maxSim = grandchild.similarity;\n imgTid = grandchild.img_tid;\n }\n });\n });\n } else {\n const foundGrandchild = finalJson.children.flatMap(child => child.children).find(grandchild => grandchild.id == name);\n \n if (foundGrandchild) {\n imgTid = foundGrandchild.img_tid;\n } else {\n const foundChild = finalJson.children.find(child => child.name == name);\n if (foundChild) {\n foundChild.children.forEach(grandchild => {\n if (grandchild.similarity > maxSim) {\n maxSim = grandchild.similarity;\n imgTid = grandchild.img_tid;\n }\n });\n } \n }\n }\n return imgTid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"getImgTid(71)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"// margin = ({top: 10, right: 120, bottom: 10, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"import {render, component, jsx, memo, forwardRef, React, ReactDOM, createElement, Children, createRef, createContext, lazy, Fragment, StrictMode, Suspense, cloneElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useDebugValue, createPortal, __SECRET_SWITCHER} from \"@j-f1/react\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"import {Range, pack} from \"@esperanc/range-input-variations\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 30:"$2f:body"