2b:null 2c:["$","title",null,{"children":"Radial Mapping (SVG) | Matthew Anderson | Observable"}] 31:T1a4a,chart = (libs, items) => { // Chart center point is 0,0 // DONE: add labels // TODO: scale to fit // TODO: Zoom // TODO: Pan const itemSize = 8; const itemSpacing = itemSize * 0.25; const layerSpaceing = itemSize * 0.125; const layerSize = itemSize; // todo: Group images needs to be an array not an object console.log("[chart] --", innerRadius(items.length, itemSize, itemSpacing)); const scale = canvasScale( libs.length, items.length, itemSize, itemSpacing, layerSpaceing ); console.log("[chart] - libs", libs.length); const scaledWidth = width / scale; const scaledHeigth = height / scale; const r = (size) => size / 2; // const sectionHeight = // (itemSize + layerSpaceing) * indexedOrderedFilteredLibraries.length; const sectionHeight = (itemSize + layerSpaceing) * libs.length; // layerOfGroupLibraries; const sectionWidth = 2; const radiusOffset = sectionHeight + innerRadius(items.length, itemSize, itemSpacing); const canvas = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [ -scaledWidth / 2, -scaledHeigth / 2, scaledWidth, scaledHeigth ]); // Images const images = canvas .append("g") .attr("id", "images") .selectAll("g") .data(items); const imagesEnter = images.enter().append("g"); // const imagesUpdate = images.merge(); // const imagesExit = images.exit(); imagesEnter .attr("id", (d) => { return d.id; }) .attr("class", "image") .on("click", (event, a) => console.log(a)); // .on("mouseover", (event, a) => console.log(a)); // .join( // enter => enter.append("text") // .attr("fill", "green") // .attr("x", (d, i) => i * 16) // .attr("y", -30) // .text(d => d) // .call(enter => enter.transition(t) // .attr("y", 0)), // update => update // .attr("fill", "black") // .attr("y", 0) // .call(update => update.transition(t) // .attr("x", (d, i) => i * 16)), // exit => exit // .attr("fill", "brown") // .call(exit => exit.transition(t) // .attr("y", 30) // .remove()) // ); imagesEnter.append("g").attr("class", "label").attr("fill", "grey"); imagesEnter.append("g").attr("class", "files"); // Labeling Images imagesEnter .select(".label") .append("text") .text((d) => d.id) .attr("text-anchor", (d, i) => angle(items.length, i) < 180 ? "start" : "end" ) .attr("transform", (d, i) => { if (angle(items.length, i) < 180) { return `rotate(-90, 0, 0) translate(${itemSize + itemSpacing}, 6.5)`; } else { return `rotate(90, 0, 0) translate(${-itemSize - itemSpacing}, 4.5)`; } }); imagesEnter .select(".label") .append("circle") .attr("r", r(itemSize)) .attr("cx", r(itemSize)) .attr("cy", -itemSpacing) .style("fill", "none"); imagesEnter.attr( "transform", (d, i) => ` translate(0, ${0 - radiusOffset}) rotate(${angle(items.length, i)}, ${0}, ${radiusOffset} ) ` ); // Files const fileTrans = canvas.transition().duration(750); const delay = 50; const fileUpdate = imagesEnter .select(".files") .selectAll("circle") .data((d) => d.layers); const fileEnter = fileUpdate .enter() .append("circle") .attr("class", "file") .attr("cx", 0) .attr("cy", (d) => { // const layer = layerOfFilteredLibrary(d.library_name || "__NONE__"); const layer = layerOfGroupLibraries(d.library_name || "__NONE__"); const offset = (itemSize + layerSpaceing) * layer; return offset + r(itemSize); }) .attr("r", 0) .style("fill", (d) => { return cameraModelStyling?.[d.camera_model_name]?.["fill"] || "red"; }) .attr("opacity", 0.4) .call((update) => update .transition(fileTrans) .delay((d, i) => i * delay) .attr("r", (d) => { const image = items.find((element) => element.id == d.file_name); const isSame = image.checksums.size == 1; const scale = isSame ? 0.5 : 1; return r(itemSize) * scale; }) ); const fileExit = fileUpdate .exit() .call((exit) => exit.transition(fileTrans).attr("r", 0).remove()); // imagesExit.transition().duration(750).style("fill-opacity", 0).remove(); // fileEnter // .attr("class", "file") // .attr("cx", r(itemSize)) // .attr("cy", (d) => { // const layer = layerOfFilteredLibrary(d.library_name || "__NONE__"); // const offset = (itemSize + layerSpaceing) * layer; // return offset + r(itemSize); // }) // .attr("r", (d) => { // const image = items.find((element) => element.id == d.file_name); // const isSame = image.checksums.size == 1; // const scale = isSame ? 0.5 : 1; // return r(itemSize) * scale; // }) // .style("fill", (d) => { // // if (!cameraModelStyling.hasOwnProperty(d.camera_model_name)) { // // console.log(d); // // } // return cameraModelStyling?.[d.camera_model_name]?.["fill"] || "red"; // }) // .attr("stroke", (d) => { // return cameraModelStyling?.[d.camera_model_name]?.["stroke"] || "black"; // }) // .attr("stroke-width", (d) => { // return cameraModelStyling?.[d.camera_model_name]?.["stroke-width"] || 0; // }) // .attr("opacity", 0.5); // .attr("opacity", (d) => { // const image = items.find((element) => element.id == d.file_name); // const isSame = image.checksums.size == 1; // return isSame ? 0.25 : 1; // }); const guides = canvas.append("g").attr("id", "guides"); // Inner Guide ;) const innerGuide = false; if (innerGuide) { guides .append("circle") .attr("id", "center") .attr("cx", 0) .attr("cy", 0) .attr("r", innerRadius(items.length, itemSize, itemSpacing)) .attr("stroke-width", 1) .attr("stroke-opacity", 0.4) .attr("stroke", "indianred") .attr("fill", "none"); } const layerGuide = false; if (layerGuide) { guides .selectAll(".layerGuide") .data(d3.range(0, libs.length)) .join("circle") .attr("class", "layerGuide") .attr("cx", 0) .attr("cy", 0) .attr("r", (d) => { const ir = innerRadius(items.length, itemSize, itemSpacing); const f = (itemSize + layerSpaceing) * d; return ir + f; }) .style("fill", "none") .style("stroke", "black") .style("stroke-opacity", 0.1); } return canvas.node(); }32:T45e,images = Object.entries( filteredMappings.reduce((results, file) => { const imageName = file["file_name"] || "__NONE__"; const image = results[imageName] || {}; // Unique checksums const checksums = image?.checksums || new Set(); checksums.add(file["checksum"] || "__NONE__"); // Unique camera models const camera_model_name = image?.camera_model_name || new Set(); camera_model_name.add(file["camera_model_name"] || "__NONE__"); // Unique libraries const imageLibraries = image?.libraries || new Set(); imageLibraries.add(file["library_name"] || "__NONE__"); // Layers defined by photo catolouge libraries const layers = image?.layers || []; file["layer"] = indexedOrderedLibraries.indexOf(file["library_name"]); results[imageName] = { ...image, layers: [...layers, file], libraries: imageLibraries, checksums: checksums, camera_model_name: camera_model_name }; return results; }, {}) // ).map(([id, files]) => ({ id, layers: files["layers"], checksums: files[]})) ).map(([id, files]) => ({ id, ...files }))33:T6f4,groupsImages = { const groups = Object.keys(mergelibraryGroups).reduce( (groupImages, groupID, index) => { const imagesInGroup = mergelibraryGroups[groupID].reduce( (images, libName) => { return libraries[libName].reduce((libImages, file) => { const imageName = file["file_name"] || "__NONE__"; const image = libImages[imageName] || {}; // const imageName = file["file_name"] || "__NONE__"; // const image = results[imageName] || {}; // Unique checksums const checksums = image?.checksums || new Set(); checksums.add(file["checksum"] || "__NONE__"); // // Unique camera models // const camera_model_name = image?.camera_model_name || new Set(); // camera_model_name.add(file["camera_model_name"] || "__NONE__"); // // Unique libraries // const imageLibraries = image?.libraries || new Set(); // imageLibraries.add(file["library_name"] || "__NONE__"); // Layers defined by photo catolouge libraries const layers = image?.layers || []; file["layer"] = indexedOrderedLibraries.indexOf( file["library_name"] ); libImages[imageName] = { ...image, layers: [...layers, file], // libraries: imageLibraries, checksums: checksums // camera_model_name: camera_model_name }; return libImages; }, images); }, {} ); groupImages[groupID] = Object.entries(imagesInGroup).map( ([id, files]) => ({ id, ...files }) ); return groupImages; }, {} ); return groups; }34:T1ec7,heatmap = (matrix, chartOptions) => { const { height, width, margin, cellSize } = chartOptions.dimensions; // Event Handling const menuOrderColumns = d3.select("select#orderColumns").on("change", order); const menuOrderRows = d3.select("select#orderRows").on("change", order); const graph = d3.select(DOM.svg(width, height)); // Margins const rowLabel = chartOptions?.["lables"]?.["rowLabel"] || "left"; const columnLabel = chartOptions?.["lables"]?.["columnLabel"] || "top"; const labelPadding = cellSize / 2; const legendElementWidth = cellSize * 3; const tOrdering = () => d3.transition().duration(900).ease(d3.easeCircleInOut).delay(250); const tValues = () => d3.transition().duration(900).delay(250); let heatmap, // rows, // columns, // cells, legendLabels, legendCells, legendData = [], max = 1, colourDefault = "rgb(255,255,255)", colourNotThere = "rgb(213,198,170)", negitiveCellFill = colourNotThere, //colourDefault, sequentialScale = d3 .scaleSequential() .domain([0, max]) .nice() .interpolator(d3.interpolateBlues), legendScale = d3.scaleSequential().domain([0, max]).nice(); margin[rowLabel] = chartOptions?.["lables"]?.["rowLabelMargin"] || 0; margin[columnLabel] = chartOptions?.["lables"]?.["columnLabelMargin"] || 0; function setup() { const defs = graph.append("defs"); // Add CSS Stylings defs .append("style") .attr("type", "text/css") .text( "@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');" ); defs.append("style").attr("type", "text/css").text(matrix_styles); // Legend const legend = graph.append("g").attr("class", "legend"); // labels legend.append("g").attr("class", "labels"); // cells legend.append("g").attr("class", "cells"); // Heatmap heatmap = graph .append("g") .attr("class", "heatmap") .attr("transform", `translate(${margin.left}, ${margin.top})`); // End Setup } function update() { sequentialScale.domain([0, max]).nice(); legendScale.domain([0, max]).nice(); legendData = legendScale.ticks(12); // legendLabels const legendLabels = graph .select(".legend .labels") .selectAll("text") .data(legendData); // Exit legendLabels.exit().transition(tValues).style("fill-opacity", 0).remove(); // Update legendLabels .transition(tValues) .text((d) => { return d; }) .style("fill-opacity", 1); // Enter legendLabels .enter() .append("text") .text((d) => { return d; }) .style("fill-opacity", 0) .style("text-anchor", "end") .attr("x", (d, i) => { return margin.left + legendElementWidth * (i + 1) - 4; }) .attr("y", height - margin.bottom - 6) .transition(tValues) .style("fill-opacity", 1); // legendCells const legendCells = graph .select(".legend .cells") .selectAll(".cell") .data(legendData); // Exit legendCells .exit() .transition(tValues) .style("fill-opacity", 0) .style("stroke-opacity", 0) .remove(); // Update legendCells .transition(tValues) .style("fill", (d, i) => { return sequentialScale(d); }) .style("fill-opacity", 1) .style("stroke-opacity", 1); // Enter legendCells .enter() .append("rect") .attr("class", "cell cell-border") .attr("x", (d, i) => { return margin.left + legendElementWidth * i; }) .attr("y", height - margin.bottom) .attr("width", legendElementWidth) .attr("height", cellSize) .style("fill", (d, i) => { return sequentialScale(d); }); const rows = heatmap.selectAll(".row").data(matrix); const newRows = rows .enter() .append("g") .attr("class", "row") .attr("transform", (d, i) => { return `translate(0, ${matrix_y(i)} )`; }); newRows .append("text") .attr("class", "label") .attr("y", matrix_y.bandwidth() / 2) .attr("dy", ".35em") .attr("x", () => { if (chartOptions.lables.rowLabel == "right") { return labelPadding + cellSize * matrix_columnNodes.length; } return -labelPadding; }) .attr("text-anchor", () => { return chartOptions.lables.rowLabel == "left" ? "end" : "start"; }) .transition(tValues) .text((d, i) => { return matrix_rowNodes[i]; }); // Update rows.transition(tOrdering).attr("transform", (d, i) => { return `translate(0, ${matrix_y(i)} )`; }); // Columns const columns = heatmap.selectAll(".column").data(matrix[0]); // Enter columns .enter() .append("g") .attr("class", "column") .attr("transform", (d, i) => { return `translate( ${matrix_x(i)} , -${labelPadding} )rotate(-60)`; }) .append("text") .attr("class", "label") .attr("x", 6) .attr("y", matrix_x.bandwidth() / 2) .attr("dy", ".35em") .attr("text-anchor", "start") .transition(tValues) .text((d, i) => { return matrix_columnNodes[i]; }); // Update columns.transition(tOrdering).attr("transform", (d, i) => { return `translate( ${matrix_x(i)}, -${labelPadding} )rotate(-60)`; }); // Cells const cells = heatmap .selectAll(".row") .data(matrix) .selectAll(".cell") .data((d) => { return d; }); // .attr("x", (d) => { // return matrix_x(d.x); // }); // Enter cells .enter() .append("rect") .attr("class", "cell cell-border") // Events .on("mouseover", cellMouseover) .on("mouseout", cellMouseout) .attr("width", 0) .attr("height", 0) .attr("y", 0) .attr("x", 0) .style("fill", "None") // .attr("width", 0) // .attr("height", 0) // .attr("data-xy", (d) => { // return `${d.x} ${d.y}`; // }) .style("fill", "None") .transition(tOrdering) .attr("width", matrix_x.bandwidth()) .attr("height", matrix_y.bandwidth()) .style("fill", cellColour) // .attr("y", 0) // .attr("x", (d, i) => { // return matrix_x(i); // }) // .attr("y", (d, i) => { // return matrix_y.bandwidth(); // }) // .attr("x", (d, i) => { // return matrix_x(i) + matrix_x.bandwidth() / 2; // }) .attr("transform", (d, i) => { return `translate( ${matrix_x(i)}, 0 )`; }); // Update cells .transition(tOrdering) .style("fill", cellColour) .attr("transform", (d, i) => { return `translate( ${matrix_x(i)}, 0 )`; }); // End Chart Update } setup(); update(); function cellColour(d) { return d.display > 0 ? sequentialScale(d.display) : negitiveCellFill; } function cellMouseover(data, index) { const rowLabels = graph.selectAll(".row .label"); const columnLabels = graph.selectAll(".column .label"); rowLabels.classed("highlight", (r, i) => { return i == index.y; }); columnLabels.classed("highlight", (c, i) => { return i == index.x; }); } function cellMouseout(data, index) { d3.selectAll(".label.highlight").classed("highlight", false); } function order() { const orderColumnsOn = d3.select("select#orderColumns").property("value"); const orderRowsOn = d3.select("select#orderRows").property("value"); const c = orderNodes(matrix_columnNodes, orderColumnsOn); const r = orderNodes(matrix_rowNodes, orderRowsOn); matrix_x.domain(c); matrix_y.domain(r); update(); } return graph.node(); }35:Tb72,// Percentage of images in libA that over lap wiht libB libIsSubsetOf = { // Create set to indentify cluster of subsets. const libraryImages = Object.entries(libraries).reduce( (results, [library, files]) => { results[library] = files.reduce((indexedFiles, file) => { const indexed = indexedFiles?.[file.file_name] || []; indexedFiles[file.file_name] = [...indexed, file]; return indexedFiles; }, {}); return results; }, {} ); const libraryMatrix = []; // rows for (let a = 0; a < indexedOrderedLibraries.length; ++a) { const libA = indexedOrderedLibraries[a]; // console.log("[libIsSubsetOf]", a, indexedOrderedLibraries[a]); // Pre populate matrix to 0 libraryMatrix[a] = Array(indexedOrderedLibraries.length).fill({ matchImageName: 0, matchFileChecksum: 0 }); // columns for (let b = 0; b < Object.keys(libraryImages).length; ++b) { const libB = indexedOrderedLibraries[b]; if (a != b) { let indexImageA = 0; let indexImageB = 0; let matchImageName = 0; let matchFileChecksum = 0; const libImagesA = Object.keys(libraryImages[libA]); const libImagesB = Object.keys(libraryImages[libB]); // Assuming images are sorted by image name do { const imageA = libImagesA[indexImageA]; const imageB = libImagesB[indexImageB]; if (imageA == imageB) { const imageFilesA = libraryImages[libA][imageA]; const imageFilesB = libraryImages[libB][imageB]; let matchingChecksums = false; // Compare checksums for (let fileA of imageFilesA) { for (let fileB of imageFilesB) { if (fileA.checksum == fileB.checksum) { matchingChecksums = true; } } } // Aknowledge matches matchImageName += 1; matchFileChecksum += +matchingChecksums; // Next for A and B indexImageA += 1; indexImageB += 1; } else if (imageA > imageB) { indexImageB += 1; // Next item in B } else if (imageA < imageB) { indexImageA += 1; // Next item in A } else { console.log("[libIsSubsetOf]", "->", imageA, imageB); // Output unexpected } } while ( indexImageA < libImagesA.length && indexImageB < libImagesB.length ); // Percentage of images in libA that over lap wiht libB const overlapImages = matchImageName / libraries[libA].length; const overlapChecksums = matchFileChecksum / libraries[libA].length; libraryMatrix[a][b] = { matchImageName: overlapImages, matchFileChecksum: overlapChecksums }; } // End A != B } } return libraryMatrix; }36:T4eb,overlaps = { const overlaps = []; let group = -1; let leftToCompare = [...indexedOrderedLibraries]; let nextToCompare = []; // Gather overlapping libraries while (leftToCompare.length != 0) { group += !nextToCompare.length ? 1 : 0; const libName = nextToCompare.length ? nextToCompare.pop() : leftToCompare.pop(); const libIndex = layerOfLibrary(libName); const groupLibs = overlaps?.[group] || []; groupLibs.push(libName); for (const sibling of coverage[libName]?.Overlaps) { if (!leftToCompare.includes(sibling)) { continue; } nextToCompare.push(sibling); leftToCompare = leftToCompare.filter((lib) => lib !== sibling); } overlaps[group] = groupLibs; } // Sort Overlaps for (let group = 0; group < overlaps.length; ++group) { overlaps[group].sort((a, b) => { const indexA = layerOfLibrary(a); const indexB = layerOfLibrary(b); const overlapA = libIsSubsetOf[indexA][indexB].matchFileChecksum; const overlapB = libIsSubsetOf[indexB][indexA].matchFileChecksum; if (overlapB > overlapA) { return 1; } if (overlapA > overlapB) { return -1; } return 0; }); } return overlaps; }37:T9d7,mergelibraryGroups = { let groups = []; let group = -1; let leftToCompare = [...Object.keys(coverage)]; let nextToCompare = []; // coverage // console.log(leftToCompare); // console.log(nextToCompare); while (leftToCompare.length != 0) { group += !nextToCompare.length ? 1 : 0; const libName = nextToCompare.length ? nextToCompare.pop() : leftToCompare.pop(); // console.log(libName); const overlaps = [ ...coverage[libName].Overlaps, ...coverage[libName].isSubsetOf ].filter((lib) => leftToCompare.includes(lib)); nextToCompare = [...nextToCompare, ...overlaps]; leftToCompare = leftToCompare.filter((el) => !overlaps.includes(el)); // for (const sibling of coverage[libName]?.Overlaps) { // if (!leftToCompare.includes(sibling)) { // continue; // } // nextToCompare.push(sibling); // leftToCompare = leftToCompare.filter((lib) => lib !== sibling); // } // console.log(overlaps); // break; const groupLibs = groups?.[group] || []; groupLibs.push(libName); groups[group] = groupLibs; } // const overlaps = []; // let group = -1; // let leftToCompare = [...indexedOrderedLibraries]; // let nextToCompare = []; // // Gather overlapping libraries // while (leftToCompare.length != 0) { // group += !nextToCompare.length ? 1 : 0; // const libName = nextToCompare.length // ? nextToCompare.pop() // : leftToCompare.pop(); // const libIndex = layerOfLibrary(libName); // const groupLibs = overlaps?.[group] || []; // groupLibs.push(libName); // for (const sibling of coverage[libName]?.Overlaps) { // if (!leftToCompare.includes(sibling)) { // continue; // } // nextToCompare.push(sibling); // leftToCompare = leftToCompare.filter((lib) => lib !== sibling); // } // overlaps[group] = groupLibs; // } // Object.keys(subSets).forEach((d) => { // for (let index = 0; index < groups.length; ++index) { // if (groups[index].includes(d)) { // subSets[d].forEach((subLib) => { // if (!groups[index].includes(subLib)) { // groups[index].push(subLib); // console.log(`Added ${subLib} to group ${index}`); // } // }); // } // } // }); // groups = mergeOverlaps(groups); return groups.reduce((results, d, i) => { results[`Group ${i}`] = d; return results; }, {}); return groups; }38:[{"id":"5326ae185e6fbe87e5dc52fdf66b27bb3605f97c0d9fbba51d3d0e28717de53415dffaedd41073cf64e0cdbc2ff0fee6b41bad8b2b9ca697c5026e904763737b","href":"https://static.observableusercontent.com/files/5326ae185e6fbe87e5dc52fdf66b27bb3605f97c0d9fbba51d3d0e28717de53415dffaedd41073cf64e0cdbc2ff0fee6b41bad8b2b9ca697c5026e904763737b","name":"2022-10-19_ImageMappings.csv","type":"text/csv","lastModified":1666159407064.437,"size":14185060}] 2f:{"id":"f61d4cf8b899f13b","slug":null,"title":"Radial Mapping (SVG)","thumbnail":"7c2a72475bbd20468e1b6e9f2f51cfde0a7a718c66ed431fbeec28508ffcd294","access_level":"public","create_time":"$D2022-09-17T11:06:26.284Z","update_time":"$D2023-03-24T08:00:34.181Z","view_time":null,"first_public_time":"$D2023-03-24T08:00:02.930Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"257d7672858ffb00","login":"mattay","name":"Matthew Anderson","avatar_url":"https://avatars-next.observableusercontent.com/2f1a8c7084eaf625374b1e22c91788a91e07a65872db3188edc07e62c03bb655","tier":"starter_2024"},"version":2137,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cb3a6fc9a457071","login":"mattay","name":"Matthew Anderson","avatar_url":"https://avatars-next.observableusercontent.com/2f1a8c7084eaf625374b1e22c91788a91e07a65872db3188edc07e62c03bb655","tier":null}],"members":[{"type":"individual","id":"0cb3a6fc9a457071","login":"mattay","name":"Matthew Anderson","avatar_url":"https://avatars-next.observableusercontent.com/2f1a8c7084eaf625374b1e22c91788a91e07a65872db3188edc07e62c03bb655","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Radial Mapping (SVG)","cells":[{"id":0,"value":"# Radial Mapping (SVG)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"viewof selectedLibrary = Inputs.select(Object.keys(mergelibraryGroups), {\n label: \"Library\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"mergelibraryGroups[selectedLibrary]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"// chart(filteredImages)\nchart(mergelibraryGroups[selectedLibrary], groupsImages[selectedLibrary])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"# Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1294,"value":"cameraModelStyling = ({\n \"\": { fill: \"Fuchsia\", stroke: \"none\" },\n \"iPhone 3G\": { fill: \"DarkGrey\", stroke: \"none\", \"stroke-width\": 0 },\n \"iPhone 4S\": { fill: \"Grey\", stroke: \"none\", \"stroke-width\": 0 },\n \"iPhone 6S\": { fill: \"DimGray\", stroke: \"none\", \"stroke-width\": 0 },\n \"PENTAX K-5\": {\n fill: \"Teal\",\n stroke: \"none\"\n },\n \"PENTAX K10D\": {\n fill: \"LightSeaGreen\",\n stroke: \"none\"\n },\n \"PENTAX K200D\": {\n fill: \"MediumAquamarine\",\n stroke: \"none\"\n },\n \"DMC-LX3\": { fill: \"SteelBlue\" },\n \"DMC-ZS7\": { fill: \"Moccasin\" },\n \"DMC-TZ2\": { fill: \"DarkKhaki\" },\n \"DMC-TZ15\": { fill: \"Khaki\" },\n \"DMC-FX12\": { fill: \"PapayaWhip\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"# Imported data set\n- Imported data\n- Indexes\n- Overlap calculations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"// mappings = FileAttachment(\"mappings@1.json\").json()\n// mappings = FileAttachment(\"mappings.csv\").csv()\nmappings = FileAttachment(\"2022-10-19_ImageMappings.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"libraries = mapToLibraries(mappings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"indexedOrderedLibraries = {\n return Object.keys(libraries).sort(sortNames);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"cameraModels = filteredMappings.reduce((results, file) => {\n const cameraModelName = file[\"camera_model_name\"];\n const cameraModeFiles = results?.[cameraModelName] || [];\n cameraModeFiles.push(file);\n results[cameraModelName] = cameraModeFiles;\n return results;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"indexedOrderedCameraModles = indexOuterToInnerRadius(cameraModels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"mapToLibraries = (mappings) => {\n const mapped = mappings.reduce((results, file) => {\n const library_name = file[\"library_name\"] || \"__NONE__\";\n const libraryFiles = results?.[library_name] || [];\n libraryFiles.push(file);\n results[library_name] = libraryFiles;\n return results;\n }, {});\n\n const sorted = Object.keys(mapped).sort();\n // sort by name\n return sorted.reduce((results, library) => {\n results[library] = mapped[library];\n return results;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"## Transform file list to list of images with list of files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"# Filtered Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"// filteredMappings = mappings.filter((file) => /^*/.test(file[\"file_name\"]))\nfilteredMappings = mappings.filter((file) => 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"__filteredImages = images.filter(\n // (image) => image.layers.length > 1 && image.checksums.size > 2\n // (image) => image.camera_model_name.size > 1\n // Libraries with Subsets\n (image) => {\n for (const file of image.layers) {\n if (file.library_name == selectedLibrary) {\n return true;\n }\n }\n return false;\n }\n)\n// .splice(0, 1280)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"__filteredLibraries = imagesToLibraries(__filteredImages)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"imagesToLibraries = (imageSets) => {\n return imageSets.reduce((results, image) => {\n for (const file of image.layers) {\n const library_name = file[\"library_name\"] || \"__NONE__\";\n const libraryFiles = results?.[library_name] || [];\n libraryFiles.push(file);\n results[library_name] = libraryFiles;\n }\n return results;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"__indexedOrderedFilteredLibraries = indexOuterToInnerRadius(__filteredLibraries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"layerOfFilteredLibrary = (library) =>\n __indexedOrderedFilteredLibraries.indexOf(library)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"layerOfLibrary = (library) => indexedOrderedLibraries.indexOf(library)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"indexOuterToInnerRadius = (object) => {\n return Object.keys(object).sort(\n (a, b) => object[b.length] - object[a.length]\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2088,"value":"layerOfGroupLibraries = (library) => {\n const group = selectedLibrary;\n return mergelibraryGroups[group].indexOf(library);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"# Charting Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"angle = (items, position) => {\n const segments = 360 / items;\n return position * segments;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"canvasScale = (numLibs, numItems, itemSize, itemSpacing, layerSpaceing) =>\n (width - 120) /\n (outerRadius(numLibs, numItems, itemSize, itemSpacing, layerSpaceing) * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"circumference = (numItems, itemSize, itemSpacing) => {\n return (itemSize + itemSpacing) * numItems;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"innerRadius = (numItems, itemSize, itemSpacing) => {\n const c = circumference(numItems, itemSize, itemSpacing);\n const r = c / Math.PI / 2;\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"outerRadius = (numLibs, numItems, itemSize, itemSpacing, layerSpacing) => {\n const depth = numLibs * (itemSize + layerSpacing);\n return innerRadius(numItems, itemSize, itemSpacing) + depth;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"## Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1430,"value":"matrix_x = d3\n .scaleBand()\n .range([\n 0,\n matrix_chartOptions?.dimensions?.cellSize * matrix_columnNodes.length\n ])\n .domain(d3.range(matrix_columnNodes.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"matrix_y = d3\n .scaleBand()\n .range([\n 0,\n matrix_chartOptions?.dimensions?.cellSize * matrix_rowNodes.length\n ])\n .domain(d3.range(matrix_rowNodes.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"matrix_chartOptions = ({\n lables: {\n title: \"\",\n x: \"\",\n y: \"\",\n rowLabel: \"right\",\n rowLabelMargin: 120,\n columnLabel: \"top\",\n columnLabelMargin: 120\n },\n dimensions: {\n width: 1152,\n height: 1200,\n margin: {\n top: 30,\n right: 10,\n bottom: 30,\n left: 10\n },\n cellSize: 6\n },\n tooltip: {\n offset: {\n x: 0,\n y: 0\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"matrix_styles = `\n text {\n fill: rgba(111, 124, 144, 1);\n font-family: Open Sans, Arial, sans-serif;\n font-weight: 400;\n font-size: 0.35rem; \n }\n \n text.highlight {\n fill: rgb(59,66,76);\n font-weight: 600;\n }\n\n .legend text {\n font-size: 80%\n }\n\n .cell {\n fill: none\n }\n \n .cell-border {\n stroke: rgba(140, 150, 166, 0.07);\n stroke-width: 1.1px; \n }\n \n .cell-hover {\n stroke: indianred;\n stroke-width: 1.1px; \n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"OrderOptionsColumns = [\n { value: \"name\", label: \"Name\" },\n { value: \"column value\", label: \"Value\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"OrderOptionsRows = [\n { value: \"name\", label: \"Name\" },\n { value: \"row value\", label: \"Value\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1881,"value":"orderNodes = (nodes, order) => {\n let ordered = [...Array(nodes.length).keys()];\n\n const sortName = (a, b) =>\n nodes[a].localeCompare(nodes[b], undefined, {\n numeric: true,\n sensitivity: \"base\"\n });\n\n switch (order) {\n case \"name\":\n ordered = ordered.sort(sortName);\n break;\n\n case \"column value\":\n ordered = ordered.sort((a, b) => {\n a = nodes[a];\n b = nodes[b];\n let columns = Totals.columns;\n\n if (columns[a] > columns[b]) {\n return 1;\n }\n if (columns[a] < columns[b]) {\n return -1;\n }\n return 0;\n });\n break;\n\n case \"row value\":\n ordered = ordered.sort((a, b) => {\n a = nodes[a];\n b = nodes[b];\n let rows = Totals.rows;\n\n if (rows[a] > rows[b]) {\n return -1;\n }\n if (rows[a] < rows[b]) {\n return 1;\n }\n return 0;\n });\n break;\n\n default:\n break;\n }\n\n return ordered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"matrix_rowNodes = indexedOrderedLibraries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"matrix_columnNodes = indexedOrderedLibraries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"# Calculating Overlaps\n\nThe matrix shows the percentage of files that match (checksums) in library A that overlap with the corresponding library B","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1834,"value":"viewof ViewOptions = html`

\n Order Coloumns By \n \n

\n Order Rows By \n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"libsHeatmap = heatmap(matrix, matrix_chartOptions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"matrix = {\n let matrix = [];\n\n for (let y = 0; y < matrix_rowNodes.length; y += 1) {\n matrix[y] = [];\n for (let x = 0; x < matrix_columnNodes.length; x += 1) {\n // console.log(y, x, matrix_rowNodes[y], matrix_columnNodes[x], libIsSubsetOf[x][y]);\n matrix[y][x] = {\n x: x,\n y: y,\n display: libIsSubsetOf[y][x].matchFileChecksum\n };\n }\n }\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"Totals = {\n let totals = {\n rows: {},\n columns: {}\n };\n\n // Libraries\n for (let a = 0; a < indexedOrderedLibraries.length; ++a) {\n const library = indexedOrderedLibraries[a];\n\n totals.rows[library] = libIsSubsetOf[a].reduce((total, b) => {\n return total + (b.matchFileChecksum == 0 ? 0 : 1);\n }, 0);\n\n totals.columns[library] = libIsSubsetOf[a].reduce((total, b) => {\n return total + (b.matchFileChecksum == 0 ? 0 : 1);\n }, 0);\n }\n\n return totals;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"coverage = indexedOrderedLibraries.reduce((subsets, libName, index) => {\n subsets[libName] = { isSubsetOf: [], Overlaps: [] };\n\n console.log(libName, index);\n for (let i = 0; i < libIsSubsetOf[index].length; ++i) {\n const libs = libIsSubsetOf[index][i];\n\n if (libs.matchFileChecksum == 1) {\n subsets[libName].isSubsetOf.push(indexedOrderedLibraries[i]);\n } else if (libs.matchFileChecksum > 0) {\n subsets[libName].Overlaps.push(indexedOrderedLibraries[i]);\n }\n }\n\n return subsets;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"subSets = {\n // For each library, extract from matrix \"Coverage\" libraries that are a subset of it\n const subSets = indexedOrderedLibraries.reduce((results, libName) => {\n for (const parent of coverage[libName]?.isSubsetOf) {\n const childeren = results?.[parent] || [];\n results[parent] = [...childeren, libName];\n }\n\n return results;\n }, {});\n\n // Reduce any overlap\n return Object.keys(subSets).reduce((results, libName) => {\n for (const parent of Object.keys(subSets)) {\n if (libName != parent) {\n if (results[parent].includes(libName)) {\n delete results[libName];\n }\n }\n }\n return results;\n }, subSets);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"mergeOverlaps = () => {\n const overlap = [];\n // let group = -1;\n // let leftToCompare = [...indexedOrderedLibraries];\n // let nextToCompare = [];\n\n // Gather overlapping libraries\n // while (leftToCompare.length != 0) {\n // group += !nextToCompare.length ? 1 : 0;\n\n // const libName = nextToCompare.length\n // ? nextToCompare.pop()\n // : leftToCompare.pop();\n // const libIndex = layerOfLibrary(libName);\n // const groupLibs = overlap?.[group] || [];\n // groupLibs.push(libName);\n\n // for (const sibling of coverage[libName]?.Overlaps) {\n // if (!leftToCompare.includes(sibling)) {\n // continue;\n // }\n\n // nextToCompare.push(sibling);\n // leftToCompare = leftToCompare.filter((lib) => lib !== sibling);\n // }\n\n // overlap[group] = groupLibs;\n // }\n\n return [];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1981,"value":"# Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1983,"value":"sortNames = (a, b) =>\n a.localeCompare(b, undefined, {\n numeric: true,\n sensitivity: \"base\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"# Tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1965,"value":"// {\n// for (let index = 0; index < indexedOrderedLibraries.length; ++index) {\n// console.log(index, indexedOrderedLibraries[index]);\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"