2c:null 2d:["$","title",null,{"children":"Interactive LDA plot | Frederik H. | Observable"}] 32:T5c9,displaySettings = { const displaySettings = Inputs.form( { addDataOptions: Inputs.radio( ["Red", "Blue"], { label: "Add data point", value: "Red"} ), showParameterCheckbox: Inputs.checkbox( ["Means", "Variances"], { label: "Show Estimates"} ), // resetButton: Inputs.button("🗑 Remove all", { // onClick: () => ldaPlot.reset() // }), }, { template: (inputs) => htl.html`

${Object.values(inputs)}

` } ); displaySettings.addEventListener("change", toggleParameterDisplay); function toggleParameterDisplay () { if (displaySettings.value.showParameterCheckbox.includes("Means")) { d3.selectAll("*").filter(function() { return d3.select(this).attr("id") === "meanLineGroup"; }).attr('display', 'block'); } else { d3.selectAll("*").filter(function() { return d3.select(this).attr("id") === "meanLineGroup"; }).attr('display', 'none'); } if (displaySettings.value.showParameterCheckbox.includes("Variances")) { d3.selectAll("*").filter(function() { return d3.select(this).attr("id") === "variancesRectGroup"; }).attr('display', 'block'); } else { d3.selectAll("*").filter(function() { return d3.select(this).attr("id") === "variancesRectGroup"; }).attr('display', 'none'); } } return displaySettings }33:T4d4,viewof sliders = guard( // The callback. We pass `template` through to Inputs.form(), but could also // define our own template instead. See "Callback context" in the documentation. // Refer to the sliders as sliders.sliders ({ template }) => Inputs.form( { vsliders: verticalSliders({ names: ["xMean0", "yMean0", "xVar0", "yVar0", "num0", "xMean1", "yMean1", "xVar1", "yVar1", "num1"], labels:["μ_x ", "μ_y", "σ²_x", "σ²_y", "n", "μ_x ", "μ_y", "σ²_x", "σ²_y", "n",], minx: [0, 0, 0, 0, 1, 0, 0, 0, 0, 1], maxs: [26, 20, 13, 15, 100, 26, 20, 13, 15, 100], values: [4, 10, 3.4, 1, 15, 8, 12, 2.5, 6.3, 40], steps: [1, 1, 0.1, 0.1, 1, 1, 1, 0.1, 0.1, 1] }), }, { template } ), // Options. Here we override the label of the reset button. { submitLabel: "▶ Generate new samples", resetLabel: "↺ Reset"} )34:T408,

Debugging Panel

x: - y: -	cov: - cor: -	Delta(Red): - Delta(Blue): -
beta0Bayes: - beta1Bayes: -	beta0Estimated: - beta1Estimated: -	delta0qda: - delta1qda: -

35:T4cf,// Generate random data function generateData(dataParameters) { let data = [] // test data // data = [ // [6,2,0], // [4,4,0], // [8,4,1], // [6,6,1], // ]; const dataType0 = d3.range(0, dataParameters.type0.numPoints).map((i) => { const xCoord = d3.randomNormal( dataParameters.type0.x.mean, dataParameters.type0.x.variance**0.5)(); const yCoord = d3.randomNormal( dataParameters.type0.y.mean, dataParameters.type0.y.variance**0.5)(); const type = 0; const id = i; return {xCoord, yCoord, type, id}; }); const dataType1 = d3.range(0, dataParameters.type1.numPoints).map((i) => { const xCoord = d3.randomNormal( dataParameters.type1.x.mean, dataParameters.type1.x.variance**0.5)(); const yCoord = d3.randomNormal( dataParameters.type1.y.mean, dataParameters.type1.y.variance**0.5)(); const type = 1; const id = d3.max(dataType0, d => d.id) + 1 + i; return {xCoord, yCoord, type, id}; }); data = dataType0.concat(dataType1); // round (for testing) // data.forEach(function(d) { // d.xCoord = Math.round(d.xCoord); // d.yCoord = Math.round(d.yCoord); // }); return data; }; 36:T1bab,function buildPlot(data) { ///////////////////// SETUP ///////////////////// // Create internal data array (scoped within this function) let idCounter = 0; // To give each data point a unique id const accesX = ([x]) => x; // accessor function for x-coordinate const accesY = ([, y]) => y; // accessor function for y-coordinate const accesType = ([, , type]) => type; // accessor function for type // There is probably a more elegant way to set up data data = [{xCoord: null, yCoord: null, type: null, id: null}]; console.log("init"); data = data.map((d) => ({ xCoord: d.xCoord, yCoord: d.yCoord, type: d.type, id: idCounter++ })); data.pop(); // make the object empty // Store copy of initial data object const initData = data.map((d) => ({ ...d })); ///////////////////// DRAW SVG AND AXES ///////////////////// // Draw svg const svg = d3 .create("svg") .attr("width", cfg.width) .attr("height", cfg.height) .attr("viewBox", [0, 0, cfg.width, cfg.height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .on("mousemove", mouseOver); function mouseOver(event) { let [x, y] = d3.pointer(event); x = cfg.xScale.invert(x); y = cfg.yScale.invert(y); calculateLdaDelta(x, y, data); d3.select("#xDisplay").text(Math.round(x*100)/100); d3.select("#yDisplay").text(Math.round(y*100)/100); } // Draw Axes drawAxes(svg) // Set up variances svg let varianceRects = svg .append('g') .attr('id', 'variancesRectGroup') .attr('display', displaySettings.value.showParameterCheckbox.indexOf("Variances") !== -1 ? 'block' : 'none' ) .selectAll('rect'); // Set up means svg let meansSvg = svg .append("g") .attr('id', 'meanLineGroup') .attr('display', displaySettings.value.showParameterCheckbox.indexOf("Means") !== -1 ? 'block' : 'none' ); // Set up legend const legendCurve = d3.line().curve(d3.curveLinear); const legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(" + (cfg.width - 120) + "," + 40 + ")"); legend.append("path") .attr("d", legendCurve([[0,0], [20,0]])) .attr("stroke", "black") .attr("stroke-width", 2) .style("stroke-dasharray", "0, 0") .attr("fill", "none"); legend.append("text") .attr("x", 25) .attr("y", 0) .text("Estimated boundary") .style("font-size", "10px"); // second legend const legend2 = svg.append("g") .attr("transform", "translate(" + (cfg.width - 120) + "," + (60) + ")"); legend2.append("path") .attr("d", legendCurve([[0,0], [20,0]])) .attr("stroke", "black") .attr("stroke-width", 2) .style("stroke-dasharray", "3, 3") .attr("fill", "none"); legend2.append("text") .attr("x", 25) .attr("y", 0) .attr("dy", ".35em") .text("Bayes boundary") .style("font-size", "10px"); // Draw space for plot interactions const plotRect = svg .append("rect") .attr("width", cfg.width) .attr("height", cfg.height) .attr("opacity", 0) .on("click", addDatapointByClick); // Set up circles svg let circles = svg .append("g") .selectAll("circle"); runStartingAnimation(data); function runStartingAnimation (data) { // Perform opening animation const totalTime = 3_000; const ease = d3.easeLinear; console.log("run starting animation"); d3.range(0, data0.length).forEach((i) => {; setTimeout(() => { addDatapoint(data0[i]['xCoord'], data0[i]['yCoord'], data0[i]['type']); }, totalTime * ease(i / data0.length)); }); // from here https://dev.to/codebubb/how-to-shuffle-an-array-in-javascript-2ikj function shuffle(array) { const newArray = [...array] const length = newArray.length for (let start = 0; start < length; start++) { const randomPosition = Math.floor((newArray.length - start) * Math.random()) const randomItem = newArray.splice(randomPosition, 1) newArray.push(...randomItem) } return newArray } } ///////////////////// DRAG ///////////////////// // Init drag object. const drag = d3 .drag() .on("drag", dragged) .on("start", dragstarted) .on("end", dragended); // Drag interactions for circles. function dragstarted(event, d) { d3.select(this).raise().attr("stroke", "black"); } function dragged(event, d) { d3.select(this) // Update data point, as well as its position on the plot .attr("cx", () => { d.xCoord = cfg.xScale.invert(event.x); return event.x; }) .attr("cy", () => { d.yCoord = cfg.yScale.invert(event.y); return event.y; }); varianceRects = updateVariances(data, varianceRects); drawDecisionBoundary(data, svg); drawQDADecisionBoundary(data, svg); drawMeans(data, meansSvg); hideBayesBoundary(); } function dragended(event, i) { d3.select(this).attr("stroke", 'null'); } ///////////////////// MAIN FUNCTIONS ///////////////////// // Click interaction for plot. function addDatapointByClick(event) { const [xm, ym] = d3.pointer(event); console.log("add datapoint by click"); let type = -1; if (displaySettings.value.addDataOptions == "Random") { type = Math.round(d3.randomUniform()()); } else if (displaySettings.value.addDataOptions == "Red") { type = 0; } else if (displaySettings.value.addDataOptions == "Blue") { type = 1; } addDatapoint(cfg.xScale.invert(xm), cfg.yScale.invert(ym), type); hideBayesBoundary(); } // Adds a new datapoint and updates the plot function addDatapoint(xCoord, yCoord, type) { // Add datapoint const newValue = { xCoord: xCoord, yCoord: yCoord, type: type, id: idCounter++ }; data = [...data, newValue]; update(data); } // Click interaction for circles. function removeDatapoint(event, dCurr) { if (event.defaultPrevented) return; // dragged // Remove data point; faster way to do this? data = data.filter((d) => d.id !== dCurr.id); update(data); hideBayesBoundary(); } // Resets the plot to the initial data function reset() { update(initData, true); hideBayesBoundary(); } // Main function that updates the plot based on new data function update(newData = data) { // Upate local data object data = newData.map((d) => ({ ...d })); varianceRects = updateVariances(data, varianceRects); circles = updateCircles(data, circles, drag, removeDatapoint); drawDecisionBoundary(data, svg); drawQDADecisionBoundary(data, svg); drawMeans(data, meansSvg); } function hideBayesBoundary() { // searches and hides the Bayes Boundary // if data are added, dragged or removed d3.selectAll("*").filter(function() { return d3.select(this).attr("id") === "ldalineBayes"; }).attr('display', 'none'); } return Object.assign(svg.node(), { update, reset }); }37:T452,function drawAxes(svg) { // Draw xAxis. const axisOpacity = 1; const xGroup = svg .append("g") .attr("transform", `translate(0,${cfg.height - cfg.marginBottom})`) .attr("opacity", axisOpacity) .call(cfg.xAxis) .call((g) => g.select(".domain").remove()); // Draw grid lines xGroup .selectAll(".tick line") .clone() .attr("y2", cfg.marginTop + cfg.marginBottom - cfg.height) // Draw line at origin .attr("stroke-opacity", (d) => { if (d == 0) { return axisOpacity; } else { return cfg.showGrid ? 0.1 : 0; } }); // Draw yAxis. const yGroup = svg .append("g") .attr("transform", `translate(${cfg.marginLeft},0)`) .attr("opacity", axisOpacity) .call(cfg.yAxis) .call((g) => g.select(".domain").remove()); yGroup .selectAll(".tick line") .clone() .attr("x2", width - cfg.marginLeft - cfg.marginRight) // Draw line at origin .attr("stroke-opacity", (d) => { if (d == 0) { return axisOpacity; } else { return cfg.showGrid ? 0.1 : 0; } }); }38:T64e,// Helper function to update circles based on new data. function updateCircles(data, circles, drag, removeDatapoint) { // circles: existing circles in the svg // data: data set, which gets compared here with the existing circles return circles .data(data, (d) => d.id) .join( //https://bost.ocks.org/mike/join/ (enter) => enter .append("circle") .attr("cx", (d) => cfg.xScale(d.xCoord)) .attr("cy", (d) => cfg.yScale(d.yCoord)) .attr("fill", (d) => d.type == 0 ? d3.schemeSet3[3] : d3.schemeSet3[4]) .attr("opacity", cfg.circleOpacity) // To transition from 0 radius .attr("r", cfg.r) // no transition //.attr("r", 0) // transition // Attach interactions .call(drag) .on("click", removeDatapoint) // Add transition // #* Somehow doesn't work correctly. For testing this set attr("r", 0) above // .attr("r", 0) // transition // .call((enter) => // enter // .transition() // .duration(300) // .ease(d3.easeBackOut.overshoot(1.7)) // .attr("r", cfg.r) // ) , (update) => update .transition() .attr("cx", (d) => cfg.xScale(d.xCoord)) .attr("cy", (d) => cfg.yScale(d.yCoord)), (exit) => exit .transition() .ease(d3.easeBackIn.overshoot(1.7)) .attr("r", 0) .remove() ); }39:T119c,function calculateLineCoefficients () { function calculatePriorsPopulation() { // calculate by looking into data parameters const DATA_PARAMETERS = getDataParameters(); const type0prior = DATA_PARAMETERS.type0.numPoints/ (DATA_PARAMETERS.type0.numPoints + DATA_PARAMETERS.type1.numPoints); const type1prior = DATA_PARAMETERS.type1.numPoints/ (DATA_PARAMETERS.type0.numPoints + DATA_PARAMETERS.type1.numPoints); return {type0prior, type1prior} } function calculatePriorsSample(data) { // calculate priors by counting datapoints const type0prior = data.filter((d) => d.type === 0).length/data.length; const type1prior = data.filter((d) => d.type === 1).length/data.length; return {type0prior, type1prior} } function estimatedBoundary(data) { // calculates the coefficients beta0 and beta1 based on estimated distribution values const {type0prior, type1prior} = calculatePriorsSample(data); const [type0Mean, type1Mean, covMatrix] = calculateLdaEstimates(data); const [v0, v1, z0, z1, logPrior0, logPrior1] = calculateIntermediateValues( type0Mean, type1Mean, covMatrix, type0prior, type1prior); const [beta0, beta1] = calculateBeta(v0, v1, z0, z1, logPrior0, logPrior1); return [beta0, beta1]; } function bayesBoundary() { // calculates the coefficients beta0 and beta1 based on actual distribution values const DATA_PARAMETERS = getDataParameters(); const {type0prior, type1prior} = calculatePriorsPopulation(); const type0Mean = math.matrix([ [DATA_PARAMETERS.type0.x.mean], [DATA_PARAMETERS.type0.y.mean], ]); const type1Mean = math.matrix([ [DATA_PARAMETERS.type1.x.mean], [DATA_PARAMETERS.type1.y.mean], ]); const XVariance = ( DATA_PARAMETERS.type0.x.variance * type0prior + DATA_PARAMETERS.type1.x.variance * type1prior); const YVariance = ( DATA_PARAMETERS.type0.y.variance * type0prior + DATA_PARAMETERS.type1.y.variance * type1prior); const OverallXMean = DATA_PARAMETERS.type0.x.mean*type0prior + DATA_PARAMETERS.type1.x.mean*type1prior; const OverallYMean = DATA_PARAMETERS.type0.y.mean*type0prior + DATA_PARAMETERS.type1.y.mean*type1prior; const XYcovariance = 0; // not true if covariance const covMatrix = math.matrix([ [XVariance, XYcovariance], [XYcovariance, YVariance], ]); const [v0, v1, z0, z1, logPrior0, logPrior1] = calculateIntermediateValues( type0Mean, type1Mean, covMatrix, type0prior, type1prior); const [beta0, beta1] = calculateBeta(v0, v1, z0, z1, logPrior0, logPrior1); return [beta0, beta1]; } function calculateIntermediateValues(type0Mean, type1Mean, covMatrix, type0prior, type1prior) { // intermediate values for final formula const logPrior0 = Math.log(type0prior); const logPrior1 = Math.log(type1prior); if (math.det(covMatrix) == 0) {return [math.matrix([[0],[0]]), math.matrix([[0],[0]]), math.matrix([[0]]), math.matrix([[0]]), logPrior0, logPrior1]} // covMatrix has only 1 obs, so is 0 and inverse matrix cannot be calculated. For some reason the inverse is also not possible when length = 2 const v0 = math.multiply(math.inv(covMatrix), type0Mean); const z0 = math.multiply(-0.5, (math.multiply(math.transpose(type0Mean), math.multiply(math.inv(covMatrix), type0Mean)))); const v1 = math.multiply(math.inv(covMatrix), type1Mean); const z1 = math.multiply(-0.5, (math.multiply(math.transpose(type1Mean), math.multiply(math.inv(covMatrix), type1Mean)))); if (!(getDimensionOfMatrix(v0) == [2,1]) && !(getDimensionOfMatrix(v1) == [2,1]) && !(getDimensionOfMatrix(z0) == [1,1]) && !(getDimensionOfMatrix(z1) == [1,1])) { new Error('Dimension of Matrix not correct :/'); } return [v0, v1, z0, z1, logPrior0, logPrior1]; } function calculateBeta(v0, v1, z0, z1, logPrior0, logPrior1) { // calculate lda line coefficients const beta0 = (((z1.get([0,0]) - z0.get([0,0]) + logPrior1 - logPrior0))/ (v0.get([1,0]) - v1.get([1,0]))); const beta1 = (v1.get([0,0]) - v0.get([0,0]))/ (v0.get([1,0]) - v1.get([1,0])); return [beta0, beta1]; } return { estimatedBoundary, bayesBoundary, calculateIntermediateValues, calculatePriorsSample, calculatePriorsPopulation, } } 3a:Tfff,function calculateQDAcoefficients(data) { const clc = calculateLineCoefficients(); function estimatedBoundary(data) { const [type0Mean, type1Mean, covMatrix, variances, covMatrixType0, covMatrixType1] = calculateLdaEstimates(data); const {type0prior, type1prior} = clc.calculatePriorsSample(data); const [a0, b0, c0, d0, e0, f0] = calculateIntermediateValues(covMatrixType0, type0Mean._data[0][0], type0Mean._data[1][0], variances['type0VarianceX'], variances['type0VarianceY'], type0prior); const [a1, b1, c1, d1, e1, f1] = calculateIntermediateValues(covMatrixType1, type1Mean._data[0][0], type1Mean._data[1][0], variances['type1VarianceX'], variances['type1VarianceY'], type1prior); const a = a0 - a1; const b = b0 - b1; const c = c0 - c1; const d = d0 - d1; const e = e0 - e1; const f = f0 - f1; return [a, b, c, d, e, f] } function bayesBoundary() { const DATA_PARAMETERS = getDataParameters(); const {type0prior, type1prior} = clc.calculatePriorsPopulation(data); const covMatrixType0 = math.matrix([ [DATA_PARAMETERS.type0.x.variance,0], [0,DATA_PARAMETERS.type0.y.variance] ]); const covMatrixType1 = math.matrix([ [DATA_PARAMETERS.type1.x.variance,0], [0,DATA_PARAMETERS.type1.y.variance] ]) const [a0, b0, c0, d0, e0, f0] = calculateIntermediateValues(covMatrixType0, DATA_PARAMETERS.type0.x.mean, DATA_PARAMETERS.type0.y.mean, DATA_PARAMETERS.type0.x.variance, DATA_PARAMETERS.type0.y.variance, type0prior); const [a1, b1, c1, d1, e1, f1] = calculateIntermediateValues(covMatrixType1, DATA_PARAMETERS.type1.x.mean, DATA_PARAMETERS.type1.y.mean, DATA_PARAMETERS.type1.x.variance, DATA_PARAMETERS.type1.y.variance, type1prior); const a = a0 - a1; const b = b0 - b1; const c = c0 - c1; const d = d0 - d1; const e = e0 - e1; const f = f0 - f1; return [a, b, c, d, e, f] } function calculateIntermediateValues(covMatrix, xMean, yMean, xVar, yVar, prior) { if (math.det(covMatrix) == 0) {return [0, 0, 0, 0, 0, 0]} const det = math.det(covMatrix); const meanVector = math.matrix([[xMean],[yMean]]); const a = -0.5*yVar/det; const b = (yVar*xMean - covMatrix._data[1][0]*yMean)/det; const c = covMatrix._data[1][0]/det; const d = (-covMatrix._data[1][0]*xMean + xVar*yMean)/-det; const e = -0.5*xVar/det; const f = -0.5*math.multiply(math.transpose(meanVector), math.multiply(math.inv(covMatrix), meanVector))._data[0][0] - 0.5 * Math.log(det) + Math.log(prior); return [a, b, c, d, e, f] } return { estimatedBoundary, bayesBoundary, calculateIntermediateValues, } }3b:T1118,function calculateLdaEstimates(data){ // calculate all metrics from data for further processing const numberOfTypes = 2; // might change that in the future const type0Data = data.filter((d) => d.type === 0); const type1Data = data.filter((d) => d.type === 1); const type0prior = type0Data.length/(data.length); const type1prior = type1Data.length/(data.length); // Mean and variance for type 0 x-coordinates const type0MeanX = type0Data.reduce((acc, val) => acc + val.xCoord, 0) / type0Data.length; const type0VarianceX = type0Data.reduce((acc, val) => acc + (val.xCoord - type0MeanX) ** 2, 0) / type0Data.length; // Mean and variance for type 0 y-coordinates const type0MeanY = type0Data.reduce((acc, val) => acc + val.yCoord, 0) / type0Data.length; const type0VarianceY = type0Data.reduce((acc, val) => acc + (val.yCoord - type0MeanY) ** 2, 0) / type0Data.length; // Mean and variance for type 1 x-coordinates const type1MeanX = type1Data.reduce((acc, val) => acc + val.xCoord, 0) / type1Data.length; const type1VarianceX = type1Data.reduce((acc, val) => acc + (val.xCoord - type1MeanX) ** 2, 0) / type1Data.length; // Mean and variance for type 1 y-coordinates const type1MeanY = type1Data.reduce((acc, val) => acc + val.yCoord, 0) / type1Data.length; const type1VarianceY = type1Data.reduce((acc, val) => acc + (val.yCoord - type1MeanY) ** 2, 0) / type1Data.length; // Common variances across classes // not the same as variance disregarding types (OverallVariance) // not the same as class-specific variances (type0/1Variance) const XVariance = (type0Data.reduce((acc, val) => acc + (val.xCoord - type0MeanX) ** 2, 0) + type1Data.reduce((acc, val) => acc + (val.xCoord - type1MeanX) ** 2, 0)) / (data.length - numberOfTypes); const YVariance = (type0Data.reduce((acc, val) => acc + (val.yCoord - type0MeanY) ** 2, 0) + type1Data.reduce((acc, val) => acc + (val.yCoord - type1MeanY) ** 2, 0)) / (data.length - numberOfTypes); const XYcovariance = (type0Data.reduce((acc, val) => acc + (val.yCoord - type0MeanY) * (val.xCoord - type0MeanX), 0) + type1Data.reduce((acc, val) => acc + (val.yCoord - type1MeanY) * (val.xCoord - type1MeanX), 0)) / (data.length - numberOfTypes); // Overall covariance for LDA // Calculated with the mean disregarding types const OverallXMean = d3.mean(data, d => d.xCoord); const OverallYMean = d3.mean(data, d => d.yCoord); const OverallXYcovariance = data.reduce((acc, val) => acc + (val.xCoord - OverallXMean) * (val.yCoord- OverallYMean), 0) / (data.length - 0); // Calculate correlation just for fun // not the same as OverallXVariance = d3.variance(data, d => d[0]); const OverallXVariance = (data.reduce((acc, val) => acc + (val.xCoord - OverallXMean) ** 2, 0)) / (data.length); // not the same as YVarianceTotal = d3.variance(data, d => d[1]); const OverallYVariance = (data.reduce((acc, val) => acc + (val.yCoord - OverallYMean) ** 2, 0)) / (data.length); const OverallXYcorrelation = OverallXYcovariance/(OverallXVariance**0.5*OverallYVariance**0.5); d3.select("#cov").text(OverallXYcovariance); d3.select("#cor").text(OverallXYcorrelation); // Class-specific covariance for QDA const covarianceType0 = type0Data.reduce((acc, val) => acc + (val.xCoord - type0MeanX) * (val.yCoord- type0MeanY), 0) / (type0Data.length - 0); const covarianceType1 = type1Data.reduce((acc, val) => acc + (val.xCoord - type1MeanX) * (val.yCoord- type1MeanY), 0) / (type1Data.length - 0); // covariance matrix const covMatrix = math.matrix ([ [XVariance, XYcovariance], [XYcovariance, YVariance], ]); const type0Mean = math.matrix([ [type0MeanX], [type0MeanY], ]); const type1Mean = math.matrix([ [type1MeanX], [type1MeanY], ]); // class-specific covariance matrices const covMatrixType0 = math.matrix ([ [type0VarianceX, covarianceType0], [covarianceType0, type0VarianceY], ]); const covMatrixType1 = math.matrix ([ [type1VarianceX, covarianceType1], [covarianceType1, type1VarianceY], ]); // variances for drawing const variances = {type0VarianceX, type0VarianceY, type1VarianceX, type1VarianceY, XVariance, YVariance, OverallXVariance, OverallYVariance}; return [type0Mean, type1Mean, covMatrix, variances, covMatrixType0, covMatrixType1]; } 3c:T5c4,function drawDecisionBoundary(data, svg) { let clc = calculateLineCoefficients(); const [beta0Estimated, beta1Estimated] = clc.estimatedBoundary(data); const optionsEstimated = { domId: 'ldalineEstimated', stroke: "0, 0", strokewidth: 2, displayBeta0: "beta0Estimated", displayBeta1: "beta1Estimated", }; drawBoundary(beta0Estimated, beta1Estimated, optionsEstimated); const [beta0Bayes, beta1Bayes] = clc.bayesBoundary(); const optionsBayes = { domId: 'ldalineBayes', stroke: "3, 3", strokewidth: 4, displayBeta0: "beta0Bayes", displayBeta1: "beta1Bayes", }; drawBoundary(beta0Bayes, beta1Bayes, optionsBayes); function drawBoundary(beta0, beta1, options) { const curve = d3.line().curve(d3.curveLinear); let points = [ [cfg.xScale(0), cfg.yScale(beta0)], [cfg.xScale(cfg.xDomain[1]), cfg.yScale(beta0 + cfg.xDomain[1]*beta1)] ]; d3.select("svg").select('#' + options['domId']).remove(); // #* add transition here svg .append('path') .attr('id', options['domId']) .attr('d', curve(points)) .attr('stroke', 'black') // d3.schemeSet3[8] .attr("stroke-width", options['strokewidth']) .style("stroke-dasharray", options['stroke']) .attr('fill', 'none') .attr('display', 'block'); d3.select("#" + options['displayBeta0']).text(beta0); d3.select("#" + options['displayBeta1']).text(beta1); } }3d:Ta07,function drawQDADecisionBoundary(data, svg) { const cqc = calculateQDAcoefficients(); const [a, b, c, d, e, f] = cqc.estimatedBoundary(data); const [aBayes, bBayes, cBayes, dBayes, eBayes, fBayes] = cqc.bayesBoundary(data); const optionsEstimated = { domId: 'qdalineEstimated', stroke: "0, 0", }; const optionsBayes = { domId: 'qdalineBayes', stroke: "3, 3", }; //drawBoundary(a, b, c, d, e, f, optionsEstimated); //drawBoundary(aBayes, bBayes, cBayes, dBayes, eBayes, fBayes, optionsBayes); function drawBoundary(a, b, c, d, e, f, options) { // create data points // two lines because we have up to two solutions for each x let QDAcurvePoints1 = [{x: null, y: null}]; let QDAcurvePoints2 = [{x: null, y: null}]; QDAcurvePoints1.pop(); QDAcurvePoints2.pop(); let y1, y2; console.log(Math.round(100*a)/100, Math.round(100*b)/100, Math.round(100*c)/100, Math.round(100*d)/100, Math.round(100*e)/100, Math.round(100*f)/100); d3.ticks(cfg.xDomain[0], cfg.xDomain[1], 45).forEach((x) => { // solve for y: const p = (c*x+d)/e; const q = (a*x**2+b*x+f)/e; if ((0.5*p)**2-q >= 0) { y1 = -0.5*p + ((0.5*p)**2-q)**0.5; QDAcurvePoints1.push({x: x, y: y1}); } }); d3.ticks(cfg.xDomain[0], cfg.xDomain[1], 45).forEach((x) => { // solve for y: const p = (c*x+d)/e; const q = (a*x**2+b*x+f)/e; if ((0.5*p)**2-q >= 0) { y2 = -0.5*p - ((0.5*p)**2-q)**0.5; QDAcurvePoints2.push({x: x, y: y2}); } }); // plot // Create the line generator let line = d3.line() .x((d) => cfg.xScale(d.x)) .y((d) => cfg.yScale(d.y)) // remove old lines d3.selectAll("*").filter(function() { return d3.select(this).attr("name") === options['domId']+"1" || d3.select(this).attr("name") === options['domId']+"2"; }).remove(); // draw first line const QDAcurve1 = svg .append("path") .attr('name', options['domId'] + "1") .attr("d", line(QDAcurvePoints1)) .attr("stroke", "grey") .attr("stroke-width", 2) .style("stroke-dasharray", options['stroke']) .attr("fill", "none") ; // draw second line const QDAcurve2 = svg .append("path") .attr('name', options['domId'] + "2") .attr("d", line(QDAcurvePoints2)) .attr("stroke", "grey") .attr("stroke-width", 2) .style("stroke-dasharray", options['stroke']) .attr("fill", "none") ; } }3e:T7fd,function drawMeans(data, meansSvg) { let [type0Mean, type1Mean, ] = calculateLdaEstimates(data) d3.selectAll("*").filter(function() { return d3.select(this).attr("name") === "meanLine"; }).remove(); const curve1 = d3.line().curve(d3.curveLinear); let type0MeanXLine = [ [cfg.xScale(type0Mean.get([0,0])), cfg.yScale(cfg.yDomain[0])], [cfg.xScale(type0Mean.get([0,0])), cfg.yScale(cfg.yDomain[1])] ]; meansSvg .append('path') .attr('name', 'meanLine') .attr('d', curve1(type0MeanXLine)) .attr('stroke', d3.schemeSet3[3]) .attr("stroke-width", 2) .attr('fill', 'none') .style("stroke-dasharray", ("3, 3")); const curve2 = d3.line().curve(d3.curveLinear); let type1MeanXLine = [ [cfg.xScale(type1Mean.get([0,0])), cfg.yScale(cfg.yDomain[0])], [cfg.xScale(type1Mean.get([0,0])), cfg.yScale(cfg.yDomain[1])] ]; meansSvg .append('path') .attr('name', 'meanLine') .attr('d', curve2(type1MeanXLine)) .attr('stroke', d3.schemeSet3[4]) .attr("stroke-width", 2) .attr('fill', 'none') .style("stroke-dasharray", ("3, 3")); const curve3 = d3.line().curve(d3.curveLinear); let type0MeanYLine = [ [cfg.xScale(cfg.xDomain[0]), cfg.yScale(type0Mean.get([1,0]))], [cfg.xScale(cfg.xDomain[1]), cfg.yScale(type0Mean.get([1,0]))] ]; meansSvg .append('path') .attr('name', 'meanLine') .attr('d', curve3(type0MeanYLine)) .attr('stroke', d3.schemeSet3[3]) .attr("stroke-width", 2) .attr('fill', 'none') .style("stroke-dasharray", ("3, 3")); const curve4 = d3.line().curve(d3.curveLinear); let type1MeanYLine = [ [cfg.xScale(cfg.xDomain[0]), cfg.yScale(type1Mean.get([1,0]))], [cfg.xScale(cfg.xDomain[1]), cfg.yScale(type1Mean.get([1,0]))] ]; meansSvg .append('path') .attr('name', 'meanLine') .attr('d', curve4(type1MeanYLine)) .attr('stroke', d3.schemeSet3[4]) .attr("stroke-width", 2) .attr('fill', 'none') .style("stroke-dasharray", ("3, 3")); }3f:T8bb,function updateVariances(data, varianceRectType0X) { const [type0Mean, type1Mean, , variances] = calculateLdaEstimates(data); // #* this should probably be passed as arguments from buildPLot instead of being calculated once again here const meansAndVariances = [ { id: 'type0X', type: 0, axis: 'x', mean: type0Mean._data[0][0], variance: variances.type0VarianceX, }, { id: 'type0Y', type: 0, axis: 'y', mean: type0Mean._data[1][0], variance: variances.type0VarianceY, }, { id: 'type1X', type: 1, axis: 'x', mean: type1Mean._data[0][0], variance: variances.type1VarianceX, }, { id: 'type1Y', type: 1, axis: 'y', mean: type1Mean._data[1][0], variance: variances.type1VarianceY, } ] return varianceRectType0X .data(meansAndVariances, (d) => d.id) .join( (enter) => enter .append('rect') .attr('name', 'varianceDisplay') .attr('x', (d) => d.axis == 'x' ? cfg.xScale(d.mean - Math.abs(d.variance)) : 0) .attr('y', (d) => d.axis == 'x' ? 0 : cfg.yScale(d.mean + Math.abs(d.variance))) .attr('width', (d) => d.axis == 'x' ? cfg.xScale(Math.abs(d.variance*2)) - cfg.insetLeft -cfg.marginLeft : cfg.width) .attr('height', (d) => d.axis == 'x' ? cfg.height : Math.abs(cfg.yScale(Math.abs(d.variance*2)) - cfg.height + cfg.marginTop + cfg.insetTop)) .attr('fill', (d) => d.type == 0 ? d3.schemeSet3[3] : d3.schemeSet3[8]) .attr('opacity', 0.29) , (update) => update .attr('x', (d) => d.axis == 'x' ? cfg.xScale(d.mean - Math.abs(d.variance)) : 0) .attr('y', (d) => d.axis == 'x' ? 0 : cfg.yScale(d.mean + Math.abs(d.variance))) .attr('width', (d) => d.axis == 'x' ? cfg.xScale(Math.abs(d.variance*2)) - cfg.insetLeft - cfg.marginLeft : cfg.width) .attr('height', (d) => d.axis == 'x' ? cfg.height : Math.abs(cfg.yScale(Math.abs(d.variance*2)) - cfg.height + cfg.marginTop + cfg.insetTop)) , (exit) => exit.remove() // actually not relevant for variances ); }40:T61a,// config cfg = { const width = 600; const height = 600; const r = 7; // radius of dots, in pixels const marginTop = 30; // top margin, in pixels const marginRight = 30; // right margin, in pixels const marginBottom = 30; // bottom margin, in pixels const marginLeft = 30; // left margin, in pixels const inset = r * 2; // inset the default range, in pixels const insetTop = inset; // inset the default y-range const insetRight = inset; // inset the default x-range const insetBottom = inset; // inset the default y-range const insetLeft = inset; // inset the default x-range const xType = d3.scaleLinear; // type of x-scale const xRange = [marginLeft + insetLeft, width - marginRight - insetRight]; // [left, right] const yType = d3.scaleLinear; // type of y-scale const yRange = [height - marginBottom - insetBottom, marginTop + insetTop]; // [bottom, top] const showGrid = true; // whether to show grid lines const axisMax = 20; const xDomain = [0, axisMax*width/height]; const yDomain = [0, axisMax]; const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80); const yAxis = d3.axisLeft(yScale).ticks(height / 80); const axisOpacity = 1; const circleOpacity = 0.45; return {width, height, r, marginTop, marginRight, marginBottom, marginLeft, inset, insetTop, insetRight, insetBottom, insetLeft, xType, xRange, yType, yRange, showGrid, axisMax, xDomain, yDomain, xScale, yScale, xAxis, yAxis, axisOpacity, circleOpacity}; }41:[] 30:{"id":"c500898bb6e3d8c3","slug":"interactive-lda-plot","title":"Interactive LDA plot","thumbnail":"54cc548f2b11783f28ff11c59033c6fb14fb5c04d6febe526caf5f66a63547ab","access_level":"public","create_time":"$D2023-01-14T23:00:34.271Z","update_time":"$D2024-05-18T23:20:47.617Z","view_time":null,"first_public_time":"$D2023-01-14T23:00:34.271Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"0c6e428fcfacb73e","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":"starter_2024","bio":""},"version":3432,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fbb3523fc800f7b","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":null,"bio":""}],"members":[{"type":"individual","id":"5fbb3523fc800f7b","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive LDA plot","cells":[{"id":25,"value":"# Interactive LDA plot\nClassification is a central topic in machine learning. The goal is to separate data points into two (or more) classes. This plot uses a technique known as linear discriminant analysis (LDA). The estimated boundary is based on the actual data points while the Bayes boundary is based on the underlying population, which can be controlled with the population parameters.\n\nClick to add and remove data points, use drag to move them. Change the population parameters and generate new data samples.\n\nRead my article about this on Toward Data Science: https://towardsdatascience.com/linear-discriminant-analysis-lda-can-be-so-easy-b3f46e32f982\n\nThis work may be used under Creative Commons license CC BY-SA 4.0.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1062,"value":"removeAll = {\n const resetButton = Inputs.button(\"🗑 Remove all\");\n\n d3.select(resetButton).on(\"input\", () => {\n\n ldaPlot.reset();\n });\n\n return resetButton;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3085,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"ldaPlot = buildPlot(data0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3058,"value":"vSliderLabels = {\n const vSliderLabels = verticalSliderLabels({\n labels:[\"xMean0\", \"yMean0\", \"xVar0\", \"yVar0\", \"num0\", \"xMean1\", \"yMean1\", \"xVar1\", \"yVar1\", \"num1\"],\n values: [sliders.vsliders.xMean0, sliders.vsliders.yMean0, sliders.vsliders.xVar0, sliders.vsliders.yVar0, sliders.vsliders.num0, sliders.vsliders.xMean1, sliders.vsliders.yMean1, sliders.vsliders.xVar1, sliders.vsliders.yVar1, sliders.vsliders.num1],});\n \nreturn vSliderLabels\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3029,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"debuggingDisplay","database":"$undefined"},{"id":1012,"value":" DATA_PARAMETERS0 = {\n const DATA_PARAMETERS0 = {\n type0: {\n numPoints: sliders.vsliders.num0,\n x: {\n mean: sliders.vsliders.xMean0,\n variance: sliders.vsliders.xVar0,\n },\n y: {\n mean: sliders.vsliders.yMean0,\n variance: sliders.vsliders.yVar0,\n },\n },\n type1: {\n numPoints: sliders.vsliders.num1,\n x: {\n mean: sliders.vsliders.xMean1,\n variance: sliders.vsliders.xVar1,\n },\n y: {\n mean: sliders.vsliders.yMean1,\n variance: sliders.vsliders.yVar1,\n },\n }\n };\n return DATA_PARAMETERS0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"mutable data0 = generateData(DATA_PARAMETERS0); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"function getDataParameters() {\n const data_parameters = {\n type0: {\n numPoints: sliders.vsliders.num0,\n x: {\n mean: sliders.vsliders.xMean0,\n variance: sliders.vsliders.xVar0,\n },\n y: {\n mean: sliders.vsliders.yMean0,\n variance: sliders.vsliders.yVar0,\n },\n },\n type1: {\n numPoints: sliders.vsliders.num1,\n x: {\n mean: sliders.vsliders.xMean1,\n variance: sliders.vsliders.xVar1,\n },\n y: {\n mean: sliders.vsliders.yMean1,\n variance: sliders.vsliders.yVar1,\n },\n }\n };\n return data_parameters\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3155,"value":"# Open Issues","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2012,"value":"Extensions\n- QDA\n- Three classes\n- allow x and y to have a covariance != 0 as per the data_parameters\n\nIssues:\n- if x == 0 for type 0 and type 1, det is 0, so LDA is not plotted\n- see further minor issues marked with #*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1703,"value":"# Plot stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$36","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"# LDA and QDA stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":911,"value":"$39","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2505,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"function calculateLdaDelta(x, y, data) {\n const clc = calculateLineCoefficients(data);\n const {type0prior, type1prior} = clc.calculatePriorsSample(data);\n const [type0Mean, type1Mean, covMatrix, variances, covMatrixType0, covMatrixType1] = calculateLdaEstimates(data);\n const [v0, v1, z0, z1, logPrior0, logPrior1] = clc.calculateIntermediateValues(type0Mean, type1Mean, covMatrix, type0prior, type1prior);\n \n \n const mouseCoords = math.matrix([\n [x],\n [y],\n ]);\n\n \n const LDAdelta0 = math.round((math.multiply(math.transpose(mouseCoords), v0)._data[0][0] + z0._data[0][0] + logPrior0)*100)/100;\n const LDAdelta1 = math.round((math.multiply(math.transpose(mouseCoords), v1)._data[0][0] + z1._data[0][0] + logPrior1)*100)/100;\n\n \n d3.select(\"#delta0\").text(LDAdelta0);\n d3.select(\"#delta1\").text(LDAdelta1);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"function getDimensionOfMatrix (matrix) {\n let dimensions = [\n matrix._data.length,\n matrix._data.reduce((x, y) => Math.max(x, y.length), 0)\n ];\n return dimensions\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"# Config and imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1489,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"d3 = require(\"d3-regression\", \"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"math = require('https://unpkg.com/mathjs@5.9.0/dist/math.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2894,"value":"import {verticalSliders} from '5c426ec2fc7f2fbf'\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2995,"value":"import {verticalSliderLabels} from '5c426ec2fc7f2fbf'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3026,"value":"import {guard} from \"@mootari/inputs-submit\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1"}} 31:"$30:body"