2b:null 2c:["$","title",null,{"children":"Requirements Specifications for AIS Vision-based Perception (V.05) | 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:T49d,## 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, an image gallery 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 links in the hierarchy are color-coded based on similarity values, with darker shades of blue indicating higher similarities between text topics and image dataset topics. A tooltip appears when hovering over a node, displaying all specifications assigned to that node, along with its corresponding image topic and similarity. Clicking on a parent node with a child will collapse and display its children. It is possible to compare two node image topics simultaneously. When a new node is selected by clicking, its corresponding path on the tree is highlighted, and its images appear in the image gallery on the right-hand side.33: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.34:T995,function Gallery(props) { // console.log(props.labels.slice(0, 5)); // console.log(props.tag); // console.log(props.color); // console.log(props.images.map(id => imageCsv[id])); const selectedImages = props.images.map(id => imageCsv[id]); const captions = []; const urls = []; selectedImages.forEach(image => { captions.push(image.captions); urls.push(image.img_url); }); 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: '16px', fontWeight: 'bold', marginBottom: '10px', textAlign: 'center', }, }, [ 'Topics: ', React.createElement('span', { key: 'highlightedText', style: { color: props.color, // Set the desired color here }, }, `${props.labels.slice(0, 5).join(", ")}`), ]), React.createElement('div', { key: 'gallery', style: { width: '600px', height: '220px', overflowX: 'auto', whiteSpace: 'nowrap', }, }, imageElements), ]); } 35: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().36:T245a,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"); let idQueue = []; // Initialize node queue to an empty array function getImagesIdx(nodeData) { console.log("data:", nodeData); // if (!nodeData.children || nodeData.img_ids.length !== 0) { // console.log("data image ids:", nodeData.img_ids); // } } function calculateAverageSimilarity(data) { // console.log("similarity array:", data.similarity_score); if (!data.similarity_score || data.similarity_score.length === 0) { return 0; } const sum = data.similarity_score.reduce((accumulator, currentValue) => accumulator + currentValue, 0); const average = sum / data.similarity_score.length; // console.log("similarity avg:", average); return average; } const updateLinks = (node) => { // Check if ID already exists in the queue for (let i = 0; i < idQueue.length; i++) { if (idQueue[i].node.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 } // console.log(node.data) // let imageIdxs = getImagesIdx(node.data); let imageIdstoShow = null; if (node.data.img_ids){ // console.log("data image ids: ", node.data.img_ids) imageIdstoShow = node.data.img_ids }else if(node.data.children){ imageIdstoShow = Array.from(new Set(node.data.children.reduce((acc, obj) => { return acc.concat(obj.img_ids); }, []))); // console.log("data children: ", imageIdstoShow) } // console.log(node.data.labels); if (imageIdstoShow === null) { return; } // console.log("selected images: ", imageIdstoShow); let imgTopic = getImgTid(node.data.name); if (imgTopic === null) { return; } //In this new version use image ID in the data // 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 } }); let ancestors = null; ancestors = node.ancestors(); // console.log(idQueue); gLink.selectAll("path") .filter(link => !(ancestors.includes(link.source) && ancestors.includes(link.target))) .attr("stroke", node => { // console.log("similarity scores:", calculateAverageSimilarity(node.target.data)); return node.target.data.similarity_score ? simColorScale(calculateAverageSimilarity(node.target.data)) : avgColorScale(avgSimilarity[node.target.data.id]); }) .attr("stroke-width", linkStrokeWidthBase) .attr("stroke-opacity", 0.7); for (let i = 0; i < idQueue.length; i++) { // console.log(idQueue[i].node); ancestors = idQueue[i].node.ancestors(); gLink.selectAll("path") .filter(link => ancestors.includes(link.source) && ancestors.includes(link.target)) .attr("stroke-width", 6) .attr("stroke-opacity", 1) .attr("stroke", idQueue[i].color); } dispatch.call("circle-clicked", null, { id: imgTopic, tag: divTag, images:imageIdstoShow, labels: node.data.labels, color:color}); }; 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); updateLinks(d); }); 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_score ? "\nSimilarity: " + calculateAverageSimilarity(d.data) : ""; 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_score ? simColorScale(calculateAverageSimilarity(d.target.data)) : 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); // 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(); }37:[] 2f:{"id":"e0c7657db69a7c70","slug":null,"title":"Requirements Specifications for AIS Vision-based Perception (V.05)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-05T23:05:14.104Z","update_time":"$D2023-09-05T23:07:09.507Z","view_time":null,"first_public_time":"$D2023-09-05T23:05:14.104Z","has_unpublished_edits":null,"fork":{"id":"47daa661440c39c1","slug":null,"title":"Requirements Specifications for AIS Vision-based Perception (V.04)","owner":{"id":"6318f9ef8f09080d","login":"hbarzamini","name":"Hamed Barzamini"}},"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":2143,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Requirements Specifications for AIS Vision-based Perception (V.05)","cells":[{"id":0,"value":"md`# Requirements Specifications for AIS Vision-based Perception (V.05)`","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})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"

\n ${createChart(finalJson)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":1801,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1586,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1518,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1984,"value":"$36","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":true,"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":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2117,"value":"imageCsv[0]","pinned":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"filteredData_old = 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2030,"value":"filteredData = sampleData.children.map(child => {\n if (child.children) {\n const filteredChildren = child.children.filter(grandchild => {\n return grandchild.similarity_score.some(score => score >= ex2.threshold);\n }).map(grandchild => ({\n ...grandchild,\n img_ids: grandchild.img_ids.filter((id, index) => grandchild.similarity_score[index] >= ex2.threshold),\n similarity_score: grandchild.similarity_score.filter(score => score >= ex2.threshold)\n }));\n return { ...child, children: filteredChildren };\n } else {\n return child;\n }\n});\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"finalJson = {\n return {\n name:\"\",\n children:filteredData\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"avgSimilarity_old = 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"avgSimilarity = finalJson.children.map(entry => {\n const avgScores = entry.children.map(child => {\n const sum = child.similarity_score.reduce((acc, score) => acc + score, 0);\n return sum / child.similarity_score.length || 0; // to avoid division by zero\n });\n\n const totalAvg = avgScores.reduce((acc, avg) => acc + avg, 0);\n return totalAvg / avgScores.length || 0; // to avoid division by zero\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"similarities = finalJson.children.flatMap(d => \n d.children.flatMap(c => c.similarity_score)\n).sort();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"similarities_old = finalJson.children.flatMap(d => d.children.map(c => c.similarity)).sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"avgSimilaritiesSorted = [...avgSimilarity].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"// gLink.selectAll(\"path\")\n// .filter(link => !(ancestors.includes(link.source) && ancestors.includes(link.target)))\n// .attr(\"stroke\", node => node.target.data.similarity_score ? \n// simColorScale(node.target.data.similarity_score) : avgColorScale(avgSimilarity[node.target.data.id]))\n// .attr(\"stroke-width\", linkStrokeWidthBase)\n// .attr(\"stroke-opacity\", 0.7);","pinned":true,"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":true,"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":true,"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":true,"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":true,"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 =>\n d3.max(d.children, child => d3.max(child.similarity_score))\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1997,"value":"minSimilarity = d3.min(sampleData.children, d =>\n d3.min(d.children, child => d3.min(child.similarity_score))\n);","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"initialValue = minSimilarity + 7* stepValue","pinned":true,"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_v4.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"getIndexOfObjectWithTopic(7)","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"getImgTid(1)","pinned":true,"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":true,"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":"$W37","stdlib":"1"}} 30:"$2f:body"