2f:T465,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:T757,files = { return { "CensusIncome, Importance: Zero One Out": await FileAttachment("CensusIncome_dataset_with_predictions@1.csv").csv({ typed: true }), "CensusIncome, Importance: Permutation": await FileAttachment("CensusIncome_dataset_with_predictions@1.csv").csv({ typed: true }), "Titanic, Importance: Zero One Out": await FileAttachment("Titanic_dataset_with_predictions@1.csv").csv({ typed: true }), "Titanic, Importance: Permutation": await FileAttachment("Titanic_dataset_with_predictions@1.csv").csv({ typed: true }), "HeartDisease, Importance: Zero One Out": await FileAttachment("HeartDisease_dataset_with_predictions@6.csv").csv({ typed: true }), "HeartDisease, Importance: Permutation": await FileAttachment("HeartDisease_dataset_with_predictions@6.csv").csv({ typed: true }), "GermanCreditRisk, Importance: Zero One Out": await FileAttachment("GermanCreditRisk_dataset_with_predictions@8.csv").csv({ typed: true }), "GermanCreditRisk, Importance: Permutation": await FileAttachment("GermanCreditRisk_dataset_with_predictions@8.csv").csv({ typed: true }), "CaliforniaHousing, Importance: Permutation": await FileAttachment("CaliforniaHousing_dataset_with_predictions.csv").csv({ typed: true }), "CaliforniaHousing, Importance: Zero One Out": await FileAttachment("CaliforniaHousing_dataset_with_predictions.csv").csv({ typed: true }), "AmesHousing, Importance: Permutation": await FileAttachment("AmesHousing_dataset_with_predictions@1.csv").csv({ typed: true }), "AmesHousing, Importance: Zero One Out": await FileAttachment("AmesHousing_dataset_with_predictions@1.csv").csv({ typed: true }), "CreditCardFraud, Importance: Zero One Out": await CreditCardZip.file("CreditCardFraud_dataset_with_predictions").csv({ typed: true }), }; }32:T806,featureMapFiles = { return { "CensusIncome, Importance: Zero One Out": processFeatureMaps( await FileAttachment("CensusIncome_feature_maps_zero_one_out@1.json").json() ), "CensusIncome, Importance: Permutation": processFeatureMaps( await FileAttachment("CensusIncome_feature_maps_permutation@1.json").json() ), "Titanic, Importance: Zero One Out": processFeatureMaps( await FileAttachment("Titanic_feature_maps_zero_one_out@1.json").json() ), "Titanic, Importance: Permutation": processFeatureMaps( await FileAttachment("Titanic_feature_maps_permutation@1.json").json() ), "HeartDisease, Importance: Zero One Out": processFeatureMaps( await FileAttachment("HeartDisease_feature_maps_zero_one_out@8.json").json() ), "HeartDisease, Importance: Permutation": processFeatureMaps( await FileAttachment("HeartDisease_feature_maps_permutation@3.json").json() ), "GermanCreditRisk, Importance: Zero One Out": processFeatureMaps( await FileAttachment("GermanCreditRisk_feature_maps_zero_one_out@7.json").json() ), "GermanCreditRisk, Importance: Permutation": processFeatureMaps( await FileAttachment("GermanCreditRisk_feature_maps_permutation@1.json").json() ), "CaliforniaHousing, Importance: Zero One Out": processFeatureMaps( await FileAttachment("CaliforniaHousing_feature_maps_zero_one_out.json").json() ), "CaliforniaHousing, Importance: Permutation": processFeatureMaps( await FileAttachment("CaliforniaHousing_feature_maps_permutation.json").json() ), "AmesHousing, Importance: Zero One Out": processFeatureMaps( await FileAttachment("AmesHousing_feature_maps_zero_one_out@1.json").json() ), "AmesHousing, Importance: Permutation": processFeatureMaps( await FileAttachment("AmesHousing_feature_maps_permutation@1.json").json() ), "CreditCardFraud, Importance: Zero One Out": processFeatureMaps( await FileAttachment("CreditCardFraud_feature_maps@2.json").json() ), }; }33: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; }34: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; }35: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); } }36: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; }37: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; }38:T830,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 }; }39:Taa2,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 = await 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); } } }3a: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 }3b:Td17,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: targetColors}) ) .height(height * (1/5)) .width(width); const linePlotAndDensity = vl .vconcat(layeredPlot, histogram) .spacing(0) .render(); return linePlotAndDensity; }3c:Te35,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: targetColors}) ) .height(height * (1/3)) .width(width); return vl .vconcat(barPlotZeroLine, histogram) .spacing(0) .render() }3d:T1b91,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) .params(vl.selectInterval().bind('scales')) .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: targetColors}) ) .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: targetColors}) ) .height(height * (1/5)) .width(width * (4/5)); let HeatmapHorizontal = vl .hconcat(heatmap, histogram1) .spacing(0); if (useScatterplot) { let useTarget = indexClassMap[classIndex] const allClasses = target_names.map((x) => (x)) const showScatterplot = vl.selectPoint("Select") .fields("target") .init({target: useTarget}) .bind({target: vl.menu([...target_names, allClasses, "Don't show targets"]).name("Show Target as Scatterplot: ")}); const scatterplot = vl .markPoint() .data(originalData) .params( opacityOfClasses, showScatterplot ) .encode( vl.x().fieldQ(featureName1).title(featureName1).scale({domain: [binFeature1Min, binFeature1Max]}), vl.y().fieldQ(featureName2).title(featureName2).scale({reverse: false, domain: [binFeature2Min, binFeature2Max]}), vl .color() .fieldN("target") .title("Class") .scale({range: targetColors}) .legend(null), vl.opacity().if(showScatterplot, vl.value(0.5)).value(opacityOfClasses), vl.tooltip([{field:`${featureName1}`, format:".2f"}, {field:`${featureName2}`, format:".2f"}, {field:"target"}]) ) .height(height * (4/5)) .width(width * (4/5)); const layeredPlot = vl.layer(heatmap, scatterplot); HeatmapHorizontal = vl .hconcat(layeredPlot, 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; }3e:T15f4,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: targetColors}) ) .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: targetColors}) ) .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; }3f:T15c4,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: targetColors}) ) .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: targetColors}) ) .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; }40:T1717,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: targetColors}) ) .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: targetColors}) .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; }41:[{"id":"703be85832d3f2ce0aaeeb800ef1e722ebcc1739b61282a7378833019be800c64a6b5e96571770d0226890cddf5db4dbfe630c6e03e249e8cf86f5deadbbb9ae","href":"https://static.observableusercontent.com/files/703be85832d3f2ce0aaeeb800ef1e722ebcc1739b61282a7378833019be800c64a6b5e96571770d0226890cddf5db4dbfe630c6e03e249e8cf86f5deadbbb9ae","name":"GermanCreditRisk_dataset_with_predictions@8.csv","type":"text/csv","lastModified":1695056088225.803,"size":260170},{"id":"f2aebd582f7bada2820194b9c6626b768c89a8d8d554360c8c5436e77f74d24fd378670dbbc01f398065211c15d935f908a015855fc2d7ae8b6ca45744ad0674","href":"https://static.observableusercontent.com/files/f2aebd582f7bada2820194b9c6626b768c89a8d8d554360c8c5436e77f74d24fd378670dbbc01f398065211c15d935f908a015855fc2d7ae8b6ca45744ad0674","name":"GermanCreditRisk_feature_maps_permutation@1.json","type":"application/json","lastModified":1695056088225.803,"size":451895},{"id":"3df5ba2854fcafd5cc1c97552340aa9491575a18ca79f97e996b5f663ec49277c32affc9f089f3fa27ead8d8c7563d60ea091e2d3f9d3a7ffc5a1f61c213ea16","href":"https://static.observableusercontent.com/files/3df5ba2854fcafd5cc1c97552340aa9491575a18ca79f97e996b5f663ec49277c32affc9f089f3fa27ead8d8c7563d60ea091e2d3f9d3a7ffc5a1f61c213ea16","name":"GermanCreditRisk_feature_maps_zero_one_out@7.json","type":"application/json","lastModified":1695056088225.803,"size":451346},{"id":"7a5092cdb0a26dc07ffaadc4b633d1a577986e4552c0c7fc71921951849260531a410ffde0d82768ae50934fdc0dee86b09d999af45b09ab5440c8cefb116d66","href":"https://static.observableusercontent.com/files/7a5092cdb0a26dc07ffaadc4b633d1a577986e4552c0c7fc71921951849260531a410ffde0d82768ae50934fdc0dee86b09d999af45b09ab5440c8cefb116d66","name":"CensusIncome_dataset_with_predictions@1.csv","type":"text/csv","lastModified":1695056088225.803,"size":3473312},{"id":"5f026f554ce3e3ca3ac55bd07dec6b391bab4a2f01e478b44bcaf8858187b4833ea2420c770a5274ca69d468e521503f6a904a25e209bd3b2694d6cf6508a1d3","href":"https://static.observableusercontent.com/files/5f026f554ce3e3ca3ac55bd07dec6b391bab4a2f01e478b44bcaf8858187b4833ea2420c770a5274ca69d468e521503f6a904a25e209bd3b2694d6cf6508a1d3","name":"CensusIncome_feature_maps_permutation@1.json","type":"application/json","lastModified":1695056088225.803,"size":858457},{"id":"aee7a6be7d268dc2b70fbb2cd2482d19cbc43dc910e49247aa6ac2ff51c721341773260538cb1e8e3b6f5bbb987c9d1322f928c5e14b55e0db7327fd7fcce76a","href":"https://static.observableusercontent.com/files/aee7a6be7d268dc2b70fbb2cd2482d19cbc43dc910e49247aa6ac2ff51c721341773260538cb1e8e3b6f5bbb987c9d1322f928c5e14b55e0db7327fd7fcce76a","name":"CensusIncome_feature_maps_zero_one_out@1.json","type":"application/json","lastModified":1695056088225.803,"size":858143},{"id":"3508a943ad875100c9a1da91250a7714520a3e4eae6592366511f9a539a2d93ed90de948afb01e460b7b05f15ac44847db7006dee244f3c389e542bc9f9bedf0","href":"https://static.observableusercontent.com/files/3508a943ad875100c9a1da91250a7714520a3e4eae6592366511f9a539a2d93ed90de948afb01e460b7b05f15ac44847db7006dee244f3c389e542bc9f9bedf0","name":"Titanic_dataset_with_predictions@1.csv","type":"text/csv","lastModified":1695056088225.803,"size":23816},{"id":"a57f4f0da789793040cab5db7c52159c67c5f9397e0d77c7e4385e7675dc6bd3494779124c34713aa2ad4e16e827da657cf864ac225cb0a79a2130a094f8128c","href":"https://static.observableusercontent.com/files/a57f4f0da789793040cab5db7c52159c67c5f9397e0d77c7e4385e7675dc6bd3494779124c34713aa2ad4e16e827da657cf864ac225cb0a79a2130a094f8128c","name":"Titanic_feature_maps_permutation@1.json","type":"application/json","lastModified":1695056088225.803,"size":81194},{"id":"4cebd03e443cc43416c797b12ba1f6340223faefd22236e60211f56d387f4581b37feec6f906f8cf4fb64e50fccb215d3f63094cb9e665e4c4cf247685d10f81","href":"https://static.observableusercontent.com/files/4cebd03e443cc43416c797b12ba1f6340223faefd22236e60211f56d387f4581b37feec6f906f8cf4fb64e50fccb215d3f63094cb9e665e4c4cf247685d10f81","name":"Titanic_feature_maps_zero_one_out@1.json","type":"application/json","lastModified":1695056088225.803,"size":81017},{"id":"20b3015a912de971b34982b641bc1116a4aac79587ef8f2d4e1c2d4849499a564ae8d72f7bc81a5652e37f6be865529029d22e93fab05531443bcd7afadb9621","href":"https://static.observableusercontent.com/files/20b3015a912de971b34982b641bc1116a4aac79587ef8f2d4e1c2d4849499a564ae8d72f7bc81a5652e37f6be865529029d22e93fab05531443bcd7afadb9621","name":"HeartDisease_dataset_with_predictions@6.csv","type":"text/csv","lastModified":1695056088225.803,"size":48339},{"id":"07609869692fdf828f95fe9ecdb784961fa8ef35c98883518b21a052cd1c9fd3e8ab0721aa7b9d57a0ae14377f064e6d13980ce6805591bf7d70c57b44f99c4c","href":"https://static.observableusercontent.com/files/07609869692fdf828f95fe9ecdb784961fa8ef35c98883518b21a052cd1c9fd3e8ab0721aa7b9d57a0ae14377f064e6d13980ce6805591bf7d70c57b44f99c4c","name":"HeartDisease_feature_maps_permutation@3.json","type":"application/json","lastModified":1695056088225.803,"size":698020},{"id":"0d90ec5a4cdf9399bd4498f8cdcac65f4bb8f495e3f13835ea69cfe300b9123b587e188772ec03330631f69448bfbfb32a349b520e5d801e433ce68f0febf041","href":"https://static.observableusercontent.com/files/0d90ec5a4cdf9399bd4498f8cdcac65f4bb8f495e3f13835ea69cfe300b9123b587e188772ec03330631f69448bfbfb32a349b520e5d801e433ce68f0febf041","name":"HeartDisease_feature_maps_zero_one_out@8.json","type":"application/json","lastModified":1695056088225.803,"size":697185},{"id":"1c932786b45151a73497f223cf9581765d5a437baefd926793962f39357ad14ee5a41915e075f9baf9b4cac242288075ef912d77adb1ffbeb1b9a02fa202ab59","href":"https://static.observableusercontent.com/files/1c932786b45151a73497f223cf9581765d5a437baefd926793962f39357ad14ee5a41915e075f9baf9b4cac242288075ef912d77adb1ffbeb1b9a02fa202ab59","name":"CaliforniaHousing_dataset_with_predictions.csv","type":"text/csv","lastModified":1695056088225.803,"size":1440213},{"id":"e241cfa46afd0878fc3f0506fae5541dccaf3c5dd6e3d46d1ff2e7bc32d95b5a37b6c6a56fe83dae096fdafe5941c5c956f92a34d7ebf766f7c2ce81164eb041","href":"https://static.observableusercontent.com/files/e241cfa46afd0878fc3f0506fae5541dccaf3c5dd6e3d46d1ff2e7bc32d95b5a37b6c6a56fe83dae096fdafe5941c5c956f92a34d7ebf766f7c2ce81164eb041","name":"CaliforniaHousing_feature_maps_permutation.json","type":"application/json","lastModified":1695056088225.803,"size":1663374},{"id":"c9d5c1e205b5198f9bfd80c67f4bac9069e7efc0ce90467f033e5b45c20fb8ac530288233d5cf732b0cfc6093e68f41e7ce0be7293da2cd14e4394271114243b","href":"https://static.observableusercontent.com/files/c9d5c1e205b5198f9bfd80c67f4bac9069e7efc0ce90467f033e5b45c20fb8ac530288233d5cf732b0cfc6093e68f41e7ce0be7293da2cd14e4394271114243b","name":"CaliforniaHousing_feature_maps_zero_one_out.json","type":"application/json","lastModified":1695056088225.803,"size":1663290},{"id":"2d3826080fcf0214e9d251dfff6b5c0a0be759c17ad7056630291f98a3109c71b3ef56d5ae76101c8d00482a89fa0b693769f6a6bb2227f53c6225e75297451c","href":"https://static.observableusercontent.com/files/2d3826080fcf0214e9d251dfff6b5c0a0be759c17ad7056630291f98a3109c71b3ef56d5ae76101c8d00482a89fa0b693769f6a6bb2227f53c6225e75297451c","name":"CreditCardFraud_feature_maps@2.json","type":"application/json","lastModified":1695056088225.803,"size":2213034},{"id":"193c7c7fa5bd2eede89eaee430ad59d57a5e411e0c279cc3b52ca3340e753b26b357bebcb10fd8481b766278b8817caeae371473d368ff3a421d4d9bbcbab7f3","href":"https://static.observableusercontent.com/files/193c7c7fa5bd2eede89eaee430ad59d57a5e411e0c279cc3b52ca3340e753b26b357bebcb10fd8481b766278b8817caeae371473d368ff3a421d4d9bbcbab7f3","name":"CreditCardFraud_dataset_with_predictions@1.zip","type":"application/zip","lastModified":1695056088225.803,"size":21957959},{"id":"87e2f037ccccb3505af2ca470ce70be248c3297078adac679c40bb6eb8b9322b1a7d7461f116d3ee39add3de4bdababc8e454a114f82d0d65ed1706e52201066","href":"https://static.observableusercontent.com/files/87e2f037ccccb3505af2ca470ce70be248c3297078adac679c40bb6eb8b9322b1a7d7461f116d3ee39add3de4bdababc8e454a114f82d0d65ed1706e52201066","name":"AmesHousing_dataset_with_predictions@1.csv","type":"text/csv","lastModified":1695056088225.803,"size":835198},{"id":"668d854ef5112341effacb7a70b0bd3a7742a99a94388e4f69852c0638682e8e012f2a7c751035d0734a6185c35f6e7831468c3e35c0d73a5156807a13ff9115","href":"https://static.observableusercontent.com/files/668d854ef5112341effacb7a70b0bd3a7742a99a94388e4f69852c0638682e8e012f2a7c751035d0734a6185c35f6e7831468c3e35c0d73a5156807a13ff9115","name":"AmesHousing_feature_maps_permutation@1.json","type":"application/json","lastModified":1695056088225.803,"size":2025090},{"id":"bd8566c8cc12a166113b1dbb63f8a4008e43b5ed9a712aeb2b63183bba3c886ff0a47fbdb8a135b2692928a9003c2123f204ea77c8b0ba16481833aee06e2388","href":"https://static.observableusercontent.com/files/bd8566c8cc12a166113b1dbb63f8a4008e43b5ed9a712aeb2b63183bba3c886ff0a47fbdb8a135b2692928a9003c2123f204ea77c8b0ba16481833aee06e2388","name":"AmesHousing_feature_maps_zero_one_out@1.json","type":"application/json","lastModified":1695056088225.803,"size":2022326}] 2d:{"title":"GAM with 2nd order interactions (18.09.2023)","cells":[{"id":3034,"value":"# GAM with 2nd order interactions (18.09.2023)","pinned":false,"hidden":false,"mode":"md"},{"id":3468,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3899,"value":"# !!!Attention!!!","pinned":false,"hidden":false,"mode":"md"},{"id":3841,"value":"#### Scatterplots should only be turned on with attention! \nIf the dataset has **over hundred thousand samples**, the Obvservable worker can crash, since they increase the load on the Observable worker. Should Observable crash, reload the page and continue without the scatterpots.","pinned":false,"hidden":false,"mode":"md"},{"id":3919,"value":"To **big datasets** like the **CreditCardFraud** dataset with **285k samples** and 30 features, result into: `RangeError: Maximum call stack size exceeded`","pinned":false,"hidden":false,"mode":"md"},{"id":3917,"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 = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":2957,"value":"cellWidth = 600","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 = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":3726,"value":"viewof useScatterplot = checkbox(\"Show Scatterplots\", false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3685,"value":"viewof opacityOfClasses = slider('Opacity of not selected classes:', 0, 0, 0.5, 0.01)","pinned":false,"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: Permutation\",\n \"Titanic, Importance: Zero One Out\",\n \"CensusIncome, Importance: Permutation\",\n \"CensusIncome, Importance: Zero One Out\",\n \"HeartDisease, Importance: Permutation\",\n \"HeartDisease, Importance: Zero One Out\",\n \"GermanCreditRisk, Importance: Permutation\",\n \"GermanCreditRisk, Importance: Zero One Out\",\n \"CaliforniaHousing, Importance: Permutation\",\n \"CaliforniaHousing, Importance: Zero One Out\",\n \"AmesHousing, Importance: Permutation\",\n \"AmesHousing, Importance: Zero One Out\",\n \"CreditCardFraud, 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":3849,"value":"Below the first feature is preselected as filter, clear it and you will see all plots, or filter your own features. The purpose of this implementation is to reduce the load on Observable worker in the first seconds of loading.","pinned":false,"hidden":false,"mode":"md"},{"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":3904,"value":"CreditCardZip = FileAttachment(\"CreditCardFraud_dataset_with_predictions@1.zip\").zip()","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","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":"$32","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":3562,"value":"targetColors = Array.from({ length: 5 }, (v, i) => (getColor(i, classIndexMap)));","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":"$33","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 if (typeof featureValues[0] === \"number\" || featureType === \"ordinal\") {\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 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 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 if (typeof featureValues[0] === \"number\" || featureType === \"ordinal\") {\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 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 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 if (typeof featureValues[0] === \"number\" || featureType === \"ordinal\") {\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 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 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":"$34","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":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3886,"value":"function delay(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"## Visualization Functions","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$40","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":3690,"value":"// Generate a checkbox with provided label title and checked state\ncheckbox = function(title, checked) {\n const cb = document.createElement('input');\n cb.setAttribute('type', 'checkbox');\n cb.checked = !!checked;\n \n return form(\n { \n get() { return cb.checked; },\n set(v) { cb.checked = v; }\n },\n label(title), cb\n );\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W41","stdlib":"1","titling":"auto"}