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:T4e3,{ 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:Tac3,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; const match1D = key.match(/feature_map_(\d+)/); const match2D = key.match(/feature_map_(\d+)_(\d+)/); let idx = null let idx2 = null if (match2D != null) { idx = parseInt(match2D[1]); idx2 = parseInt(match2D[2]); } else { idx = parseInt(match1D[1]); } await nextFrame(); const plot = dimension === "1D" && type_summary[idx] === "continuous" ? await createLinePlot( featureMaps, key, originalData, minMaxPerClass["1D"][className].min, minMaxPerClass["1D"][className].max ) : dimension === "1D" && type_summary[idx] === "ordinal" ? await createBarPlot( featureMaps, key, originalData, minMaxPerClass["1D"][className].min, minMaxPerClass["1D"][className].max ) : dimension === "2D" && type_summary[idx] === "continuous" && type_summary[idx2] === "continuous" ? await createHeatmap( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ) : dimension === "2D" && type_summary[idx] === "ordinal" && type_summary[idx2] === "continuous" ? await createHeatmapOrdinal1( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ) : dimension === "2D" && type_summary[idx] === "continuous" && type_summary[idx2] === "ordinal" ? await createHeatmapOrdinal2( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ) : await createHeatmapNominal( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ); precomputedPlots[className][key] = plot; } } mutable isLoading = false return precomputedPlots; }38:T1186,function createLinePlot( featureMaps, featureMapKey, originalData, yMin = null, yMax = null, width = 300, height = 300 ) { 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 .params(vl.selectInterval().bind('scales')) // bind interval selection to scale domains .transform( vl.calculate("datum.x").as(`${featureName}`), vl.calculate("datum.y").as("Output") ) .encode( vl.color().value("black"), vl.x().fieldQ(`${featureName}`).title(featureName).axis({labelOverlap:"greedy"}), // For x, use the x field and set the title vl .y() .fieldQ("Output") .title("Output") .scale({ domain: [yMin, yMax] }) .axis({labelOverlap:"greedy"}), // For y, use the y field and set the scale vl.tooltip([{field:`${featureName}`, format:".2f"}, {field:"Output", format:".2f"}]) // 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] }), vl .color() .fieldN("target") .scale({ domain: targetClasses.map((target) => target), // Map target indices to class names range: targetClasses.map((target) => getColor(target, classIndexMap)) }) .legend(null), vl.tooltip(["count", "target"]), ); }); 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) .title({ text: `${featureName} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex) }) // Set the overall chart title .height(height) .width(width) .render(); // Combine the charts using layer }39:Td27,function createBarPlot( featureMaps, featureMapKey, originalData, yMin = null, yMax = null, width = 300, height = 300 ) { 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 featureValues = originalData.map((x) => ([x[featureName], x["target"]])); const frequencyCount = featureValues.reduce((acc, item) => { if (!acc[item]) { acc[item] = 1; } else { acc[item] += 1; } return acc; }, {}); const featureValueFrequency = Object.keys(frequencyCount).map(key => ( { [`${featureName}`]: key.split(",")[0], ["density"]: (frequencyCount[key] / featureValues.length).toFixed(5), ["target"]: key.split(",")[1] })); // 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 colorEnd = getColor(classIndex); const colorStart = getAlternateColor(originalData, classIndex); // const colorMidpoint = (colorMin + colorMax) / 2; const colorMidpoint = 0; const barPlot = vl .markBar() // Make a bar chart .data(plotData) // Using the provided data .params(vl.selectInterval().bind('scales')) // bind interval selection to scale domains .transform( vl.calculate("datum.x").as(`${featureName}`), vl.calculate("datum.y").as("Output") ) .encode( vl.color().value("black"), vl.x().fieldN(`${featureName}`).title(featureName).axis(null), vl .y() .fieldQ("Output") .title("Output") .scale({ domain: [yMin, yMax] }) .axis({labelOverlap:"greedy"}), // For y, use the y field and set the scale vl.tooltip([`${featureName}`, {field:"Output", format:".2f"}]) // For tooltips, show the class field ) .height(height * (2/3)) .width(width); const zeroLine = vl .markRule({ strokeDash: [5, 5] }) // Make a dashed line .data([{ y: 0 }]) // At y=0 .encode(vl.y().fieldQ("y")); const barPlotZeroLine = vl .layer(barPlot, zeroLine) .title({ text: `${featureName} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap) }) .height(height) const histogram = vl .markBar() .params(vl.selectInterval().bind('scales')) // bind interval selection to scale domains .data(featureValueFrequency) .encode( vl.x().fieldN(`${featureName}`).axis({labelOverlap:"greedy"}), vl.y().fieldQ("density").title("density").scale({ reverse: true }), vl.tooltip([`${featureName}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .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, classIndexMap))) ) }) ) .height(height * (1/3)) .width(width); return vl .vconcat(barPlotZeroLine, histogram) .spacing(0) .render() }3a:T12f9,function createHeatmap( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = 300, height = 300 ) { 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; const resolution1 = featureMaps["2D"][featureMapKey].data.length; const resolution2 = featureMaps["2D"][featureMapKey].data[0].length; const binFeature1 = originalData.map((x) => (x[feature_1])); const binFeature1Min = Math.min(...binFeature1); const binFeature1Max = Math.max(...binFeature1); const binFeature1Step = (binFeature1Max - binFeature1Min) / (resolution1 - 1); const binFeature2 = originalData.map((x) => (x[feature_2])); const binFeature2Min = Math.min(...binFeature2); const binFeature2Max = Math.max(...binFeature2); const binFeature2Step = (binFeature2Max - binFeature2Min) / (resolution2 - 1); 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 renamedData = data.map(entry => ({ [`${featureName1}`]: entry.rowIndex, [`${featureName2}`]: entry.columnIndex, Output: entry.value })); const heatmap = vl .markRect() .data(renamedData) .encode( vl .x() .fieldQ(`${featureName1}`) .bin({extent:[binFeature1Min, binFeature1Max], step: binFeature1Step}) .title(featureName1) .axis({labelOverlap:"greedy"}), vl .y() .fieldQ(`${featureName2}`) .bin({extent:[binFeature2Min, binFeature2Max], step: binFeature2Step}) .title(featureName2) .scale({ reverse: false }) .axis({labelOverlap:"greedy"}), vl .color() .fieldQ("Output") .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 }), vl.tooltip([{field:`${featureName1}`, format:".2f"}, {field:`${featureName2}`, format:".2f"}, {field:"Output", format:".2f"}]) ); let useTarget = target_names[classIndex] if (Number.isInteger(target_names[0])) { useTarget = target_names.sort((a, b) => a - b)[classIndex] } const allClasses = target_names.map((x) => (x)) const selectClass = vl.selectPoint("Select") .fields("target") .init({target: useTarget}) .bind(vl.menu([...target_names, allClasses])); const scatterplot = vl .markPoint() .data(originalData) .params( vl.selectInterval().bind('scales'), // bind interval selection to scale domains selectClass, opacityOfClasses ) .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, classIndexMap))) ) }) .legend(null), vl.opacity().if(selectClass, vl.value(1)).value(opacityOfClasses), vl.tooltip([{field:`${featureName1}`, format:".2f"}, {field:`${featureName2}`, format:".2f"}, {field:"target"}]) ); return vl .layer(heatmap, scatterplot) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed( 2 )}`, color: getColor(classIndex, classIndexMap) }) .height(height) .width(width) .render(); }3b:T18e7,function createHeatmapOrdinal1( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = 300, height = 300 ) { 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; const featureValues1 = originalData.map((x) => ([x[featureName1], x["target"]])); const frequencyCount1 = featureValues1.reduce((acc, item) => { if (!acc[item]) { acc[item] = 1; } else { acc[item] += 1; } return acc; }, {}); const density1 = Object.keys(frequencyCount1).map(key => ( { [`${featureName1}`]: key.split(",")[0], ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5), ["target"]: key.split(",")[1] })); function calculateDensity(data, resolution) { if(data.length === 0) return null; let values = data.map(arr => arr[0]); let min = Math.min(...values); let max = Math.max(...values); let binWidth = (max - min) / resolution; let totalElements = data.length; let binData = Array.from({ length: resolution }, (_, index) => { return { binStart: min + binWidth * index, binEnd: min + binWidth * (index + 1), totalCount: 0, classCounts: {} }; }); data.forEach(([value, className]) => { let binIndex = Math.min(Math.floor((value - min) / binWidth), resolution - 1); binData[binIndex].totalCount++; binData[binIndex].classCounts[className] = (binData[binIndex].classCounts[className] || 0) + 1; }); let result = []; binData.forEach(bin => { for (let className in bin.classCounts) { result.push({ binStart: bin.binStart, binEnd: bin.binEnd, density: (bin.classCounts[className] / totalElements).toFixed(5), target: className }); } }); return result; } const featureValues2 = originalData.map((x) => ([x[featureName2], x["target"]])); const resolution2 = featureMaps["2D"][featureMapKey].data[0].length; const binFeature2 = originalData.map((x) => (x[feature_2])); const binFeature2Min = Math.min(...binFeature2); const binFeature2Max = Math.max(...binFeature2); const binFeature2Step = (binFeature2Max - binFeature2Min) / (resolution2 - 1); const density2 = calculateDensity(featureValues2, resolution2); if (colorMin === null || colorMax === null) { const values = data.map((d) => d.value); colorMin = Math.min(...values); colorMax = Math.max(...values); } const colorEnd = getColor(classIndex, classIndexMap); const colorStart = getAlternateColor(originalData, classIndex); // const colorMidpoint = (colorMin + colorMax) / 2; const colorMidpoint = Math.max(0, colorMin); const heatmap = vl .markBar() .data(data) .transform( vl.calculate("datum.columnIndex").as(`${featureName2}`), vl.calculate("datum.rowIndex").as(`${featureName1}`), vl.calculate("datum.value").as("Output") ) .encode( vl .x().fieldQ(`${featureName2}`).bin({extent:[binFeature2Min, binFeature2Max], step: binFeature2Step}) .title(featureName2).axis(null), vl .y() .fieldO(`${featureName1}`) .title(featureName1) .scale({ reverse: false }) .axis({labelOverlap:"greedy"}), vl .color() .fieldQ("Output") .title("Output") .scale({ domain: [colorMin, colorMidpoint, colorMax], range: [colorStart, "white", colorEnd] }) .legend({ gradientLength: height * 0.5, // Adjust the length of the gradient bar gradientThickness: 10, // Adjust the thickness of the gradient bar orient: "left" }), vl .tooltip([{field:`${featureName2}`, format:".2f"}, `${featureName1}`, {field: "Output", format:".2f"}]) ) .height(height * (4/5)) .width(width * (4/5)); const histogram1 = vl .markBar() .data(density1) // ordinal - nominal .encode( vl.x().fieldQ("density").title("density").axis({orient: "top", labelOverlap:"greedy"}).scale({ reverse: false}), vl.y().fieldN(`${featureName1}`).axis(null), vl.tooltip([`${featureName1}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .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, classIndexMap)))) }) ) .height(height * (4/5)) .width(width * (1/5)); const histogram2 = vl .markBar() .data(density2) // continuous .transform( vl.calculate("datum.binStart").as(`${featureName2}`), ) .encode( vl.x().fieldQ(`${featureName2}`).title(`${featureName2}`) .bin({extent:[binFeature2Min, binFeature2Max], step: binFeature2Step}) .axis({labelOverlap:"greedy"}), vl.y().fieldQ("density").scale({ reverse: true }).axis({labelOverlap:"greedy"}), vl.tooltip([{field:`${featureName2}`, format:".2f"}, "density", "target"]), vl.color() .fieldN("target") .title("target") .legend(null) .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, classIndexMap)))) }) ) .height(height * (1/5)) .width(width * (4/5)); const barHeatmapHorizontal = vl .hconcat(heatmap, histogram1) .spacing(0); const barHeatmapVertiAndHori = vl .vconcat(barHeatmapHorizontal, histogram2) .params(vl.selectInterval().bind('scales')) // bind interval selection to scale domains .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), titleAnchor: "middle" }) .spacing(0) .render() return barHeatmapVertiAndHori; }3c:T18af,function createHeatmapOrdinal2( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = 300, height = 300 ) { 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; const featureValues2 = originalData.map((x) => ([x[featureName2], x["target"]])); const frequencyCount2 = featureValues2.reduce((acc, item) => { if (!acc[item]) { acc[item] = 1; } else { acc[item] += 1; } return acc; }, {}); const density2 = Object.keys(frequencyCount2).map(key => ( { [`${featureName2}`]: key.split(",")[0], ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5), ["target"]: key.split(",")[1] })); function calculateDensity(data, resolution) { if(data.length === 0) return null; let values = data.map(arr => arr[0]); let min = Math.min(...values); let max = Math.max(...values); let binWidth = (max - min) / resolution; let totalElements = data.length; let binData = Array.from({ length: resolution}, (_, index) => { return { binStart: min + binWidth * index, binEnd: min + binWidth * (index + 1), totalCount: 0, classCounts: {} }; }); data.forEach(([value, className]) => { let binIndex = Math.min(Math.floor((value - min) / binWidth), resolution - 1); binData[binIndex].totalCount++; binData[binIndex].classCounts[className] = (binData[binIndex].classCounts[className] || 0) + 1; }); let result = []; binData.forEach(bin => { for (let className in bin.classCounts) { result.push({ binStart: bin.binStart, binEnd: bin.binEnd, density: (bin.classCounts[className] / totalElements).toFixed(5), target: className }); } }); return result; } const featureValues1 = originalData.map((x) => ([x[featureName1], x["target"]])); const resolution1 = featureMaps["2D"][featureMapKey].data.length; const binFeature1 = originalData.map((x) => (x[feature_1])); const binFeature1Min = Math.min(...binFeature1); const binFeature1Max = Math.max(...binFeature1); const binFeature1Step = (binFeature1Max - binFeature1Min) / (resolution1 - 1); const density1 = calculateDensity(featureValues1, resolution1); if (colorMin === null || colorMax === null) { const values = data.map((d) => d.value); colorMin = Math.min(...values); colorMax = Math.max(...values); } const colorEnd = getColor(classIndex, classIndexMap); const colorStart = getAlternateColor(originalData, classIndex); const colorMidpoint = Math.max(0, colorMin); const heatmap = vl .markBar() .data(data) .transform( vl.calculate("datum.columnIndex").as(`${featureName2}`), vl.calculate("datum.rowIndex").as(`${featureName1}`), vl.calculate("datum.value").as("Output") ) .encode( vl .x() .fieldQ(`${featureName1}`) .title(featureName1) .bin({extent:[binFeature1Min, binFeature1Max], step: binFeature1Step}) .axis(null), vl .y() .fieldO(`${featureName2}`) .title(featureName2) .scale({ reverse: false }) .axis({labelOverlap:"greedy"}), vl .color() .fieldQ("Output") .title("Output") .scale({ domain: [colorMin, colorMidpoint, colorMax], range: [colorStart, "white", colorEnd] }) .legend({ gradientLength: height * 0.5, // Adjust the length of the gradient bar gradientThickness: 10, // Adjust the thickness of the gradient bar orient: "left" }), vl .tooltip([{field:`${featureName1}`, format:".2f"}, `${featureName2}`, {field:"Output", format:".2f"}]) ) .height(height * (4/5)) .width(width * (4/5)); const histogram1 = vl .markBar() .data(density2) // ordinal - nominal .encode( vl.x().fieldQ("density").title("density").axis({orient:"top", labelOverlap:"greedy"}).scale({ reverse: false}), vl.y().fieldN(`${featureName2}`).axis(null), vl.tooltip([`${featureName2}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .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, classIndexMap)))) }) ) .height(height * (4/5)) .width(width * (1/5)); const histogram2 = vl .markBar() .data(density1) // continuous .transform( vl.calculate("datum.binStart").as(`${featureName1}`) ) .encode( vl.x().fieldQ(`${featureName1}`).title(`${featureName1}`) .bin({extent:[binFeature1Min, binFeature1Max], step: binFeature1Step}) .axis({labelOverlap:"greedy"}), vl.y().fieldQ("density").scale({ reverse: true }).axis({labelOverlap:"greedy"}), vl.tooltip([`${featureName1}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .legend(null) .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, classIndexMap)))) }) ) .height(height * (1/5)) .width(width * (4/5)); const barHeatmapHorizontal = vl .hconcat(heatmap, histogram1) .spacing(0); const barHeatmapVertiAndHori = vl .vconcat(barHeatmapHorizontal, histogram2) .params(vl.selectInterval().bind('scales')) // bind interval selection to scale domains .spacing(0) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), titleAnchor: "middle" }) .render() return barHeatmapVertiAndHori; }3d:T146c,function createHeatmapNominal( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = 300, height = 300 ) { 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; const featureValues1 = originalData.map((x) => ([x[featureName1], x["target"]])); const frequencyCount1 = featureValues1.reduce((acc, item) => { if (!acc[item]) { acc[item] = 1; } else { acc[item] += 1; } return acc; }, {}); const density1 = Object.keys(frequencyCount1).map(key => ( { [`${featureName1}`]: key.split(",")[0], ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5), ["target"]: key.split(",")[1] })); const featureValues2 = originalData.map((x) => ([x[featureName2], x["target"]])); const frequencyCount2 = featureValues2.reduce((acc, item) => { if (!acc[item]) { acc[item] = 1; } else { acc[item] += 1; } return acc; }, {}); const density2 = Object.keys(frequencyCount2).map(key => ( { [`${featureName2}`]: key.split(",")[0], ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5), ["target"]: key.split(",")[1] })); if (colorMin === null || colorMax === null) { const values = data.map((d) => d.value); colorMin = Math.min(...values); colorMax = Math.max(...values); } const colorEnd = getColor(classIndex); const colorStart = getAlternateColor(originalData, classIndex); const colorMidpoint = Math.max(0, colorMin); const resolution1 = featureMaps["2D"][featureMapKey].data.length; const resolution2 = featureMaps["2D"][featureMapKey].data[0].length; const size = ((height * (4/5) * 6) / Math.max(resolution1, resolution2)) const heatmap = vl .markCircle() .data(data) .transform( vl.calculate("datum.columnIndex").as(`${featureName2}`), vl.calculate("datum.rowIndex").as(`${featureName1}`), vl.calculate("datum.value").as("Output") ) .encode( vl .x() .fieldN(`${featureName1}`) .title(featureName1) .axis({grid:true, labels:false, title:null, ticks:false}), vl .y() .fieldN(`${featureName2}`) .title(featureName2) .scale({ reverse: false }) .axis({labelOverlap:"greedy", grid:true}), vl .color() .fieldQ("Output") .title("Output") .scale({ domain: [colorMin, colorMidpoint, colorMax], range: [colorStart, "white", colorEnd] }) .legend({ gradientLength: height * 0.5, // Adjust the length of the gradient bar gradientThickness: 10, // Adjust the thickness of the gradient bar orient: "left" }), vl.tooltip([`${featureName1}`, `${featureName2}`, {field:"Output", format:".2f"}]), vl.size().value(size), ) .height(height * (4/5)) .width(width * (4/5)); const histogram1 = vl .markBar() .data(density2) // ordinal - nominal .encode( vl.x().fieldQ("density").title("density").axis({orient: "top", labelOverlap:"greedy"}).scale({ reverse: false}), vl.y().fieldN(`${featureName2}`).axis(null), vl.tooltip([`${featureName2}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .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, classIndexMap)))) }) ) .height(height * (4/5)) .width(width * (1/5)); const histogram2 = vl .markBar() .data(density1) // ordinal - nominal .encode( vl.x().fieldN(`${featureName1}`).axis({labelAngle:-90, labelOverlap:"greedy"}), vl.y().fieldQ("density").title("density").scale({ reverse: true }).axis({labelOverlap:"greedy"}), vl.tooltip([`${featureName1}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .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, classIndexMap)))) }) .legend(null) ) .height(height * (1/5)) .width(width * (4/5)); const barHeatmapHorizontal = vl .hconcat(heatmap, histogram1) .spacing(0); const barHeatmapVertiAndHori = vl .vconcat(barHeatmapHorizontal, histogram2) .params(vl.selectInterval().bind('scales')) // bind interval selection to scale domains .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), }) .spacing(0) .render(); return barHeatmapVertiAndHori; }3e:[{"id":"96e35c1b3213d472936d546cdee35a314fa8257251193ced13d722ee16023ad24b318a0500b46c330bf3164b97bcd7ecb61177f304722c657c72e75aae1533c2","href":"https://static.observableusercontent.com/files/96e35c1b3213d472936d546cdee35a314fa8257251193ced13d722ee16023ad24b318a0500b46c330bf3164b97bcd7ecb61177f304722c657c72e75aae1533c2","name":"penguins_0.csv","type":"text/csv","lastModified":1694594934826.547,"size":14779},{"id":"f7bd5aac575c32407cf2057d496309ee613d0e93094f33b78f4e808eb69c622a4100ab1a068a773e326520c065ff0e6de475b991c7a5412aa885cd7e43d5d252","href":"https://static.observableusercontent.com/files/f7bd5aac575c32407cf2057d496309ee613d0e93094f33b78f4e808eb69c622a4100ab1a068a773e326520c065ff0e6de475b991c7a5412aa885cd7e43d5d252","name":"penguins_0_feature_maps_permutation.json","type":"application/json","lastModified":1694594934826.547,"size":880917},{"id":"175f22bf9c68d2867c6ce1d2507aa05ce133b4a47f93ece8991cf7002884b45680a4d076f2d6855d5c25bb73ddbb919f9c2c25bb4923057487bd67e89a7316e9","href":"https://static.observableusercontent.com/files/175f22bf9c68d2867c6ce1d2507aa05ce133b4a47f93ece8991cf7002884b45680a4d076f2d6855d5c25bb73ddbb919f9c2c25bb4923057487bd67e89a7316e9","name":"penguins_0_feature_maps_ranges.json","type":"application/json","lastModified":1694594934826.547,"size":882429},{"id":"ce5b249a88cc70cce52d493fcdbe580a95997c4c4a60c65b06a1193556b30af8cfb78766f9c353d819e52687c7491c69c8fa55f96333da26b16bb646e9a1c4be","href":"https://static.observableusercontent.com/files/ce5b249a88cc70cce52d493fcdbe580a95997c4c4a60c65b06a1193556b30af8cfb78766f9c353d819e52687c7491c69c8fa55f96333da26b16bb646e9a1c4be","name":"housing_0.csv","type":"text/csv","lastModified":1694594934826.547,"size":1740227},{"id":"5e9e69481eddafe34ab7f7926e5b654fdf206373e2c5a96e8c0a0687b4ef79960562096721bc825fdf6587b23374d35c3e8c03ecb7c340d192b75f1600074563","href":"https://static.observableusercontent.com/files/5e9e69481eddafe34ab7f7926e5b654fdf206373e2c5a96e8c0a0687b4ef79960562096721bc825fdf6587b23374d35c3e8c03ecb7c340d192b75f1600074563","name":"housing_0_feature_maps_permutation.json","type":"application/json","lastModified":1694594934826.547,"size":1559085},{"id":"8c84648023be5a76299fcfc7b5978b11e90ee2f6e884d7d8145564e804eb5783cc58cf194510d650e4edd0469b0873fd798452fc84839535ce2a90f776009419","href":"https://static.observableusercontent.com/files/8c84648023be5a76299fcfc7b5978b11e90ee2f6e884d7d8145564e804eb5783cc58cf194510d650e4edd0469b0873fd798452fc84839535ce2a90f776009419","name":"housing_0_feature_maps_ranges.json","type":"application/json","lastModified":1694594934826.547,"size":1559515},{"id":"af07bd93c5a5af7cd1207259179c3ae4567b575602efec9fa9ec158c80186316041a2c861c1681dcce53900a7f0fade3b2508c447cf9157e86e7a75e9d2201e9","href":"https://static.observableusercontent.com/files/af07bd93c5a5af7cd1207259179c3ae4567b575602efec9fa9ec158c80186316041a2c861c1681dcce53900a7f0fade3b2508c447cf9157e86e7a75e9d2201e9","name":"wine_output.csv","type":"text/csv","lastModified":1694594934826.547,"size":12629},{"id":"62fd8a9599ecb0c77478fc7bd4bbe19e72ed28ca37873c73c28aa4fc265fe557c289a274a5279ef0abbef1b923bbcb77d455268f91bac8846fe2c2f2a6246940","href":"https://static.observableusercontent.com/files/62fd8a9599ecb0c77478fc7bd4bbe19e72ed28ca37873c73c28aa4fc265fe557c289a274a5279ef0abbef1b923bbcb77d455268f91bac8846fe2c2f2a6246940","name":"wine_data_feature_maps_permutation@2.json","type":"application/json","lastModified":1694594934826.547,"size":634744},{"id":"07488593f351506817339d4c4997277e7eb6776f7bb0fbb2bc2d4365dc5ac9548b019162224aa7d7a52103cfa95a74c8ebb3c2b885227faecd6cd6bc7c6cb8fb","href":"https://static.observableusercontent.com/files/07488593f351506817339d4c4997277e7eb6776f7bb0fbb2bc2d4365dc5ac9548b019162224aa7d7a52103cfa95a74c8ebb3c2b885227faecd6cd6bc7c6cb8fb","name":"Adult_dataset_with_predictions@2.csv","type":"text/csv","lastModified":1694594934826.547,"size":3472689},{"id":"25d675060f7bb41e96494d170c2a286e81b4c50ce502c81f19829b4411aa73f38ece8900a78823e903d1c3b6f547afb9818dbd2dd2ae56ea47600c0ad01244e8","href":"https://static.observableusercontent.com/files/25d675060f7bb41e96494d170c2a286e81b4c50ce502c81f19829b4411aa73f38ece8900a78823e903d1c3b6f547afb9818dbd2dd2ae56ea47600c0ad01244e8","name":"adult_feature_maps_zero_one_out@3.json","type":"application/json","lastModified":1694594934826.547,"size":673197}] 2d:{"title":"Feature Interactions with AnimationFrame","cells":[{"id":0,"value":"# Feature Interactions with 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 \"Wine Data, Importance: Permutation Feature Importance\",\n \"California Housing, Importance: Permutation Feature Importance\",\n \"California Housing, Importance: Output Range\",\n \"Adult, Importance: Zero One Out\"\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, classIndexMap), // use color map to set point color\n r: 3\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"viewof opacityOfClasses = slider('Opacity of not selected classes:', 0.2, 0, 1, 0.01)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"plotsContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2584,"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 \"Wine Data, Importance: Permutation Feature Importance\":\n await FileAttachment(\"wine_output.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 \"Adult, Importance: Zero One Out\":\n await FileAttachment(\"Adult_dataset_with_predictions@2.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 \"Wine Data, Importance: Permutation Feature Importance\": processFeatureMaps(\n await FileAttachment(\"wine_data_feature_maps_permutation@2.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 \"Adult, Importance: Zero One Out\": processFeatureMaps(\n await FileAttachment(\"adult_feature_maps_zero_one_out@3.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":1614,"value":"target_names = [...new Set(data.map((d) => d.target))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"features_len = Object.keys(data[0]).length - 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"type_summary = summary_data.map(function(item) {\n return item.type;\n}).slice(0, features_len);","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 resolution1 = data2D.length;\n const resolution2 = data2D[0].length;\n const c = featureMap.class;\n\n const scaledRowValues = getScaledValues(data, feature_1, resolution1);\n const scaledColumnValues = getScaledValues(data, feature_2, resolution2);\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":false,"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":1007,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$3d","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-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2714,"value":"## Slider","pinned":false,"hidden":false,"mode":"md"},{"id":2677,"value":"// Generate a form element that wraps one or more inputs\nform = function(value, ...nodes) {\n const form = document.createElement('form');\n form.addEventListener('submit', event => event.preventDefault());\n nodes.forEach(node => form.appendChild(node));\n return Object.defineProperty(form, 'value', value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2675,"value":"// Generate a text label\nlabel = function(title) {\n const label = document.createElement('label');\n label.style.display = 'inline-block';\n label.style.width = '250px';\n label.innerText = title;\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"// Generate a slider with provided label title and slider parameters\nslider = function(title, value, min, max, step) {\n const slider = document.createElement('input');\n slider.setAttribute('type', 'range');\n slider.setAttribute('min', min);\n slider.setAttribute('max', max);\n slider.setAttribute('step', step);\n slider.value = value;\n\n const valueLabel = document.createElement('label');\n valueLabel.style['margin-left'] = '0.5em';\n \n const update = () => valueLabel.innerText = slider.value;\n slider.addEventListener('input', update);\n update();\n \n return form(\n {\n get() { return +slider.value; },\n set(v) { slider.value = +v; update(); }\n },\n label(title), slider, valueLabel\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2765,"value":"## Ease the strain on the browser","pinned":false,"hidden":false,"mode":"md"},{"id":2768,"value":"function nextFrame() {\n return new Promise(resolve => requestAnimationFrame(resolve));\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}