2f:T5f4,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 // Get the 1D data const barData1D = Object.values(featureMaps["1D"]) // Get the 2D data const barData2D = Object.values(featureMaps["2D"]) // Combine the 1D and 2D data const transformedData = [{data:[ ...barData1D.map((d) => ({ feature: d.feature, importance: d.importance, color: "black" })), ...barData2D.map((d) => ({ feature: `${d.feature_1} & ${d.feature_2}`, importance: d.importance, color: "black" })) ]}]; // Calculate the maximum importance value across all classes const maxImportance = Math.max( ...transformedData.map((barData) => Math.max(...barData.data.map((d) => d.importance)) ) ); const barCharts = transformedData.map((barData, index) => { // Change data color given featureSelection const add = barData?.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:T41a,function getMinMaxPerClass(data) { let minMax = {}; for (let dimension in data) { minMax[dimension] = {}; for (let feature in data[dimension]) { let currentClass = "Feature_Importance_Score" let currentData = data[dimension][feature].data; let currentMin, currentMax; if (dimension === "1D") { currentMin = Math.min(...currentData); currentMax = Math.max(...currentData); } else { currentMin = Math.min(...currentData.map((arr) => Math.min(...arr))); currentMax = Math.max(...currentData.map((arr) => Math.max(...arr))); } if (!minMax[dimension][currentClass]) { minMax[dimension][currentClass] = { min: currentMin, max: currentMax }; } else { if (currentMin < minMax[dimension][currentClass].min) { minMax[dimension][currentClass].min = currentMin; } if (currentMax > minMax[dimension][currentClass].max) { minMax[dimension][currentClass].max = currentMax; } } } } return minMax; }32:T53a,function extractAndSortFeatureMaps(featureMaps) { const sortedFeatureMapsByClass = {}; for (const dimension in featureMaps) { for (const key in featureMaps[dimension]) { const featureMap = featureMaps[dimension][key]; const className = "Feature_Importance_Score"; if (!sortedFeatureMapsByClass[className]) { sortedFeatureMapsByClass[className] = []; } // Create a new object to store feature map information let newFeatureMapObject = { key, dimension, importance: featureMap.importance }; // If dimension is "1D", add feature to the newFeatureMapObject if (dimension === "1D") { newFeatureMapObject.feature = featureMap.feature; } // If dimension is "2D", add feature_1 and feature_2 to the newFeatureMapObject else if (dimension === "2D") { newFeatureMapObject.feature_1 = featureMap.feature_1; newFeatureMapObject.feature_2 = featureMap.feature_2; } // Push the newFeatureMapObject to the corresponding class array sortedFeatureMapsByClass[className].push(newFeatureMapObject); } } for (const className in sortedFeatureMapsByClass) { sortedFeatureMapsByClass[className].sort( (a, b) => b.importance - a.importance ); } return sortedFeatureMapsByClass; }33:T467,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); } 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; 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); } mutable barChartObject = generateBarChartObject() }34:T416,featureMapsByFeature = { const sortedFeatureMapsByClass = extractAndSortFeatureMaps(featureMaps); const featureMapsByFeature = {}; for (const className in sortedFeatureMapsByClass) { // Create an object to store the feature maps by their feature or feature key sortedFeatureMapsByClass[className].forEach((featureMap) => { if (featureMap.dimension === "1D") { // If the featureMap dimension is "1D", use its feature as the key const feature = featureMap.feature; if (!featureMapsByFeature[feature]) { featureMapsByFeature[feature] = []; } featureMapsByFeature[feature].push(featureMap); } else { // Otherwise, create a composite feature key and use it as the key const featureKey = `${featureMap.feature_1} & ${featureMap.feature_2}`; if (!featureMapsByFeature[featureKey]) { featureMapsByFeature[featureKey] = []; } featureMapsByFeature[featureKey].push(featureMap); } }); } return featureMapsByFeature; }35:T8a0,function generateBarChartObject() { // First, we need to transform the data into a format that can be used by Vega-Lite // Get the 1D data const barData1D = Object.values(featureMaps["1D"]) // Get the 2D data const barData2D = Object.values(featureMaps["2D"]) // Combine the 1D and 2D data const transformedData = [{data:[ ...barData1D.map((d) => ({ feature: d.feature, importance: d.importance, color: "black" })), ...barData2D.map((d) => ({ feature: `${d.feature_1} & ${d.feature_2}`, importance: d.importance, color: "black" })) ]}]; // 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((barData, index) => { // Create a selection object that will allow us to capture the user's brush selection const brushName = `brush_${"Feature_Importance_Score"}`; const brush = vl.selectInterval(brushName).encodings("y"); const chart = vl .markBar() .data({ name: "data", values: barData.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["Feature_Importance_Score"] = value; }); // Append the chart to the appropriate container element const plotsContainer = document.getElementById("plots-container"); const barChartContainer = plotsContainer.querySelector( `[data-class="${"Feature_Importance_Score"}"] .bar-chart-container`); view.initialize(barChartContainer); return view; }); // Return the container element and brush selections to render them in Observable return { barCharts, brushSelections }; }36:Taa1,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="${"Feature_Importance_Score"}"]` ); // Remove the existing plots const existingPlots = classColumn.querySelectorAll(".cell"); existingPlots.forEach((plot) => plot.remove()); // Get the brush selection for this class const classBrushSelection = brushSelections[className]; // 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.slice(0,useTopFeatureMaps)) { 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); } } }37:Tade,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].slice(0,useTopFeatureMaps)) { 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 }38:Tc68,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}, Score: ${score.toFixed(2)}`}) .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"]), vl.color().value("lightgrey") ) .height(height * (1/5)) .width(width); const linePlotAndDensity = vl .vconcat(layeredPlot, histogram) .spacing(0) .render(); return linePlotAndDensity; }39:Td45,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]); 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, ["density"]: (frequencyCount[key] / featureValues.length).toFixed(5) } )); if (featureType === "ordinal" && allTrue(Object.keys(frequencyCount).map(key => (canCastToInt(key))))) { density = Object.keys(frequencyCount).map(key => ( { [`${featureName}`]: parseFloat(key), ["density"]: (frequencyCount[key] / featureValues.length).toFixed(5) } )).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}, Score: ${score.toFixed(2)}` }) .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"]), vl.color().value("lightgrey") ) .height(height * (1/3)) .width(width); return vl .vconcat(barPlotZeroLine, histogram) .spacing(0) .render() }3a:T17d5,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 colorMidpoint = Math.max(0, colorMin); 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 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({ scheme: 'viridis', domain: [colorMin, colorMidpoint, colorMax] }) .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"]), vl.color().value("lightgrey") ) .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"]), vl.color().value("lightgrey") ) .height(height * (1/5)) .width(width * (4/5)); let HeatmapHorizontal = vl .hconcat(heatmap, histogram1) .spacing(0); if (useScatterplot) { const scatterplot = vl .markPoint() .data(originalData) .params(selectOpacity) .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() .value("lightgrey") .legend(null), vl.opacity().value(selectOpacity), vl.tooltip([{field:`${featureName1}`, format:".2f"}, {field:`${featureName2}`, format:".2f"}]) ) .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}, Score: ${score.toFixed(2)}` }) .spacing(0) .render() return HeatmapVertiAndHori; }3b:T13b9,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]); 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, ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5) } )); if (feature_1_Type === "ordinal" && allTrue(Object.keys(frequencyCount1).map(key => (canCastToInt(key))))) { density1 = Object.keys(frequencyCount1).map(key => ( { [`${featureName1}`]: parseFloat(key), ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5) } )).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 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({ scheme: 'viridis', domain: [colorMin, colorMidpoint, colorMax] }) .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"]), vl.color().value("lightgrey") ) .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"]), vl.color().value("lightgrey") ) .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}, Score: ${score.toFixed(2)}` }) .spacing(0) .render() return barHeatmapVertiAndHori; }3c:T13bf,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]); 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, ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5) } )); if (feature_2_Type === "ordinal" && allTrue(Object.keys(frequencyCount2).map(key => (canCastToInt(key))))) { density2 = Object.keys(frequencyCount2).map(key => ( { [`${featureName2}`]: parseFloat(key), ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5) } )).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 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({ scheme: 'viridis', domain: [colorMin, colorMidpoint, colorMax] }) .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"]), vl.color().value("lightgrey") ) .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"]), vl.color().value("lightgrey") ) .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}, Score: ${score.toFixed(2)}` }) .render() return barHeatmapVertiAndHori; }3d:T14d2,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]); 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, ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5) } )); if (feature_1_Type === "ordinal" && allTrue(Object.keys(frequencyCount1).map(key => (canCastToInt(key))))) { density1 = Object.keys(frequencyCount1).map(key => ( { [`${featureName1}`]: parseFloat(key), ["density"]: (frequencyCount1[key] / featureValues1.length).toFixed(5) } )).sort((a, b) => a[`${featureName1}`] - b[`${featureName1}`]); } const featureValues2 = originalData.map((x) => x[featureName2]); 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, ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5) } )); if (feature_2_Type === "ordinal" && allTrue(Object.keys(frequencyCount2).map(key => (canCastToInt(key))))) { density2 = Object.keys(frequencyCount2).map(key => ( { [`${featureName2}`]: parseFloat(key), ["density"]: (frequencyCount2[key] / featureValues2.length).toFixed(5) } )).sort((a, b) => a[`${featureName2}`] - b[`${featureName2}`]); } 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)) if (colorMin === null || colorMax === null) { const values = data.map((d) => d.value); colorMin = Math.min(...values); colorMax = Math.max(...values); } const colorMidpoint = Math.max(0, colorMin); 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({ scheme: 'viridis', domain: [colorMin, colorMidpoint, colorMax] }) .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"]), vl.color().value("lightgrey") ) .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"]), vl.color().value("lightgrey") ) .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}, Score: ${score.toFixed(2)}` }) .spacing(0) .render(); return barHeatmapVertiAndHori; }3e:[{"id":"5f1704720a3e518d957ade79a9b4b5813cf5a420372634094f702c1de6c6e2fc39d1b0405a57e7b6908a6f85e184f2770b404276aba00636ded1eb82d0520415","href":"https://static.observableusercontent.com/files/5f1704720a3e518d957ade79a9b4b5813cf5a420372634094f702c1de6c6e2fc39d1b0405a57e7b6908a6f85e184f2770b404276aba00636ded1eb82d0520415","name":"AmesHousing_regression_dataset_with_predictions.csv","type":"text/csv","lastModified":1695476824782.523,"size":821030},{"id":"b533b6a0b7ba03cf7d2d631949e217a134d196036b9c6ef4b54d35cc9c052736fad31611be62e5ca6a3a719293cf5d333fa269a962c1638daff7c8ba8b05e223","href":"https://static.observableusercontent.com/files/b533b6a0b7ba03cf7d2d631949e217a134d196036b9c6ef4b54d35cc9c052736fad31611be62e5ca6a3a719293cf5d333fa269a962c1638daff7c8ba8b05e223","name":"AmesHousing_regression_feature_maps_permutation.json","type":"application/json","lastModified":1695476901629.692,"size":1030018},{"id":"52815914c344653cb6343ecef3c6b1ed16a61d18c6c6a2fd9988f05776ff149fbb946fcf73d9d68a0f44f8c37e6ac8f08c400f68c786e46609cd9dfea8a6de12","href":"https://static.observableusercontent.com/files/52815914c344653cb6343ecef3c6b1ed16a61d18c6c6a2fd9988f05776ff149fbb946fcf73d9d68a0f44f8c37e6ac8f08c400f68c786e46609cd9dfea8a6de12","name":"AmesHousing_regression_feature_maps_zero_one_out.json","type":"application/json","lastModified":1695476914206.777,"size":1029952},{"id":"f7854f7f811bd81fae972d85358de850983118e765cff756ce35501a7fefa143935f094196f2964b49e7b790f258253fd12b89078c5aa974ca518c73942e1d47","href":"https://static.observableusercontent.com/files/f7854f7f811bd81fae972d85358de850983118e765cff756ce35501a7fefa143935f094196f2964b49e7b790f258253fd12b89078c5aa974ca518c73942e1d47","name":"CaliforniaHousing_regression_dataset_with_predictions@3.csv","type":"text/csv","lastModified":1695411897676.322,"size":1609637},{"id":"76f7db517d4dc531e173626d75c4f4eb264c947401d0f446b9fda11fc996bde53118b87d576710a50d4629ee02a415551c2909a90e89166af68eea2e649545dc","href":"https://static.observableusercontent.com/files/76f7db517d4dc531e173626d75c4f4eb264c947401d0f446b9fda11fc996bde53118b87d576710a50d4629ee02a415551c2909a90e89166af68eea2e649545dc","name":"CaliforniaHousing_regression_feature_maps_permutation@4.json","type":"application/json","lastModified":1695411909091.621,"size":300632},{"id":"aee8d9d884b8d9df31bda30de35a11185e5e9514d3ff51c9c716b99f840e51a172795cebbb4981b8c7ae246b26324a83a3c213ae655d33e6c6b93243d9ca0620","href":"https://static.observableusercontent.com/files/aee8d9d884b8d9df31bda30de35a11185e5e9514d3ff51c9c716b99f840e51a172795cebbb4981b8c7ae246b26324a83a3c213ae655d33e6c6b93243d9ca0620","name":"CaliforniaHousing_regression_feature_maps_zero_one_out@3.json","type":"application/json","lastModified":1695411923178.66,"size":300628}] 2d:{"title":"NAM with 2nd order interactions (Regression)","cells":[{"id":3034,"value":"# NAM with 2nd order interactions (Regression)","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 = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":2957,"value":"cellWidth = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":2953,"value":"plotHeight = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":2955,"value":"plotWidth = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":3447,"value":"plotContainerWidth = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":3726,"value":"viewof useScatterplot = checkbox(\"Show scatter plots\", false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3685,"value":"viewof selectOpacity = slider('Opacity of the scatter plots:', 0.1, 0, 1, 0.01)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4346,"value":"viewof useTopFeatureMaps = slider('Show only top feature maps:', 50, 5, 500, 5)","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 \"CaliforniaHousingRegression, Importance: Permutation\",\n \"CaliforniaHousingRegression, Importance: Zero One Out\",\n \"AmesHousingRegression, Importance: Permutation\",\n \"AmesHousingRegression, 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 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 \"CaliforniaHousingRegression, Importance: Permutation\":\n await FileAttachment(\"CaliforniaHousing_regression_dataset_with_predictions@3.csv\").csv({ typed: true }),\n \"CaliforniaHousingRegression, Importance: Zero One Out\":\n await FileAttachment(\"CaliforniaHousing_regression_dataset_with_predictions@3.csv\").csv({ typed: true }),\n \"AmesHousingRegression, Importance: Permutation\":\n await FileAttachment(\"AmesHousing_regression_dataset_with_predictions.csv\").csv({ typed: true }),\n \"AmesHousingRegression, Importance: Zero One Out\":\n await FileAttachment(\"AmesHousing_regression_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":"featureMapFiles = {\n return {\n \"CaliforniaHousingRegression, Importance: Zero One Out\": processFeatureMaps(\n await FileAttachment(\"CaliforniaHousing_regression_feature_maps_zero_one_out@3.json\").json()\n ),\n \"CaliforniaHousingRegression, Importance: Permutation\": processFeatureMaps(\n await FileAttachment(\"CaliforniaHousing_regression_feature_maps_permutation@4.json\").json()\n ),\n \"AmesHousingRegression, Importance: Zero One Out\": processFeatureMaps(\n await FileAttachment(\"AmesHousing_regression_feature_maps_zero_one_out.json\").json()\n ),\n \"AmesHousingRegression, Importance: Permutation\": processFeatureMaps(\n await FileAttachment(\"AmesHousing_regression_feature_maps_permutation.json\").json()\n ),\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"## Data Processing","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"renderPlotsInOrderOfImportance(\n data,\n featureMaps,\n minMaxPerClass,\n barChartObject.brushSelections,\n precomputedPlots\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"{\n const barChartContainers = plotsContainer.querySelectorAll(\n \".bar-chart-container\"\n );\n\n barChartContainers.forEach((container) => {\n container.addEventListener(\"mouseup\", () => {\n \n renderPlotsInOrderOfImportance(\n data,\n featureMaps,\n minMaxPerClass,\n barChartObject.brushSelections,\n precomputedPlots\n );\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"minMaxPerClass = getMinMaxPerClass(featureMaps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":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":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":"mutable barChartObject = generateBarChartObject()","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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function processFeatureMaps(data) {\n const newData = { ...data };\n\n for (const dim in newData) {\n for (const key in newData[dim]) {\n const dataObj = newData[dim][key];\n const dataArray = dataObj.data;\n\n if (dim === \"1D\") {\n dataObj.min = Math.min(...dataArray);\n dataObj.max = Math.max(...dataArray);\n } else if (dim === \"2D\") {\n let min = Infinity;\n let max = -Infinity;\n\n for (const arr of dataArray) {\n const arrMin = Math.min(...arr);\n const arrMax = Math.max(...arr);\n\n if (arrMin < min) {\n min = arrMin;\n }\n\n if (arrMax > max) {\n max = arrMax;\n }\n }\n\n dataObj.min = min;\n dataObj.max = max;\n }\n }\n }\n\n return newData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":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":4101,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"function roundToNearestBase(value, base) {\n return Math.round(value / base) * base;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"precomputedPlots = precomputePlots(data, featureMaps, minMaxPerClass)","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"function transformData(classIndexMap) {\n const transformedData = Object.entries(classIndexMap).map(\n ([className, classIndex]) => {\n // Get the 1D data for this class\n const classData1D = Object.values(featureMaps[\"1D\"]).filter(\n (d) => d.class == className\n );\n\n // Get the 2D data for this class\n const classData2D = Object.values(featureMaps[\"2D\"]).filter(\n (d) => d.class == className\n );\n // 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":"function calculateDensity(data, resolution) {\n if(data.length === 0) return null;\n \n let values = data.map(arr => arr[0]);\n let min = Math.min(...values);\n let max = Math.max(...values);\n \n let binWidth = (max - min) / resolution;\n let totalElements = data.length;\n \n let binData = Array.from({ length: resolution }, (_, index) => {\n return {\n binStart: min + binWidth * index,\n binEnd: min + binWidth * (index + 1),\n totalCount: 0\n };\n });\n \n data.forEach(([value]) => {\n let binIndex = Math.min(Math.floor((value - min) / binWidth), resolution - 1);\n binData[binIndex].totalCount++;\n });\n \n let result = [];\n \n binData.forEach(bin => {\n result.push({\n binStart: bin.binStart,\n binEnd: bin.binEnd,\n density: (bin.totalCount / totalElements).toFixed(5)\n });\n });\n \n return result;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"## Visualization Functions","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2714,"value":"## Slider","pinned":false,"hidden":false,"mode":"md"},{"id":2677,"value":"// Generate a form element that wraps one or more inputs\nform = function(value, ...nodes) {\n const form = document.createElement('form');\n form.addEventListener('submit', event => event.preventDefault());\n nodes.forEach(node => form.appendChild(node));\n return Object.defineProperty(form, 'value', value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2675,"value":"// Generate a text label\nlabel = function(title) {\n const label = document.createElement('label');\n label.style.display = 'inline-block';\n label.style.width = '250px';\n label.innerText = title;\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"// Generate a slider with provided label title and slider parameters\nslider = function(title, value, min, max, step) {\n const slider = document.createElement('input');\n slider.setAttribute('type', 'range');\n slider.setAttribute('min', min);\n slider.setAttribute('max', max);\n slider.setAttribute('step', step);\n slider.value = value;\n\n const valueLabel = document.createElement('label');\n valueLabel.style['margin-left'] = '0.5em';\n \n const update = () => valueLabel.innerText = slider.value;\n slider.addEventListener('input', update);\n update();\n \n return form(\n {\n get() { return +slider.value; },\n set(v) { slider.value = +v; update(); }\n },\n label(title), slider, valueLabel\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":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":"$W3e","stdlib":"1","titling":"auto"}