2b:null 2c:["$","title",null,{"children":"Requirements Specifications for AIS Vision-based Perception - Pedestrian(V.05) | Hamed Barzamini | Observable"}] 31:T1af8,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. ## 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. # React Code 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. 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.32:T10d5,function Gallery(props) { const selectedImages = props.images.map(id => imageCsv[id]); // Reset selectedImageIndex to null when props.images change useEffect(() => { setSelectedImageIndex(null); }, [props.images]); 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], })); // Declare a function to update rows based on window width const updateRows = () => { const totalImages = images.length; const newRows = Math.ceil(totalImages / columns); setRows(newRows); }; // Use useEffect to listen for window size changes useEffect(() => { // Call updateRows initially updateRows(); // Add an event listener to update rows when the window size changes window.addEventListener('resize', updateRows); // Clean up the event listener when the component unmounts return () => { window.removeEventListener('resize', updateRows); }; }, [columns, images]); // Check if rows are less than 7, and set the height accordingly let heightValue = "700px"; // Default height if (rows < 7) { heightValue = "300px"; // Set height to 500px if rows are less than 7 } // console.log(rows, heightValue); const containerStyle = { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gridTemplateRows: `repeat(${rows}, 2fr)`, gridAutoRows: "2fr", gap: "8px", height: heightValue, // width: "600px", overflow: "scroll", position: "relative", // Add this to handle the enlarged image }; const [selectedImageIndex, setSelectedImageIndex] = useState(null); // Function to handle image click and toggle the selected image const handleImageClick = (index) => { if (selectedImageIndex === index) { // If the clicked image is the currently selected one, clear the selection setSelectedImageIndex(null); } else { // If a different image is clicked, set it as the selected image setSelectedImageIndex(index); } }; // Render the gallery images with the selected image const galleryImages = images.map((image, index) => React.createElement( 'div', { key: index, className: `image-container ${selectedImageIndex === index ? 'selected' : ''}`, onClick: () => handleImageClick(index), style: { cursor: "pointer" }, // Add cursor pointer on hover }, [ React.createElement('img', { key: 'image', src: image.url, alt: image.caption, style: { maxWidth: '100%', maxHeight: '100%' }, }), React.createElement('div', { key: 'caption', className: 'caption' }, image.caption), ] ) ); // Render the selected image if there's a selectedImageIndex const selectedImage = selectedImageIndex !== null && React.createElement( 'div', { id: 'selectedImage', style: { textAlign: 'center' } }, // Center-align the content [ React.createElement('img', { key: 'selectedImageImg', src: images[selectedImageIndex].url, alt: images[selectedImageIndex].caption, style: { height: '300px', display: 'block', margin: '0 auto' }, // Set height to 300px and center-align }), React.createElement('div', { key: 'selectedImageCaption', className: 'caption', style: { textAlign: 'center' } }, images[selectedImageIndex].caption.length > 85 ? images[selectedImageIndex].caption.slice(0, 85) + ' ...' : images[selectedImageIndex].caption // Limit caption length ), ] ); return React.createElement( 'div', null, React.createElement( 'div', { style: { textAlign: 'center' } }, [ 'Topics: ', React.createElement('span', { key: 'highlightedText', style: { color: props.color, }, }, `${props.labels.slice(0, 5).join(', ')}`), ] ), selectedImage, React.createElement( 'div', { style: containerStyle }, galleryImages ), ); } 33: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().34:T2685,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 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 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 = "red"; let divTag = "app1"; // Add new object to queue if (idQueue.length < 1) { idQueue.push({ node: node, color: color, divTag: divTag }); } else { // Replace oldest object with new object // idQueue[0] = idQueue[1]; idQueue[0] = { 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 => { 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); const highlightNodes = ["ramp, step", "bipedally, cyclist", "bystander, scooter", "pedestrianised, city", "transit, station"]; const selectedNodeNames = ["bystander, scooter", "pedestrianised, city", "transit, station"]; const replacementNames = ["Safety Factors", "Pedestrian Zones", "Urban Mobility"]; nodeEnter.append("text") .attr("dy", "-0.31em") .attr("x", -55) .attr("text-anchor", "start") .text(d => { const labels = d.data.labels ? d.data.labels.slice(0, 2).join(', ') : ""; // Check if labels match any value in nodeNames const index = selectedNodeNames.indexOf(labels); // If there's a match, return the corresponding replacement name if (index !== -1 && index < replacementNames.length) { return replacementNames[index]; } return labels; // Return the original labels if no match is found }) .attr("fill", d => { const labels = d.data.labels ? d.data.labels.slice(0, 2).join(', ') : ""; // Check if labels match any value in selectedNodeNames const index = highlightNodes.indexOf(labels); // If there's a match, set the text fill color to red if (index !== -1 && index < highlightNodes.length) { return "red"; } return "black"; // Set the default text fill color }) .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; return labelStr; }); // 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); return svg.node(); }35:[] 2f:{"id":"6fcd7443fa6b691a","slug":null,"title":"Requirements Specifications for AIS Vision-based Perception - Pedestrian(V.05)","thumbnail":"434bef01959f15ea313c5215c4b97c719a61089b521ef16f8028d61973e7d43d","access_level":"public","create_time":"$D2023-09-07T04:20:31.410Z","update_time":"$D2023-09-12T00:34:14.328Z","view_time":null,"first_public_time":"$D2023-09-07T04:20:31.410Z","has_unpublished_edits":null,"fork":{"id":"9e701460eecfc817","slug":null,"title":"Requirements Specifications for AIS Vision-based Perception - Pedestrian(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":2307,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Requirements Specifications for AIS Vision-based Perception - Pedestrian(V.05)","cells":[{"id":0,"value":"md`# Requirements Specifications for AIS Vision-based Perception - Pedestrian(V.05)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"# Idias\nRE-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. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1362,"value":"\n \n -->","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2247,"value":"

\n ${createChart(finalJson)}\n

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2172,"value":"threshold = minSimilarity;\n// viewof ex2 = pack({\n// threshold: Range([minSimilarity, maxSimilarity + 0.0001], {label: \"Similarity\", step:stepValue, value: minSimilarity})\n// })","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1801,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2154,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1586,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1518,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1984,"value":"$34","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_pd.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 >= threshold);\n }).map(grandchild => ({\n ...grandchild,\n img_ids: grandchild.img_ids.filter((id, index) => grandchild.similarity_score[index] >= threshold),\n similarity_score: grandchild.similarity_score.filter(score => score >= 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_pd.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":"$W35","stdlib":"1"}} 30:"$2f:body"