2b:null 2c:["$","title",null,{"children":"Interactive Decision Tree | Frederik H. | Observable"}] 31:T4d2,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, 3, 2, 12, 2.5, 6.3, 2], 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"} )32:T187d,function generateData() { let data = []; const seed = 23; // Set your desired seed value data = [ { xCoord: 3, yCoord: 9, type: 0, id: 0 }, { xCoord: 2, yCoord: 6, type: 1, id: 1 }, { xCoord: 4, yCoord: 15, type: 0, id: 2 }, { xCoord: 6, yCoord: 4, type: 1, id: 3 }, { xCoord: 15, yCoord: 5, type: 0, id: 4 }, { xCoord: 12, yCoord: 16, type: 0, id: 5 }, { xCoord: 13, yCoord: 7, type: 1, id: 6 }, { xCoord: 14, yCoord: 12, type: 0, id: 7 }, // { xCoord: 19, yCoord: 12.5, type: 1, id: 5 }, // { xCoord: 17, yCoord: 16, type: 0, id: 5 }, { xCoord: 13.5, yCoord: 18, type: 1, id: 8 }, ]; data = [ { xCoord: 10.8203125, yCoord: 15.589843988418579, type: 0, id: 0 }, { xCoord: 15.625, yCoord: 8.597655296325684, type: 0, id: 1 }, { xCoord: 11.6796875, yCoord: 5.550781488418579, type: 1, id: 2 }, { xCoord: 16.7578125, yCoord: 6.175780296325684, type: 1, id: 3 }, { xCoord: 5.8203125, yCoord: 5.121092796325684, type: 1, id: 4 }, { xCoord: 5.5078125, yCoord: 10.707030296325684, type: 1, id: 5 }, { xCoord: 10.234375, yCoord: 8.050780296325684, type: 0, id: 6 }, { xCoord: 9.5703125, yCoord: 4.027342796325684, type: 0, id: 7 }, { xCoord: 13.6328125, yCoord: 3.5195302963256836, type: 0, id: 8 }, { xCoord: 11.0546875, yCoord: 6.761718988418579, type: 0, id: 9 }, { xCoord: 4.53125, yCoord: 6.957030296325684, type: 0, id: 10 } ]; data = [ { xCoord: 4.4140625, yCoord: 2.621093988418579, type: 0, id: 0 }, { xCoord: 3.7109375, yCoord: 4.144531488418579, type: 0, id: 1 }, { xCoord: 5.2734375, yCoord: 4.535156488418579, type: 0, id: 2 }, { xCoord: 5.859375, yCoord: 2.191406488418579, type: 0, id: 3 }, { xCoord: 15.625, yCoord: 17.15234398841858, type: 0, id: 4 }, { xCoord: 13.90625, yCoord: 15.042968988418579, type: 0, id: 5 }, { xCoord: 16.8359375, yCoord: 13.675781488418579, type: 0, id: 6 }, { xCoord: 15.078125, yCoord: 15.394531488418579, type: 0, id: 7 }, { xCoord: 16.015625, yCoord: 15.589843988418579, type: 0, id: 8 }, { xCoord: 15.625, yCoord: 3.792968988418579, type: 1, id: 9 }, { xCoord: 5.7421875, yCoord: 14.535156488418579, type: 1, id: 10 }, { xCoord: 5.859375, yCoord: 15.746093988418579, type: 1, id: 11 }, { xCoord: 4.53125, yCoord: 15.003906488418579, type: 1, id: 12 }, { xCoord: 17.1484375, yCoord: 4.457031488418579, type: 1, id: 13 }, { xCoord: 15.9765625, yCoord: 1.3320302963256836, type: 1, id: 14 }, { xCoord: 4.8046875, yCoord: 16.25390648841858, type: 1, id: 15 }, { xCoord: 2.8125, yCoord: 15.433593988418579, type: 1, id: 16 }, { xCoord: 17.6171875, yCoord: 2.191406488418579, type: 1, id: 17 }, { xCoord: 14.3359375, yCoord: 4.183593988418579, type: 1, id: 18 }, { xCoord: 14.9609375, yCoord: 2.582031488418579, type: 1, id: 19 }, { xCoord: 7.265625, yCoord: 15.472656488418579, type: 1, id: 20 }, { xCoord: 16.1328125, yCoord: 3.207031488418579, type: 1, id: 21 }, { xCoord: 4.7265625, yCoord: 13.910156488418579, type: 1, id: 22 }, { xCoord: 6.71875, yCoord: 3.480468988418579, type: 0, id: 23 }, { xCoord: 5.078125, yCoord: 3.480468988418579, type: 0, id: 24 }, { xCoord: 15.2734375, yCoord: 14.261718988418579, type: 0, id: 25 }, { xCoord: 16.328125, yCoord: 16.48828148841858, type: 0, id: 26 }, { xCoord: 17.3828125, yCoord: 3.441406488418579, type: 1, id: 27 }, { xCoord: 15.859375, yCoord: 4.769531488418579, type: 1, id: 28 } ]; data = [ { xCoord: 1.9140625, yCoord: 17.73828148841858, type: 1 }, { xCoord: 2.6953125, yCoord: 15.902343988418579, type: 1 }, { xCoord: 4.1015625, yCoord: 16.76171898841858, type: 1 }, { xCoord: 4.53125, yCoord: 14.925781488418579, type: 1 }, { xCoord: 5.1171875, yCoord: 14.691406488418579, type: 1 }, { xCoord: 6.25, yCoord: 14.378906488418579, type: 1 }, { xCoord: 8.28125, yCoord: 14.027343988418579, type: 1 }, { xCoord: 8.0078125, yCoord: 15.121093988418579, type: 1 }, { xCoord: 8.4375, yCoord: 16.29296898841858, type: 1 }, { xCoord: 11.5625, yCoord: 14.261718988418579, type: 1 }, { xCoord: 12.3828125, yCoord: 13.207031488418579, type: 1 }, { xCoord: 13.203125, yCoord: 15.121093988418579, type: 1 }, { xCoord: 14.375, yCoord: 14.496093988418579, type: 1 }, { xCoord: 15.1953125, yCoord: 11.800781488418579, type: 1 }, { xCoord: 15.6640625, yCoord: 10.433593988418579, type: 1 }, { xCoord: 17.5, yCoord: 9.886718988418579, type: 1 }, { xCoord: 20.6640625, yCoord: 9.613281488418579, type: 1 }, { xCoord: 18.75, yCoord: 10.628906488418579, type: 1 }, { xCoord: 17.109375, yCoord: 11.878906488418579, type: 1 }, { xCoord: 15.5859375, yCoord: 13.011718988418579, type: 1 }, { xCoord: 15.78125, yCoord: 18.24609398841858, type: 0 }, { xCoord: 19.765625, yCoord: 16.21484398841858, type: 0 }, { xCoord: 17.3828125, yCoord: 16.05859398841858, type: 0 }, { xCoord: 17.3046875, yCoord: 17.19140648841858, type: 0 }, { xCoord: 18.2421875, yCoord: 18.16796898841858, type: 0 }, { xCoord: 16.015625, yCoord: 19.10546898841858, type: 0 }, { xCoord: 19.8828125, yCoord: 16.87890648841858, type: 0 }, { xCoord: 18.984375, yCoord: 16.09765648841858, type: 0 }, { xCoord: 3.0859375, yCoord: 4.378906488418579, type: 0 }, { xCoord: 4.6484375, yCoord: 3.324218988418579, type: 0 }, { xCoord: 6.71875, yCoord: 2.660156488418579, type: 0 }, { xCoord: 7.34375, yCoord: 0.3164052963256836, type: 0 }, { xCoord: 3.0859375, yCoord: 1.1757802963256836, type: 0 }, { xCoord: 1.328125, yCoord: 1.3710927963256836, type: 0 }, { xCoord: 1.25, yCoord: 2.582031488418579, type: 0 }, { xCoord: 1.015625, yCoord: 3.675781488418579, type: 0 }, { xCoord: 4.2578125, yCoord: 2.347656488418579, type: 0 }, { xCoord: 8.828125, yCoord: 1.800781488418579, type: 0 }, { xCoord: 15.6640625, yCoord: 2.933593988418579, type: 1 }, { xCoord: 12.578125, yCoord: 0.8242177963256836, type: 1 }, { xCoord: 18.28125, yCoord: 6.644531488418579, type: 1 }, { xCoord: 17.7734375, yCoord: 2.972656488418579, type: 1 }, { xCoord: 17.265625, yCoord: 1.996093988418579, type: 1 }, { xCoord: 15.390625, yCoord: 1.2148427963256836, type: 1 }, { xCoord: 19.53125, yCoord: 5.003906488418579, type: 1 }, ]; return data; } 33:T13e0,function buildPlot(data) { ///////////////////// SETUhideBayesBoundaryP ///////////////////// // 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) // 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 } drawDecisionTree(data0, svg) } ///////////////////// 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; }); drawDecisionTree(data, svg); // console.log(data) } 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); } // 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); // console.log(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); } // Resets the plot to the initial data function reset() { update(initData, true); } // Main function that updates the plot based on new data function update(newData = data) { // Upate local data object data = newData.map((d) => ({ ...d })); drawDecisionTree(data, svg); circles = updateCircles(data, circles, drag, removeDatapoint); } return Object.assign(svg.node(), { update, reset }); }34: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; } }); }35: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() ); }36:T8b2,function drawDecisionTree(data, svg) { console.log("draw decision tree, data.length=", data.length); svg.selectAll('.split-line').remove(); let splits = []; let parentSplit; function recursionLoop(data, currentSplitNumber, parentSplit) { let subsets = partitionData(data, splits); if (data[0].length == 9) { // console.log(splits, subsets) // debugger } if (currentSplitNumber > nSplitsInternal) return; // Stop recursion when currentSplitNumber reaches nSplits let bestSplit; let restSplits; if (splits.length == 0) { // only in the first iteration bestSplit = getBestSplit(data[0], parentSplit); } else { // all the other iterations // Iterate over each data point to calculate the splits ({ bestSplit, restSplits } = getBestAndRestSplits(subsets, parentSplit)); if (bestSplit.dimension != 'none') { const parentSplitOfBestSplit = getParentSplitOfSplit(bestSplit, splits); if (parentSplitOfBestSplit.dimension == 'x') { if (bestSplit.xCoord >= parentSplitOfBestSplit.xCoord) { bestSplit.sideOfParent = 'larger' } else { bestSplit.sideOfParent = 'smaller' } } else if (parentSplitOfBestSplit.dimension == 'y') { if (bestSplit.yCoord >= parentSplitOfBestSplit.yCoord) { bestSplit.sideOfParent = 'larger' } else { bestSplit.sideOfParent = 'smaller' } } } else { // console.log(subsets, splits) } } if (bestSplit.dimension != 'none') { splits.push(bestSplit); } // Recursive call with newFilteredData and increased currentSplitNumber recursionLoop(data, currentSplitNumber + 1, parentSplit = bestSplit.id); } // Start the recursive process with currentSplitNumber as 0 recursionLoop([data], 1, parentSplit = 0); // plot the splits plotSplits(data, svg, splits); } 37:T967,function partitionData(data, splits) { let newSubsets = []; const datalength = data[0].length; for (const [i_split, split] of splits.entries()) { // console.log("i split", i_split, split) // Check split dimension and create filtered subsets accordingly const dimension = split.dimension; const value = dimension === 'x' ? split.xCoord : split.yCoord; newSubsets = [] for (const [iteration, subset] of data.entries()) { // console.log("i subset", iteration) if (subset.length == 1) { // if the subset contains only one element, we cannot split newSubsets.push(subset); // console.log("subset.length", subset.length, subset) } else { const sortedSubset = subset.slice().sort((a, b) => a[dimension === 'x' ? 'xCoord' : 'yCoord'] - b[dimension === 'x' ? 'xCoord' : 'yCoord']); const index = sortedSubset.findIndex(d => d.id === split.id); if (index !== -1) { // split the data const filteredSubset1 = sortedSubset.slice(0, index); // up until i (=i) // I hope this will go well.. if (filteredSubset1.length > 0) { newSubsets.push(filteredSubset1); } if (filteredSubset2.length > 0) { newSubsets.push(filteredSubset2); } if (filteredSubset1.length == 0 | filteredSubset2.length == 0) { console.log("Something is wrong with the filteredSubsets.") } // console.log("we split at data point", split.id, "getting", newSubsets, "n of subsets:", newSubsets.length) } else { // datapoint not found in current subset newSubsets.push(subset); } } // console.log(iteration, subsets, newSubsets) } if (datalength==9) { // console.log(data) // debugger } data = newSubsets } // console.log(newSubsets) return newSubsets; }38:Tbc4,function getBestSplit(data, parentSplit) { // Function to calculate entropy function calculateEntropy(data) { const counts = {}; for (const point of data) { counts[point.type] = (counts[point.type] || 0) + 1; } let entropy = 0; for (const count of Object.values(counts)) { const probability = count / data.length; entropy -= probability * Math.log2(probability); } return entropy; } let bestSplit = null; let bestEntropyReduction = -Infinity; // Sort the data by xCoord and yCoord const sortedX = data.slice().sort((a, b) => a.xCoord - b.xCoord); const sortedY = data.slice().sort((a, b) => a.yCoord - b.yCoord); // Calculate initial entropy const initialEntropy = calculateEntropy(data); if (initialEntropy == 0) { bestSplit = { dimension: 'none', entropyReduction: 0, id: -1, xCoord: 0, yCoord: 0, parentSplit: parentSplit, sideOfParent: "notsure" }; } else { // Iterate over the data and split at each data point in x and y dimensions for (let i = 1; i < data.length; i++) { const leftX = sortedX.slice(0, i); // up until i (=i) const belowY = sortedY.slice(0, i); // up until i (=i) // use weighted sum of entropies const xEntropy = (leftX.length / data.length) * calculateEntropy(leftX) + (rightX.length / data.length) * calculateEntropy(rightX); const yEntropy = (belowY.length / data.length) * calculateEntropy(belowY) + (aboveY.length / data.length) * calculateEntropy(aboveY); const entropyReduction = initialEntropy - Math.min(xEntropy, yEntropy); // Update best split if we find a better one if (entropyReduction > bestEntropyReduction) { const id = xEntropy < yEntropy ? sortedX[i].id : sortedY[i].id; //get id of data point with best split const bestDataPoint = data.find(point => point.id === id); // Find the data point with matching id bestEntropyReduction = entropyReduction; bestSplit = { dimension: xEntropy < yEntropy ? 'x' : 'y', entropyReduction: entropyReduction, id: bestDataPoint.id, // refers to a data point id xCoord: bestDataPoint.xCoord, yCoord: bestDataPoint.yCoord, parentSplit: parentSplit, // refers to a data point id sideOfParent: "firstSplit", x1: -1, y1: -1, x2: -1, y2: -1, }; } } } // Print the result return bestSplit } 39:T127b,function plotSplits(data, svg, splits) { const xScale = cfg.xScale; const yScale = cfg.yScale; const splitsLength = splits.length; function updateSplitCoords(split, x1, x2, y1, y2) { split.x1 = xScale.invert(x1); split.x2 = xScale.invert(x2); split.y1 = yScale.invert(y1); split.y2 = yScale.invert(y2); return split } // loop over splits for (let [split_i, split] of splits.entries()) { // const color = d3.interpolateOranges((split_i + 1)/ splitsLength); const color = d3.interpolateOranges(7 / 7); const prevSplits = splits.slice(0, split_i); // up until i ( Math.min(prevSplit.x1, prevSplit.x2) & split.xCoord < Math.max(prevSplit.x1, prevSplit.x2)) { // apply the new boundaries if (split.yCoord > prevSplit.yCoord) { if (yScale.invert(y1) < prevSplit.yCoord) { y1 = yScale(prevSplit.yCoord)+cfg.r; } } else if (split.yCoord < prevSplit.yCoord) { if (yScale.invert(y2) > prevSplit.yCoord) { y2 = yScale(prevSplit.yCoord)+cfg.r; } } else if (split.xCoord == prevSplit.xCoord) { // if we have this we probably don't need the above if (split.sideOfParent == 'larger') { y1 = yScale(prevSplit.yCoord)+cfg.r; } else { y2 = yScale(prevSplit.yCoord)+cfg.r; } } } } } } else if (split.dimension == 'y') { // console.log("split at y") // No previous split, go from margin to margin x1 = xScale(cfg.xDomain[0]); x2 = xScale(cfg.xDomain[1]); y1 = yScale(split.yCoord)+cfg.r; y2 = yScale(split.yCoord)+cfg.r; for (const [index, prevSplit] of prevSplits.entries()) { // update if there are previous splits if (prevSplit.dimension == 'x') { // check if the split is inside the interval of the previous split if (split.yCoord > Math.min(prevSplit.y1, prevSplit.y2) & split.yCoord < Math.max(prevSplit.y1, prevSplit.y2)) { // apply the new boundaries if (split.xCoord > prevSplit.xCoord) { if (xScale.invert(x1) < prevSplit.xCoord) { // update only if coordinate wasn't moved sufficiently before x1 = xScale(prevSplit.xCoord)-cfg.r; } } else if (split.xCoord < prevSplit.xCoord){ if (xScale.invert(x2) > prevSplit.xCoord) { x2 = xScale(prevSplit.xCoord)-cfg.r; } } else if (split.xCoord == prevSplit.xCoord) { // if we have this we probably don't need the above if (split.sideOfParent == 'larger') { x1 = xScale(prevSplit.xCoord)-cfg.r; } else { x2 = xScale(prevSplit.xCoord)-cfg.r; } } } } } } else { console.log("Error. split.dimension=", split.dimension); } // update the split coordinates split = updateSplitCoords(split, x1, x2, y1, y2) // draw the line svg.append("line") .attr("class", "split-line") .attr("id", `split-${split_i +1}`) .attr("x1", x1) .attr("y1", y1) .attr("x2", x2) .attr("y2", y2) .attr("stroke", color) // Use dynamically calculated color .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5"); // this is a copy of the function above. But could not put it in an own cell somehow function toggleParameterDisplay() { const currentSliderValue = nSplits.value.slider; d3.selectAll("*").filter(function() { const id = d3.select(this).attr("id"); if (id && id.startsWith("split-")) { const idNumber = parseInt(id.split("-")[1], 10); return !isNaN(idNumber); } return false; }).attr('display', function() { const idNumber = parseInt(d3.select(this).attr("id").split("-")[1], 10); return idNumber > currentSliderValue ? 'none' : 'block'; }); } toggleParameterDisplay() } }3a: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}; }3b:[] 2f:{"id":"3dff2fb265174430","slug":null,"title":"Interactive Decision Tree","thumbnail":"db7e1c36300e6f7c75363b1ff3cdad8958ef83a47cdce2d4b4e3d4bfb6d03c6c","access_level":"public","create_time":"$D2024-05-09T19:00:36.616Z","update_time":"$D2024-05-18T23:20:56.144Z","view_time":null,"first_public_time":"$D2024-05-09T19:00:36.616Z","has_unpublished_edits":null,"fork":{"id":"c500898bb6e3d8c3","slug":"interactive-lda-plot","title":"Interactive LDA plot","owner":{"id":"0c6e428fcfacb73e","login":"frederikho","name":"Frederik H."}},"stars":0,"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":4462,"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":"team","id":"0c6e428fcfacb73e","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":"starter_2024","role":"editor"},{"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Decision Tree","cells":[{"id":25,"value":"# Interactive Decision Tree\n\n\nClick to add and remove data points, use drag to move them. Change the population parameters and generate new data samples.\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 decisionTreePlot.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":"displaySettings = \n{\n const displaySettings = Inputs.form(\n {\n addDataOptions: Inputs.radio(\n [\"Red\", \"Blue\"],\n { label: \"Add data point\", value: \"Red\"}\n )\n \n // resetButton: Inputs.button(\"🗑 Remove all\", {\n // onClick: () => ldaPlot.reset()\n // }),\n },\n {\n template: (inputs) => htl.html`

\n ${Object.values(inputs)}\n

`\n }\n );\n \n \n return displaySettings\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"decisionTreePlot = buildPlot(data0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3490,"value":"nSplits = \n{\n const nSplits = Inputs.form(\n {\n slider: Inputs.range(\n [0, nSplitsInternal], \n {label: html`Max. number of splits`, step: 1, value: 4}\n )\n },\n {\n template: (inputs) => htl.html`

\n ${Object.values(inputs)}\n

`\n }\n );\n \n nSplits.addEventListener(\"change\", toggleParameterDisplay);\n\n function toggleParameterDisplay() {\n const currentSliderValue = nSplits.value.slider;\n d3.selectAll(\"*\").filter(function() {\n const id = d3.select(this).attr(\"id\");\n if (id && id.startsWith(\"split-\")) {\n const idNumber = parseInt(id.split(\"-\")[1], 10);\n return !isNaN(idNumber);\n }\n return false;\n }).attr('display', function() {\n const idNumber = parseInt(d3.select(this).attr(\"id\").split(\"-\")[1], 10);\n return idNumber > currentSliderValue ? 'none' : 'block';\n });\n }\n\n \n return nSplits\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4414,"value":"nSplitsInternal = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3029,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"mutable data0 = generateData(); ","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":"Issues:\n- \n","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":"$33","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"# Decision tree stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3441,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3910,"value":"function getBestAndRestSplits(data, parentSplit) {\n let bestSplit;\n let restSplits = [];\n\n // Iterate over each data point to calculate the splits\n for (let i = 0; i < data.length; i++) {\n const split = getBestSplit(data[i], parentSplit);\n \n // If it's the first split, initialize bestSplit\n if (!bestSplit) {\n bestSplit = split;\n } else {\n // Compare with the current best split\n if (split.entropyReduction > bestSplit.entropyReduction) {\n // If better, update bestSplit and move the previous bestSplit to restSplits\n restSplits.push(bestSplit);\n bestSplit = split;\n } else {\n // If not better, add to restSplits\n restSplits.push(split);\n }\n }\n }\n \n return { bestSplit, restSplits };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3938,"value":"function getParentSplitOfSplit(split, splits) {\n const parentSplitOfBestSplit = splits.find(thissplit => thissplit.id === split.parentSplit);\n\n // Check if parentSplitOfBestSplit exists\n if (!parentSplitOfBestSplit) {\n console.log('Error: Parent split not found.', split);\n }\n \n return parentSplitOfBestSplit;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4006,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3460,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4182,"value":"$39","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":"$3a","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":"$W3b","stdlib":"1"}} 30:"$2f:body"