2f:T408,viewof featureSelection = { const featureSelection = html``; featureSelection.addEventListener("input", () => { // First, we need to transform the data into a format that can be used by Vega-Lite const transformedData = transformData(classIndexMap); // Calculate the maximum importance value across all classes const maxImportance = Math.max( ...transformedData.map((classData) => Math.max(...classData.data.map((d) => d.importance)) ) ); const barCharts = transformedData.map((classData, index) => { // Change data color given featureSelection const add = classData?.data.map((item) => { if (!item.feature.includes(featureSelection.value)) { return { ...item, color: "lightgray" }; } return item; }); // Call vega streaming data update on barCharts update(barChartObject.barCharts[index], "data", add, () => true); }); }); return featureSelection; }30:T4e4,{ if (isLoading) { return html`

Loading, please wait...

`; } else { return html``; } } 31:T41e,function getMinMaxPerClass(data) { let minMax = {}; for (let dimension in data) { minMax[dimension] = {}; for (let feature in data[dimension]) { let currentClass = data[dimension][feature].class; let currentData = data[dimension][feature].data; let currentMin, currentMax; if (dimension === "1D") { currentMin = Math.min(...currentData); currentMax = Math.max(...currentData); } else { currentMin = Math.min(...currentData.map((arr) => Math.min(...arr))); currentMax = Math.max(...currentData.map((arr) => Math.max(...arr))); } if (!minMax[dimension][currentClass]) { minMax[dimension][currentClass] = { min: currentMin, max: currentMax }; } else { if (currentMin < minMax[dimension][currentClass].min) { minMax[dimension][currentClass].min = currentMin; } if (currentMax > minMax[dimension][currentClass].max) { minMax[dimension][currentClass].max = currentMax; } } } } return minMax; }32:T530,function extractAndSortFeatureMaps(featureMaps) { const sortedFeatureMapsByClass = {}; for (const dimension in featureMaps) { for (const key in featureMaps[dimension]) { const featureMap = featureMaps[dimension][key]; const className = featureMap.class; if (!sortedFeatureMapsByClass[className]) { sortedFeatureMapsByClass[className] = []; } // Create a new object to store feature map information let newFeatureMapObject = { key, dimension, importance: featureMap.importance }; // If dimension is "1D", add feature to the newFeatureMapObject if (dimension === "1D") { newFeatureMapObject.feature = featureMap.feature; } // If dimension is "2D", add feature_1 and feature_2 to the newFeatureMapObject else if (dimension === "2D") { newFeatureMapObject.feature_1 = featureMap.feature_1; newFeatureMapObject.feature_2 = featureMap.feature_2; } // Push the newFeatureMapObject to the corresponding class array sortedFeatureMapsByClass[className].push(newFeatureMapObject); } } for (const className in sortedFeatureMapsByClass) { sortedFeatureMapsByClass[className].sort( (a, b) => b.importance - a.importance ); } return sortedFeatureMapsByClass; }33:T513,async function prepareHtmlElements(originalData, featureMaps) { const sortedFeatureMapsByClass = extractAndSortFeatureMaps(featureMaps); const plotsContainer = document.getElementById("plots-container"); // Remove existing elements while (plotsContainer.firstChild) { plotsContainer.removeChild(plotsContainer.firstChild); } const classIndexMap = getClassIndexMap(featureMaps); for (const className in sortedFeatureMapsByClass) { const classColumn = document.createElement("div"); classColumn.classList.add("class-column"); plotsContainer.appendChild(classColumn); const classTitle = document.createElement("h3"); classTitle.textContent = className; // Set the color of the classTitle using the getColor function const classColor = getColor(className, classIndexMap); classTitle.style.color = classColor; classColumn.appendChild(classTitle); classColumn.dataset.class = className; // Create a container element for the bar chart const barChartContainer = document.createElement("div"); barChartContainer.classList.add("bar-chart-container"); classColumn.appendChild(barChartContainer); // Create a separator element const separator = document.createElement("hr"); classColumn.appendChild(separator); } }34:T416,featureMapsByFeature = { const sortedFeatureMapsByClass = extractAndSortFeatureMaps(featureMaps); const featureMapsByFeature = {}; for (const className in sortedFeatureMapsByClass) { // Create an object to store the feature maps by their feature or feature key sortedFeatureMapsByClass[className].forEach((featureMap) => { if (featureMap.dimension === "1D") { // If the featureMap dimension is "1D", use its feature as the key const feature = featureMap.feature; if (!featureMapsByFeature[feature]) { featureMapsByFeature[feature] = []; } featureMapsByFeature[feature].push(featureMap); } else { // Otherwise, create a composite feature key and use it as the key const featureKey = `${featureMap.feature_1} & ${featureMap.feature_2}`; if (!featureMapsByFeature[featureKey]) { featureMapsByFeature[featureKey] = []; } featureMapsByFeature[featureKey].push(featureMap); } }); } return featureMapsByFeature; }35:T829,function generateBarChartObject(classIndexMap) { // First, we need to transform the data into a format that can be used by Vega-Lite const transformedData = transformData(classIndexMap); // Calculate the maximum and minimum importance value across all classes const maxImportance = Math.max( ...transformedData.map((classData) => Math.max(...classData.data.map((d) => d.importance)) ) ); const minImportance = Math.min( ...transformedData.map((classData) => Math.min(...classData.data.map((d) => d.importance)) ) ); // Create an array to store the brush selections for each class const brushSelections = transformedData.map(() => []); // Finally, we create the bar charts const barCharts = transformedData.map((classData, index) => { // Create a selection object that will allow us to capture the user's brush selection const brushName = `brush_${index}`; const brush = vl.selectInterval(brushName).encodings("y"); const chart = vl .markBar() .data({ name: "data", values: classData.data }) .encode( vl.y().fieldN("feature").sort("-x"), vl.x().fieldQ("importance"), vl.color().fieldN("color").scale(null), vl.tooltip([vl.fieldN("feature"), vl.fieldQ("importance")]) ) .select(brush) .width(100); // Render the chart and get the Vega view object const view = chart.toView(); // Listen for changes in the brush selection view.addSignalListener(brushName, function (name, value) { // Update the brush selection for this class brushSelections[index] = value; }); // Append the chart to the appropriate container element const plotsContainer = document.getElementById("plots-container"); const barChartContainer = plotsContainer.querySelector( `[data-class="${classData.className}"] .bar-chart-container` ); view.initialize(barChartContainer); return view; }); // Return the container element and brush selections to render them in Observable return { barCharts, brushSelections }; }36:Ta9c,async function renderPlotsInOrderOfImportance( originalData, featureMaps, minMaxPerClass, brushSelections, precomputedPlots // Pass in the precomputedPlots object as an argument ) { const sortedFeatureMapsByClass = extractAndSortFeatureMaps(featureMaps); const plotsContainer = document.getElementById("plots-container"); for (const className in sortedFeatureMapsByClass) { const classColumn = plotsContainer.querySelector( `[data-class="${className}"]` ); // Remove the existing plots const existingPlots = classColumn.querySelectorAll(".cell"); existingPlots.forEach((plot) => plot.remove()); // Get the brush selection for this class const classIndex = classIndexMap[className]; const classBrushSelection = brushSelections[classIndex]; // Filter the feature maps based on the featureSelection let selectedFeatureMaps = sortedFeatureMapsByClass[className].filter( (featureMap) => { if (featureMap.dimension === "1D") { return featureMap.feature.includes(featureSelection); } else { const featureKey = `${featureMap.feature_1} & ${featureMap.feature_2}`; return featureKey.includes(featureSelection); } } ); // If there's a brush selection for this class and it has a feature property, filter the selectedFeatureMaps if (classBrushSelection && classBrushSelection.feature) { // Use the filter function to select the relevant feature maps for the class selectedFeatureMaps = selectedFeatureMaps.filter((featureMap) => { // If the featureMap dimension is "1D", check if its key is included in the brush selection if (featureMap.dimension === "1D") { return classBrushSelection.feature.includes(featureMap.feature); } else { // Otherwise, create a composite feature key and check if it is included in the brush selection const featureKey = `${featureMap.feature_1} & ${featureMap.feature_2}`; return classBrushSelection.feature.includes(featureKey); } }); } for (const featureMap of selectedFeatureMaps) { const { key } = featureMap; // Retrieve the precomputed plot from the stored object instead of calling createLinePlot or createHeatmap const plot = precomputedPlots[className][key]; // Create a new div element for the cell and add the 'cell' class const cellDiv = document.createElement("div"); cellDiv.classList.add("cell"); // Append the Vega-Lite chart container to the cell div cellDiv.appendChild(plot); // Append the cell div to the classColumn element classColumn.appendChild(cellDiv); } } }37:T441,async function precomputePlots(originalData, featureMaps, minMaxPerClass) { const sortedFeatureMapsByClass = extractAndSortFeatureMaps(featureMaps) // Precompute and store the plots in an object const precomputedPlots = {}; mutable isLoading = true for (const className in sortedFeatureMapsByClass) { precomputedPlots[className] = {}; for (const featureMap of sortedFeatureMapsByClass[className]) { const { key, dimension } = featureMap; await nextFrame(); const plot = dimension === "1D" ? await createLinePlot( featureMaps, key, originalData, minMaxPerClass["1D"][className].min, minMaxPerClass["1D"][className].max ) : await createHeatmap( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ); precomputedPlots[className][key] = plot; } } mutable isLoading = false return precomputedPlots; }38:T10f4,function createLinePlot( featureMaps, featureMapKey, originalData, yMin = null, yMax = null, width = 150, height = 150 ) { const { plotData, histogramData } = preprocess1DData( featureMaps, featureMapKey, originalData ); const featureName = featureMaps["1D"][featureMapKey].feature; const className = featureMaps["1D"][featureMapKey].class; const classIndex = featureMaps["1D"][featureMapKey].classIndex; const score = featureMaps["1D"][featureMapKey].importance; const xValues = data.map((d) => d[featureName]); const minXValue = Math.min(...xValues); const maxXValue = Math.max(...xValues); // Calculate yMin and yMax if not provided if (yMin === null || yMax === null) { const yValues = plotData.map((d) => d.y); yMin = Math.min(...yValues); yMax = Math.max(...yValues); } const linePlot = vl .markLine() // Make a line chart .data(plotData) // Using the provided data .encode( vl.color().value("black"), vl.x().fieldQ("x").title(featureName), // For x, use the x field and set the title vl .y() .fieldQ("y") .title("Output") .scale({ domain: [yMin, yMax] }), // For y, use the y field and set the scale vl.tooltip().fieldN("class") // For tooltips, show the class field ); const numBins = 20; // Calculate the bin size const binSize = (maxXValue - minXValue) / numBins; // Create an array of bin edges const binEdges = Array.from( { length: numBins + 1 }, (_, i) => minXValue + i * binSize ); // Determine the number of target classes const targetClasses = [...new Set(originalData.map((d) => d.target))].sort( (a, b) => a - b ); // Create an object to store the bins for each class const bins = targetClasses.reduce((acc, target) => { acc[target] = binEdges.slice(0, -1).map((binStart, i) => ({ binStart, binEnd: binEdges[i + 1], count: 0, class: target // Encode the target class in the bins' data })); return acc; }, {}); // Iterate over the data and increment the count for the appropriate bin and class originalData.forEach((d) => { const binIndex = Math.floor((d[featureName] - minXValue) / binSize); if (binIndex >= 0 && binIndex < numBins) { bins[d.target][binIndex].count += 1; } }); // Find the maximum bin size let maxBinSize = 0; targetClasses.forEach((target) => { bins[target].forEach((bin) => { maxBinSize = Math.max(maxBinSize, bin.count); }); }); // Dynamically create histograms for each target class const histograms = targetClasses.map((target, index) => { const startY = (index * height) / targetClasses.length; const endY = ((index + 1) * height) / targetClasses.length; return vl .markBar() .data( bins[target].map((bin) => ({ ...bin, target // Add the target field to the bins' data })) ) .encode( vl.y().value(startY), // Set the starting y-value based on the current index vl.y2().value(endY), // Set the ending y-value based on the current index vl.x().fieldQ("binStart"), vl.x2().fieldQ("binEnd"), vl .opacity() .fieldQ("count") .scale({ domain: [0, maxBinSize], range: [0, 1] }), // .legend({ // title: "Count", // values: [ // roundToNearestBase(maxBinSize * 0.1, 5), // roundToNearestBase(maxBinSize / 2, 5), // roundToNearestBase(maxBinSize * 0.9, 5) // ] // }), vl .color() .fieldN("target") .scale({ domain: targetClasses.map((target) => target), // Map target indices to class names range: targetClasses.map((target) => getColor(target)) }) .legend(null) ); }); const zeroLine = vl .markRule({ strokeDash: [5, 5] }) // Make a dashed line .data([{ y: 0 }]) // At y=0 .encode(vl.y().fieldQ("y")); return vl .layer(...histograms, linePlot, zeroLine) .height(height) .width(width) .title({ text: `${featureName} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex) }) // Set the overall chart title .render(); // Combine the charts using layer }39:Tc9b,function createHeatmap( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = 150, height = 150 ) { const { data, feature_1, feature_2 } = preprocess2DData( featureMaps, featureMapKey, originalData ); const featureName1 = featureMaps["2D"][featureMapKey].feature_1; const featureName2 = featureMaps["2D"][featureMapKey].feature_2; const className = featureMaps["2D"][featureMapKey].class; const classIndex = featureMaps["2D"][featureMapKey].classIndex; const score = featureMaps["2D"][featureMapKey].importance; if (colorMin === null || colorMax === null) { const values = data.map((d) => d.value); colorMin = Math.min(...values); colorMax = Math.max(...values); } const rowIndexValues = Array.from( new Set(data.map((d) => parseFloat(d.rowIndex))) ).sort((a, b) => a - b); const columnIndexValues = Array.from( new Set(data.map((d) => parseFloat(d.columnIndex))) ).sort((a, b) => a - b); const colorEnd = getColor(classIndex); const colorStart = getAlternateColor(originalData, classIndex); // const colorMidpoint = (colorMin + colorMax) / 2; const colorMidpoint = Math.max(0, colorMin); const xBinSize = (rowIndexValues[rowIndexValues.length - 1] - rowIndexValues[0]) / (rowIndexValues.length - 1); const yBinSize = (columnIndexValues[columnIndexValues.length - 1] - columnIndexValues[0]) / (columnIndexValues.length - 1); // const shiftedData = data.map((d) => ({ // ...d, // rowIndex: d.rowIndex + (0 * xBinSize) / 2, // columnIndex: d.columnIndex - (0 * yBinSize) / 2 // })); const heatmap = vl .markRect() .data(data) .encode( vl .x() .fieldQ("rowIndex") .bin({ maxbins: rowIndexValues.length }) .title(featureName1), vl .y() .fieldQ("columnIndex") .bin({ maxbins: columnIndexValues.length }) .title(featureName2) .scale({ reverse: false }), vl .color() .fieldQ("value") .title("Output") .scale({ domain: [colorMin, colorMidpoint, colorMax], range: [colorStart, "white", colorEnd] }) .legend({ gradientLength: height * 0.75, // Adjust the length of the gradient bar gradientThickness: 10 // Adjust the thickness of the gradient bar }) ); const scatterplot = vl .markPoint() .data(originalData) .encode( vl.x().fieldQ(featureName1).title(featureName1), vl.y().fieldQ(featureName2).title(featureName2).scale({ reverse: false }), vl .color() .fieldN("target") .title("Class") .scale({ domain: Array.from(new Set(originalData.map((d) => d.target))), // Map the domain to class names range: Array.from( new Set(originalData.map((d) => getColor(d.target))) ) }) .legend(null) ); return vl .layer(heatmap, scatterplot) .width(width) .height(height) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed( 2 )}`, color: getColor(classIndex) }) .render(); }3a:[{"id":"96e35c1b3213d472936d546cdee35a314fa8257251193ced13d722ee16023ad24b318a0500b46c330bf3164b97bcd7ecb61177f304722c657c72e75aae1533c2","href":"https://static.observableusercontent.com/files/96e35c1b3213d472936d546cdee35a314fa8257251193ced13d722ee16023ad24b318a0500b46c330bf3164b97bcd7ecb61177f304722c657c72e75aae1533c2","name":"penguins_0.csv","type":"text/csv","lastModified":1690818688250.995,"size":14779},{"id":"f7bd5aac575c32407cf2057d496309ee613d0e93094f33b78f4e808eb69c622a4100ab1a068a773e326520c065ff0e6de475b991c7a5412aa885cd7e43d5d252","href":"https://static.observableusercontent.com/files/f7bd5aac575c32407cf2057d496309ee613d0e93094f33b78f4e808eb69c622a4100ab1a068a773e326520c065ff0e6de475b991c7a5412aa885cd7e43d5d252","name":"penguins_0_feature_maps_permutation.json","type":"application/json","lastModified":1690818688250.995,"size":880917},{"id":"175f22bf9c68d2867c6ce1d2507aa05ce133b4a47f93ece8991cf7002884b45680a4d076f2d6855d5c25bb73ddbb919f9c2c25bb4923057487bd67e89a7316e9","href":"https://static.observableusercontent.com/files/175f22bf9c68d2867c6ce1d2507aa05ce133b4a47f93ece8991cf7002884b45680a4d076f2d6855d5c25bb73ddbb919f9c2c25bb4923057487bd67e89a7316e9","name":"penguins_0_feature_maps_ranges.json","type":"application/json","lastModified":1690818688250.995,"size":882429},{"id":"ce5b249a88cc70cce52d493fcdbe580a95997c4c4a60c65b06a1193556b30af8cfb78766f9c353d819e52687c7491c69c8fa55f96333da26b16bb646e9a1c4be","href":"https://static.observableusercontent.com/files/ce5b249a88cc70cce52d493fcdbe580a95997c4c4a60c65b06a1193556b30af8cfb78766f9c353d819e52687c7491c69c8fa55f96333da26b16bb646e9a1c4be","name":"housing_0.csv","type":"text/csv","lastModified":1690818688250.995,"size":1740227},{"id":"5e9e69481eddafe34ab7f7926e5b654fdf206373e2c5a96e8c0a0687b4ef79960562096721bc825fdf6587b23374d35c3e8c03ecb7c340d192b75f1600074563","href":"https://static.observableusercontent.com/files/5e9e69481eddafe34ab7f7926e5b654fdf206373e2c5a96e8c0a0687b4ef79960562096721bc825fdf6587b23374d35c3e8c03ecb7c340d192b75f1600074563","name":"housing_0_feature_maps_permutation.json","type":"application/json","lastModified":1690818688250.995,"size":1559085},{"id":"8c84648023be5a76299fcfc7b5978b11e90ee2f6e884d7d8145564e804eb5783cc58cf194510d650e4edd0469b0873fd798452fc84839535ce2a90f776009419","href":"https://static.observableusercontent.com/files/8c84648023be5a76299fcfc7b5978b11e90ee2f6e884d7d8145564e804eb5783cc58cf194510d650e4edd0469b0873fd798452fc84839535ce2a90f776009419","name":"housing_0_feature_maps_ranges.json","type":"application/json","lastModified":1690818688250.995,"size":1559515}] 2d:{"title":"Try AnimationFrame","cells":[{"id":0,"value":"# Try AnimationFrame","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"viewof fileSelection = {\n const inputs = Inputs.select(\n [\n \"Penguins, Importance: Permutation Feature Importance\",\n \"California Housing, Importance: Permutation Feature Importance\",\n \"California Housing, Importance: Output Range\"\n ],\n {\n label: \"Data Selection\"\n }\n );\n inputs.addEventListener(\"input\", (event) => {\n \n });\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof summary_data = SummaryTable(data, { label: \"Data\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"{\n return Plot.plot({\n marks: [\n Plot.dot(data, {\n x: featureNames[0],\n y: featureNames[1],\n fill: (datum) => getColor(datum.target), // use color map to set point color\n r: 5\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"plotsContainer = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1011,"value":"mutable isLoading = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"## Style","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"## Datafiles","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"files = {\n return {\n \"Penguins, Importance: Permutation Feature Importance\":\n await FileAttachment(\"penguins_0.csv\").csv({ typed: true }),\n \"California Housing, Importance: Permutation Feature Importance\":\n await FileAttachment(\"housing_0.csv\").csv({ typed: true }),\n \"California Housing, Importance: Output Range\":\n await FileAttachment(\"housing_0.csv\").csv({ typed: true }),\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"data = files[fileSelection]","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"featureMaps = featureMapFiles[fileSelection]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"featureMapFiles = {\n return {\n \"Penguins, Importance: Output Range\": processFeatureMaps(\n await FileAttachment(\"penguins_0_feature_maps_ranges.json\").json()\n ),\n \"Penguins, Importance: Permutation Feature Importance\": processFeatureMaps(\n await FileAttachment(\"penguins_0_feature_maps_permutation.json\").json()\n ),\n \"California Housing, Importance: Output Range\": processFeatureMaps(\n await FileAttachment(\"housing_0_feature_maps_ranges.json\").json()\n ),\n \"California Housing, Importance: Permutation Feature Importance\": processFeatureMaps(\n await FileAttachment(\"housing_0_feature_maps_permutation.json\").json()\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"## Data Processing","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"renderPlotsInOrderOfImportance(\n data,\n featureMaps,\n minMaxPerClass,\n barChartObject.brushSelections,\n precomputedPlots\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"{\n const barChartContainers = plotsContainer.querySelectorAll(\n \".bar-chart-container\"\n );\n\n barChartContainers.forEach((container) => {\n container.addEventListener(\"mouseup\", () => {\n \n renderPlotsInOrderOfImportance(\n data,\n featureMaps,\n minMaxPerClass,\n barChartObject.brushSelections,\n precomputedPlots\n );\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"minMaxPerClass = getMinMaxPerClass(featureMaps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"classIndexMap = getClassIndexMap(featureMaps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"indexClassMap = Object.keys(classIndexMap).reduce((acc, key) => {\n acc[classIndexMap[key]] = key;\n return acc;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"featureNames = {\n if (data.length > 0) {\n const firstObject = data[0];\n const keys = Object.keys(firstObject);\n return keys.slice(0, 2);\n } else {\n return [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"barChartObject = generateBarChartObject(classIndexMap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"prepareHtmlElements(data, featureMaps, minMaxPerClass)","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"## Preprocessing Functions","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function processFeatureMaps(data) {\n const newData = { ...data };\n\n for (const dim in newData) {\n for (const key in newData[dim]) {\n const dataObj = newData[dim][key];\n const dataArray = dataObj.data;\n\n if (dim === \"1D\") {\n dataObj.min = Math.min(...dataArray);\n dataObj.max = Math.max(...dataArray);\n } else if (dim === \"2D\") {\n let min = Infinity;\n let max = -Infinity;\n\n for (const arr of dataArray) {\n const arrMin = Math.min(...arr);\n const arrMax = Math.max(...arr);\n\n if (arrMin < min) {\n min = arrMin;\n }\n\n if (arrMax > max) {\n max = arrMax;\n }\n }\n\n dataObj.min = min;\n dataObj.max = max;\n }\n }\n }\n\n return newData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function getClassIndexMap(featureMaps) {\n const classIndexMap = {};\n\n for (const dimension in featureMaps) {\n for (const key in featureMaps[dimension]) {\n const featureMap = featureMaps[dimension][key];\n const className = featureMap.class;\n const classIndex = featureMap.classIndex;\n\n if (!classIndexMap.hasOwnProperty(className)) {\n classIndexMap[className] = classIndex;\n }\n }\n }\n\n return classIndexMap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"function getColor(target, classIndexMap = null) {\n // Convert targets that are \"False\" to 0 and targets that are \"True\" to 1\n if (target === \"False\") {\n target = 0;\n } else if (target === \"True\") {\n target = 1;\n }\n\n // If a classIndexMap is provided and the target is a string, use the map to get the classIndex\n if (classIndexMap && typeof target === \"string\") {\n const className = target;\n if (classIndexMap.hasOwnProperty(className)) {\n target = classIndexMap[className];\n } else {\n throw new Error(\n `Class name '${className}' not found in the classIndexMap.`\n );\n }\n }\n\n // Calculate the index of the color in the schemeCategory10 array\n const index = target % d3.schemeCategory10.length;\n // Return the corresponding color\n return d3.schemeCategory10[index];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"function getAlternateColor(data, target) {return \"#000000\"}","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"function minMax2D(data) {\n const flatData = data.flat();\n const values = flatData.map(d => d);\n return {\n min: Math.min(...values),\n max: Math.max(...values)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"function getScaledValues(data, feature, resolution) {\n const values = data.map(d => d[feature]);\n if (typeof values[0] === 'string' || values[0] instanceof String) {\n return [... new Set(values)]\n }\n const min = Math.min(...values);\n const max = Math.max(...values);\n const step = (max - min) / (resolution - 1);\n return Array.from({ length: resolution }, (_, i) => min + i * step);\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"function generateHistogramData(data, feature) {\n return data.map((d) => ({ x: d[feature], class: `Class_${d.target}` }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"function preprocess1DData(featureMaps, featureMapKey, originalData) {\n const featureMap = featureMaps[\"1D\"][featureMapKey];\n const dataToPlot = featureMap.data;\n const feature = featureMap.feature;\n\n const scaledXValues = getScaledValues(\n originalData,\n feature,\n dataToPlot.length\n );\n \n const plotData = scaledXValues.map((x, index) => ({\n x: x,\n y: dataToPlot[index],\n class: featureMap.class\n }));\n \n\n const histogramData = generateHistogramData(originalData, feature);\n return { plotData, histogramData };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"function preprocess2DData(featureMaps, featureMapKey, data) {\n const featureMap = featureMaps[\"2D\"][featureMapKey];\n const feature_1 = featureMap.feature_1;\n const feature_2 = featureMap.feature_2;\n const data2D = featureMap.data;\n const resolution = data2D.length;\n const c = featureMap.class;\n\n const scaledRowValues = getScaledValues(data, feature_1, resolution);\n const scaledColumnValues = getScaledValues(data, feature_2, resolution);\n\n const formattedData = data2D.flatMap((row, rowIndex) =>\n row.map((value, columnIndex) => ({\n rowIndex: scaledRowValues[rowIndex],\n columnIndex: scaledColumnValues[columnIndex],\n value: value\n }))\n );\n\n return { data: formattedData, feature_1, feature_2 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"function roundToNearestBase(value, base) {\n return Math.round(value / base) * base;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"precomputedPlots = precomputePlots(data, featureMaps, minMaxPerClass)","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"function transformData(classIndexMap) {\n const transformedData = Object.entries(classIndexMap).map(\n ([className, classIndex]) => {\n // Get the 1D data for this class\n const classData1D = Object.values(featureMaps[\"1D\"]).filter(\n (d) => d.class === className\n );\n\n // Get the 2D data for this class\n const classData2D = Object.values(featureMaps[\"2D\"]).filter(\n (d) => d.class === className\n );\n\n // Combine the 1D and 2D data\n const classData = [\n ...classData1D.map((d) => ({\n feature: d.feature,\n importance: d.importance,\n color: getColor(classIndex)\n })),\n ...classData2D.map((d) => ({\n feature: `${d.feature_1} & ${d.feature_2}`,\n importance: d.importance,\n color: getColor(classIndex)\n }))\n ];\n\n return {\n className,\n data: classData\n };\n }\n );\n \n return transformedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"// insert and/or remove tuples using a Vega ChangeSet\n// re-run and return (a promise for) the View\nfunction update(view, name, insert, remove) {\n const cs = vl.vega.changeset();\n if (remove != null) cs.remove(remove);\n if (insert != null) cs.insert(insert);\n return view.change(name, cs).runAsync();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"## Visualization Functions","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"## Ease the strain on the browser","pinned":false,"hidden":false,"mode":"md"},{"id":978,"value":"function nextFrame() {\n return new Promise(resolve => requestAnimationFrame(resolve));\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}