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:T464,featureMapFiles = { return { "Penguins, Importance: Output Range": processFeatureMaps( await FileAttachment("penguins_0_feature_maps_ranges.json").json() ), "Penguins, Importance: Permutation Feature Importance": processFeatureMaps( await FileAttachment("penguins_0_feature_maps_permutation.json").json() ), "Wine Data, Importance: Permutation Feature Importance": processFeatureMaps( await FileAttachment("wine_data_feature_maps_permutation@2.json").json() ), "California Housing, Importance: Output Range": processFeatureMaps( await FileAttachment("housing_0_feature_maps_ranges.json").json() ), "California Housing, Importance: Permutation Feature Importance": processFeatureMaps( await FileAttachment("housing_0_feature_maps_permutation.json").json() ), "Adult, Importance: Zero One Out": processFeatureMaps( await FileAttachment("adult_feature_maps_zero_one_out@6.json").json() ), "Titanic, Importance: Zero One Out": processFeatureMaps( await FileAttachment("titanic_feature_maps_zero_one_out@5.json").json() ), }; }32: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; }33: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; }34: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); } }35: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; }36:T489,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; }37:T82c,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 }; }38: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); } } }39: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 plot = dimension === "1D" && featureMaps["1D"][key].feature_type === "continuous" ? await createLinePlot( featureMaps, key, originalData, minMaxPerClass["1D"][className].min, minMaxPerClass["1D"][className].max ) : dimension === "1D" && (featureMaps["1D"][key].feature_type === "ordinal" || featureMaps["1D"][key].feature_type === "nominal") ? await createBarPlot( featureMaps, key, originalData, minMaxPerClass["1D"][className].min, minMaxPerClass["1D"][className].max ) : dimension === "2D" && featureMaps["2D"][key].feature_1_type === "continuous" && featureMaps["2D"][key].feature_2_type === "continuous" ? await createHeatmap( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ) : dimension === "2D" && (featureMaps["2D"][key].feature_1_type === "ordinal" || featureMaps["2D"][key].feature_1_type === "nominal") && featureMaps["2D"][key].feature_2_type === "continuous" ? await createHeatmapOrdinal1( originalData, featureMaps, key, minMaxPerClass["2D"][className].min, minMaxPerClass["2D"][className].max ) : dimension === "2D" && featureMaps["2D"][key].feature_1_type === "continuous" && (featureMaps["2D"][key].feature_2_type === "ordinal" || featureMaps["2D"][key].feature_2_type === "nominal") ? 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; yield precomputedPlots; } } mutable isLoading = false }3a:Td6e,function createLinePlot( featureMaps, featureMapKey, originalData, yMin = null, yMax = null, width = plotWidth, height = plotHeight ) { 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 featureValues = originalData.map((x) => ([x[featureName], x["target"]])); const resolution = featureMaps["1D"][featureMapKey].data.length; const binFeature = originalData.map((x) => (x[featureName])); const binFeatureMin = Math.min(...binFeature); const binFeatureMax = Math.max(...binFeature); const binFeatureStep = (binFeatureMax - binFeatureMin) / (resolution - 1); const density = calculateDensity(featureValues, resolution); const linePlot = vl .markLine() // Make a line chart .data(plotData) // Using the provided data .params(vl.selectInterval().bind('scales').encodings("y")) // 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(null), // For x, use the x field and set the title vl .y() .fieldQ("Output") .title("Output") .scale({ domain: [yMin, yMax] }) .axis({labelOverlap:"greedy"}), vl.tooltip([{field:`${featureName}`, format:".2f"}, {field:"Output", format:".2f"}]) ); const zeroLine = vl .markRule({ strokeDash: [5, 5] }) // Make a dashed line .data([{ y: 0 }]) // At y=0 .encode(vl.y().fieldQ("y")); const layeredPlot = vl .layer(linePlot, zeroLine) .title({text: `${featureName} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap)}) .height(height * (4/5)) .width(width); const histogram = vl .markBar() .data(density) // continuous .params(vl.selectInterval().bind('scales').encodings("y")) // bind interval selection to scale domains .transform( vl.calculate("datum.binStart").as(`${featureName}`) ) .encode( vl.x().fieldQ(`${featureName}`).title(`${featureName}`) .bin({extent:[binFeatureMin, binFeatureMax], step: binFeatureStep}) .axis({labelOverlap:"greedy"}), vl.y().fieldQ("density").scale({ reverse: true }).axis({labelOverlap:"greedy"}), vl.tooltip([`${featureName}`, "density", "target"]), vl.color() .fieldN("target") .title("target") .legend(null) .scale({ range: Array.from(new Set(originalData.map((d) => getColor(d.target, classIndexMap)))) }) ) .height(height * (1/5)) .width(width); const linePlotAndDensity = vl .vconcat(layeredPlot, histogram) .spacing(0) .render(); return linePlotAndDensity; }3b:Te8c,function createBarPlot( featureMaps, featureMapKey, originalData, yMin = null, yMax = null, width = plotWidth, height = plotHeight ) { const { plotData, histogramData } = preprocess1DData( featureMaps, featureMapKey, originalData ); const featureName = featureMaps["1D"][featureMapKey].feature; const featureType = featureMaps["1D"][featureMapKey].feature_type; 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; }, {}); let density = Object.keys(frequencyCount).map(key => ( { [`${featureName}`]: key.split(",")[0], ["density"]: (frequencyCount[key] / featureValues.length).toFixed(5), ["target"]: key.split(",")[1] })); if (featureType === "ordinal" && allTrue(Object.keys(frequencyCount).map(key => (canCastToInt(key.split(",")[0]))))) { density = Object.keys(frequencyCount).map(key => ( { [`${featureName}`]: parseFloat(key.split(",")[0]), ["density"]: (frequencyCount[key] / featureValues.length).toFixed(5), ["target"]: key.split(",")[1] })).sort((a, b) => a[`${featureName}`] - b[`${featureName}`]); } // 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').encodings("y")) // 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 * (2/3)) const histogram = vl .markBar() .data(density) .params(vl.selectInterval().bind('scales').encodings("y")) // bind interval selection to scale domains .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({ 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() }3c:T16e6,function createHeatmap( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = plotWidth, height = plotHeight ) { 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); const featureValues1 = originalData.map((x) => ([x[featureName1], x["target"]])); const density1 = calculateDensity(featureValues1, resolution1); const featureValues2 = originalData.map((x) => ([x[featureName2], x["target"]])); 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 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(null), 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.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"}, {field:`${featureName2}`, format:".2f"}, {field:"Output", format:".2f"}]) ) .height(height * (4/5)) .width(width * (4/5)); const histogram1 = vl .markBar() .data(density2) // ordinal - nominal .params(vl.selectInterval().bind('scales').encodings("x")) // bind interval selection to scale domains .transform( vl.calculate("datum.binStart").as(`${featureName2}`), ) .encode( vl.x().fieldQ("density").title("density").axis({orient:"top", labelOverlap:"greedy"}).scale({ reverse: false}), vl.y().fieldQ(`${featureName2}`).bin({extent:[binFeature2Min, binFeature2Max], step: binFeature2Step}).axis(null), vl.tooltip([{field:`${featureName2}`, format:".2f"}, "density", "target"]), vl.color() .fieldN("target") .title("target") .scale({ 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 .params(vl.selectInterval().bind('scales').encodings("y")) // bind interval selection to scale domains .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([{field:`${featureName1}`, format:".2f"}, "density", "target"]), vl.color() .fieldN("target") .title("target") .legend(null) .scale({ range: Array.from(new Set(originalData.map((d) => getColor(d.target, classIndexMap)))) }) ) .height(height * (1/5)) .width(width * (4/5)); const HeatmapHorizontal = vl .hconcat(heatmap, histogram1) .spacing(0); const HeatmapVertiAndHori = vl .vconcat(HeatmapHorizontal, histogram2) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), titleAnchor: "middle" }) .spacing(0) .render() return HeatmapVertiAndHori; }3d:T16a2,function createHeatmapOrdinal1( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = plotWidth, height = plotHeight ) { 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 feature_1_Type = featureMaps["2D"][featureMapKey].feature_1_type; const feature_2_Type = featureMaps["2D"][featureMapKey].feature_2_type; 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; }, {}); let density1 = Object.keys(frequencyCount1).map(key => ( {[`${featureName1}`]: key.split(",")[0], ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5), ["target"]: key.split(",")[1] })); if (feature_1_Type === "ordinal" && allTrue(Object.keys(frequencyCount1).map(key => (canCastToInt(key.split(",")[0]))))) { density1 = Object.keys(frequencyCount1).map(key => ( {[`${featureName1}`]: parseFloat(key.split(",")[0]), ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5), ["target"]: key.split(",")[1] })).sort((a, b) => a[`${featureName1}`] - b[`${featureName1}`]); } 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) .params(vl.selectInterval().bind('scales').encodings("x")) // bind interval selection to scale domains .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() .fieldN(`${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 .params(vl.selectInterval().bind('scales').encodings("x")) // bind interval selection to scale domains .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({ 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 .params(vl.selectInterval().bind('scales').encodings("y")) // bind interval selection to scale domains .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({ 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) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), titleAnchor: "middle" }) .spacing(0) .render() return barHeatmapVertiAndHori; }3e:T1672,function createHeatmapOrdinal2( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = plotWidth, height = plotHeight ) { 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 feature_1_Type = featureMaps["2D"][featureMapKey].feature_1_type; const feature_2_Type = featureMaps["2D"][featureMapKey].feature_2_type; 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; }, {}); let density2 = Object.keys(frequencyCount2).map(key => ( {[`${featureName2}`]: key.split(",")[0], ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5), ["target"]: key.split(",")[1] })); if (feature_2_Type === "ordinal" && allTrue(Object.keys(frequencyCount2).map(key => (canCastToInt(key.split(",")[0]))))) { density2 = Object.keys(frequencyCount2).map(key => ( {[`${featureName2}`]: parseFloat(key.split(",")[0]), ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5), ["target"]: key.split(",")[1] })).sort((a, b) => a[`${featureName2}`] - b[`${featureName2}`]); } 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) .params(vl.selectInterval().bind('scales').encodings("x")) // bind interval selection to scale domains .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() .fieldN(`${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 .params(vl.selectInterval().bind('scales').encodings("x")) // bind interval selection to scale domains .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({ 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 .params(vl.selectInterval().bind('scales').encodings("y")) // bind interval selection to scale domains .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({ 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) .spacing(0) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), titleAnchor: "middle" }) .render() return barHeatmapVertiAndHori; }3f:T17cf,function createHeatmapNominal( originalData, featureMaps, featureMapKey, colorMin = null, colorMax = null, width = plotWidth, height = plotHeight ) { 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 feature_1_Type = featureMaps["2D"][featureMapKey].feature_1_type; const feature_2_Type = featureMaps["2D"][featureMapKey].feature_2_type; 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; }, {}); let density1 = Object.keys(frequencyCount1).map(key => ( {[`${featureName1}`]: key.split(",")[0], ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5), ["target"]: key.split(",")[1] })); if (feature_1_Type === "ordinal" && allTrue(Object.keys(frequencyCount1).map(key => (canCastToInt(key.split(",")[0]))))) { density1 = Object.keys(frequencyCount1).map(key => ( {[`${featureName1}`]: parseFloat(key.split(",")[0]), ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5), ["target"]: key.split(",")[1] })).sort((a, b) => a[`${featureName1}`] - b[`${featureName1}`]); } 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; }, {}); let density2 = Object.keys(frequencyCount2).map(key => ( {[`${featureName2}`]: key.split(",")[0], ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5), ["target"]: key.split(",")[1] })); if (feature_2_Type === "ordinal" && allTrue(Object.keys(frequencyCount2).map(key => (canCastToInt(key.split(",")[0]))))) { density2 = Object.keys(frequencyCount2).map(key => ( {[`${featureName2}`]: parseFloat(key.split(",")[0]), ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5), ["target"]: key.split(",")[1] })).sort((a, b) => a[`${featureName2}`] - b[`${featureName2}`]); } 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 .params(vl.selectInterval().bind('scales').encodings("x")) // bind interval selection to scale domains .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({ 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 .params(vl.selectInterval().bind('scales').encodings("y")) // bind interval selection to scale domains .encode( vl.x().fieldN(`${featureName1}`).axis({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({ 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) .title({ text: `${featureName1} & ${featureName2} for ${className}, Score: ${score.toFixed(2)}`, color: getColor(classIndex, classIndexMap), }) .spacing(0) .render(); return barHeatmapVertiAndHori; }40:[{"id":"96e35c1b3213d472936d546cdee35a314fa8257251193ced13d722ee16023ad24b318a0500b46c330bf3164b97bcd7ecb61177f304722c657c72e75aae1533c2","href":"https://static.observableusercontent.com/files/96e35c1b3213d472936d546cdee35a314fa8257251193ced13d722ee16023ad24b318a0500b46c330bf3164b97bcd7ecb61177f304722c657c72e75aae1533c2","name":"penguins_0.csv","type":"text/csv","lastModified":1694733951770.326,"size":14779},{"id":"f7bd5aac575c32407cf2057d496309ee613d0e93094f33b78f4e808eb69c622a4100ab1a068a773e326520c065ff0e6de475b991c7a5412aa885cd7e43d5d252","href":"https://static.observableusercontent.com/files/f7bd5aac575c32407cf2057d496309ee613d0e93094f33b78f4e808eb69c622a4100ab1a068a773e326520c065ff0e6de475b991c7a5412aa885cd7e43d5d252","name":"penguins_0_feature_maps_permutation.json","type":"application/json","lastModified":1694733951770.326,"size":880917},{"id":"175f22bf9c68d2867c6ce1d2507aa05ce133b4a47f93ece8991cf7002884b45680a4d076f2d6855d5c25bb73ddbb919f9c2c25bb4923057487bd67e89a7316e9","href":"https://static.observableusercontent.com/files/175f22bf9c68d2867c6ce1d2507aa05ce133b4a47f93ece8991cf7002884b45680a4d076f2d6855d5c25bb73ddbb919f9c2c25bb4923057487bd67e89a7316e9","name":"penguins_0_feature_maps_ranges.json","type":"application/json","lastModified":1694733951770.326,"size":882429},{"id":"ce5b249a88cc70cce52d493fcdbe580a95997c4c4a60c65b06a1193556b30af8cfb78766f9c353d819e52687c7491c69c8fa55f96333da26b16bb646e9a1c4be","href":"https://static.observableusercontent.com/files/ce5b249a88cc70cce52d493fcdbe580a95997c4c4a60c65b06a1193556b30af8cfb78766f9c353d819e52687c7491c69c8fa55f96333da26b16bb646e9a1c4be","name":"housing_0.csv","type":"text/csv","lastModified":1694733951770.326,"size":1740227},{"id":"5e9e69481eddafe34ab7f7926e5b654fdf206373e2c5a96e8c0a0687b4ef79960562096721bc825fdf6587b23374d35c3e8c03ecb7c340d192b75f1600074563","href":"https://static.observableusercontent.com/files/5e9e69481eddafe34ab7f7926e5b654fdf206373e2c5a96e8c0a0687b4ef79960562096721bc825fdf6587b23374d35c3e8c03ecb7c340d192b75f1600074563","name":"housing_0_feature_maps_permutation.json","type":"application/json","lastModified":1694733951770.326,"size":1559085},{"id":"8c84648023be5a76299fcfc7b5978b11e90ee2f6e884d7d8145564e804eb5783cc58cf194510d650e4edd0469b0873fd798452fc84839535ce2a90f776009419","href":"https://static.observableusercontent.com/files/8c84648023be5a76299fcfc7b5978b11e90ee2f6e884d7d8145564e804eb5783cc58cf194510d650e4edd0469b0873fd798452fc84839535ce2a90f776009419","name":"housing_0_feature_maps_ranges.json","type":"application/json","lastModified":1694733951770.326,"size":1559515},{"id":"af07bd93c5a5af7cd1207259179c3ae4567b575602efec9fa9ec158c80186316041a2c861c1681dcce53900a7f0fade3b2508c447cf9157e86e7a75e9d2201e9","href":"https://static.observableusercontent.com/files/af07bd93c5a5af7cd1207259179c3ae4567b575602efec9fa9ec158c80186316041a2c861c1681dcce53900a7f0fade3b2508c447cf9157e86e7a75e9d2201e9","name":"wine_output.csv","type":"text/csv","lastModified":1694733951770.326,"size":12629},{"id":"62fd8a9599ecb0c77478fc7bd4bbe19e72ed28ca37873c73c28aa4fc265fe557c289a274a5279ef0abbef1b923bbcb77d455268f91bac8846fe2c2f2a6246940","href":"https://static.observableusercontent.com/files/62fd8a9599ecb0c77478fc7bd4bbe19e72ed28ca37873c73c28aa4fc265fe557c289a274a5279ef0abbef1b923bbcb77d455268f91bac8846fe2c2f2a6246940","name":"wine_data_feature_maps_permutation@2.json","type":"application/json","lastModified":1694733951770.326,"size":634744},{"id":"07488593f351506817339d4c4997277e7eb6776f7bb0fbb2bc2d4365dc5ac9548b019162224aa7d7a52103cfa95a74c8ebb3c2b885227faecd6cd6bc7c6cb8fb","href":"https://static.observableusercontent.com/files/07488593f351506817339d4c4997277e7eb6776f7bb0fbb2bc2d4365dc5ac9548b019162224aa7d7a52103cfa95a74c8ebb3c2b885227faecd6cd6bc7c6cb8fb","name":"Adult_dataset_with_predictions@2.csv","type":"text/csv","lastModified":1694733951770.326,"size":3472689},{"id":"56a0c8e9256e0e3f0cc751e30ef29dcade760dc923ed7e68c5299738f71fd5bf2ebf8a87b65688b09c2e0b506769945e32525526e9fa7fc82368726f5cc2107b","href":"https://static.observableusercontent.com/files/56a0c8e9256e0e3f0cc751e30ef29dcade760dc923ed7e68c5299738f71fd5bf2ebf8a87b65688b09c2e0b506769945e32525526e9fa7fc82368726f5cc2107b","name":"Titanic_dataset_with_predictions.csv","type":"text/csv","lastModified":1694733951770.326,"size":23816},{"id":"f7a7a4fd19c71bbfce12e4656f630d99b97ef691a78c276d5aaa0d9148cd5dd9b9ebd5d6b826917f3352889f112b5652703ea9e0e8a4499b1fdf1e146c931d8e","href":"https://static.observableusercontent.com/files/f7a7a4fd19c71bbfce12e4656f630d99b97ef691a78c276d5aaa0d9148cd5dd9b9ebd5d6b826917f3352889f112b5652703ea9e0e8a4499b1fdf1e146c931d8e","name":"titanic_feature_maps_zero_one_out@5.json","type":"application/json","lastModified":1694733951770.326,"size":80657},{"id":"b270a62625f234cc823d73c78287375f84d493e94a588005875cefcde560a87b0f24c3a86100033bf206bb4bb8801e1572daf47497cebf4bf052786e2bba69dd","href":"https://static.observableusercontent.com/files/b270a62625f234cc823d73c78287375f84d493e94a588005875cefcde560a87b0f24c3a86100033bf206bb4bb8801e1572daf47497cebf4bf052786e2bba69dd","name":"adult_feature_maps_zero_one_out@6.json","type":"application/json","lastModified":1694733951770.326,"size":861551}] 2d:{"title":"GAM with 2nd order interactions (14.09.2023)","cells":[{"id":3034,"value":"# GAM with 2nd order interactions (14.09.2023)","pinned":false,"hidden":false,"mode":"md"},{"id":3468,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2975,"value":"## Parameters for cell and plot height, width","pinned":false,"hidden":false,"mode":"md"},{"id":2980,"value":"The `cellHeight` and `cellWidth` should be around 200 - 300px greater than the `plotHeight` and `plotWidth` to have enough space for legends, gradients and labels. The `plotContainerWidth` is represented as %, if the space is not big enough, simply increase all values and go into **Fullscreen**.\nTo go into **Fullscreen**, hit **F**, or click **View > View in Fullscreen** in the notebook menu above. To exit the **Fullscreen** mode, press the **ESC** key.","pinned":false,"hidden":false,"mode":"md"},{"id":3470,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2948,"value":"cellHeight = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":2957,"value":"cellWidth = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":2953,"value":"plotHeight = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":2955,"value":"plotWidth = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":3447,"value":"plotContainerWidth = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":3475,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"viewof fileSelection = {\n const inputs = Inputs.select(\n [\n \"Titanic, Importance: Zero One Out\",\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":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 \"Titanic, Importance: Zero One Out\":\n await FileAttachment(\"Titanic_dataset_with_predictions.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":"$31","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":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":3315,"value":"function canCastToInt(str) {\n return /^\\d+$/.test(str);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3332,"value":"function allTrue(arr) {\n return arr.every(value => value === true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"features_len = Object.keys(data[0]).length - 2","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":"$32","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":3055,"value":"function uniqueValues(arr) {\n return arr.filter((item, index) => arr.indexOf(item) === index);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"function getScaledValues1D(data, feature, resolution, featureMap, featureType) {\n const values = data.map(d => d[feature]);\n if (featureType === \"nominal\" || typeof values[0] === 'string' || values[0] instanceof String) {\n const featureValues = [... new Set(values)];\n const sortedValues = featureValues.map((x) => ({name: x, encoded_value: featureMap.feature_values_encoded[x][\"encoded_value\"]})).sort((a, b) => a.name.localeCompare(b.name));\n return sortedValues.map(x => x.name);\n }\n if(featureType === \"ordinal\") {\n const featureValues = [... new Set(values)];\n const sortedValues = featureValues.map((x) => ({name: x, encoded_value: featureMap.feature_values_encoded[x][\"encoded_value\"]})).sort((a, b) => a.encoded_value - b.encoded_value);\n return sortedValues.map(x => x.name);\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":3110,"value":"function getScaledValues2D_feature_1(data, feature, resolution, featureMap, featureType) {\n const values = data.map(d => d[feature]);\n if ( featureType === \"nominal\" || typeof values[0] === 'string' || values[0] instanceof String) {\n const featureValues = [... new Set(values)];\n const sortedValues = featureValues.map((x) => ({name: x, encoded_value: featureMap.feature_values_1_encoded[x][\"encoded_value\"]})).sort((a, b) => a.name.localeCompare(b.name));\n return sortedValues.map(x => x.name)\n }\n if(featureType === \"ordinal\") {\n const featureValues = [... new Set(values)];\n const sortedValues = featureValues.map((x) => ({name: x, encoded_value: featureMap.feature_values_1_encoded[x][\"encoded_value\"]})).sort((a, b) => a.encoded_value - b.encoded_value);\n return sortedValues.map(x => x.name);\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":3122,"value":"function getScaledValues2D_feature_2(data, feature, resolution, featureMap, featureType) {\n const values = data.map(d => d[feature]);\n if (featureType === \"nominal\" || typeof values[0] === 'string' || values[0] instanceof String) {\n const featureValues = [... new Set(values)];\n const sortedValues = featureValues.map((x) => ({name: x, encoded_value: featureMap.feature_values_2_encoded[x][\"encoded_value\"]})).sort((a, b) => a.name.localeCompare(b.name));\n return sortedValues.map(x => x.name)\n }\n if(featureType === \"ordinal\") {\n const featureValues = [... new Set(values)];\n const sortedValues = featureValues.map((x) => ({name: x, encoded_value: featureMap.feature_values_2_encoded[x][\"encoded_value\"]})).sort((a, b) => a.encoded_value - b.encoded_value);\n return sortedValues.map(x => x.name);\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 const featureType = featureMap.feature_type;\n\n const scaledXValues = getScaledValues1D(originalData, feature, dataToPlot.length, featureMap, featureType);\n \n const plotData = scaledXValues.map((x, index) => ({x: x, y: dataToPlot[index], class: featureMap.class}));\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 = featureMap.feature_1_resolution;\n const resolution2 = featureMap.feature_2_resolution;\n const c = featureMap.class;\n const feature_1_Type = featureMap.feature_1_type;\n const feature_2_Type = featureMap.feature_2_type;\n\n const scaledRowValues = getScaledValues2D_feature_1(data, feature_1, resolution1, featureMap, feature_1_Type);\n const scaledColumnValues = getScaledValues2D_feature_2(data, feature_2, resolution2, featureMap, feature_2_Type);\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":"$33","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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$35","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 // 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, classIndexMap)\n })),\n ...classData2D.map((d) => ({\n feature: `${d.feature_1} & ${d.feature_2}`,\n importance: d.importance,\n color: getColor(classIndex, classIndexMap)\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":2849,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"## Visualization Functions","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$3f","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"}],"files":"$W40","stdlib":"1","titling":"auto"}