29:null 2a:["$","title",null,{"children":"Reinforcement Learning | amigos | Observable"}] 2f:T14e2,viewof pseudoLabel = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 200) .attr('height', 200) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; svgContainer.attr("width", width) .attr("height", height) .attr("position", "relative"); const xScale = d3.scaleLinear() .domain([-8,8]) .range([margin.left + offset, innerWidth-offset]); const xAxis = d3.axisBottom(xScale); svgContainer.append("g") .attr("transform", `translate(0, ${innerHeight -0})`) .call(xAxis); const yScale = d3.scaleLinear() .domain([-8,8]) .range([innerHeight - offset, margin.top+offset+0]); const yAxis = d3.axisLeft(yScale); svgContainer.append("g") .attr("transform", `translate(${margin.left+0}, 0)`) .call(yAxis); // Add vertical line svgContainer.append("line") .attr("x1", xScale(0)) .attr("y1", margin.top + offset) .attr("x2", xScale(0)) .attr("y2", innerHeight - offset) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svgContainer.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels svgContainer.append("text") .attr("x", xScale(6)) .attr("y", yScale(-7.5)) .attr("text-anchor", "middle") .text("Característica 1") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px") .style("font-weight", "bold"); svgContainer.append("text") .attr("transform", `rotate(-90 ${xScale(-6.5)},${yScale(8)})`) .attr("x", xScale(-8.5)) .attr("y", yScale(8.5)) .attr("text-anchor", "middle") .text("Característica 2") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px") .style("font-weight", "bold"); //svgContainer.append("text") //.attr("x", xScale(4)) //.attr("y", yScale(8.5)) //.attr("text-anchor", "middle") //.text("Distribuição das features") //.style("font-family", 'Helvetica, Arial') //.style("font-size", "24px") //.style("font-weight", "bold"); const tooltip = background.append("div") .attr("class", "tooltip") .style("opacity", 0) .style("width","auto") .style("height","auto") .style("background","whitesmoke") .style("border","2px solid gray") .style("border-radius", "5px") .style("padding","5px") .style("font-size","12px") .style("position","absolute") .style("left","10px") .style("top","10px") .style("pointer-events","none"); svgContainer.selectAll("circle") .data(data_pseudo) .join("circle") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("cx", d => xScale(d.feature1)) .attr("cy", d => yScale(d.feature2)) .attr("r", 4) .attr("class", d => isNaN(d.class) ? "unlabeled" : d.class) .attr("name", d => isNaN(d.class) ? class_info["unlabeled"].name : class_info[d.class].name) .attr("fill", d => isNaN(d.class) ? class_info["unlabeled"].color : class_info[d.class].color) .attr("opacity", 0.7) //.attr("class", d => isNaN(d.class) ? "unlabeled" : "labeled") .style("cursor","pointer"); // svgContainer.selectAll("path") // .data(data_pseudo) // //.data(filter) // .join("path") // .attr("class", d => isNaN(d.class) ? "unlabeled" : `labeled class${d.class}`) // .attr("d", d => isNaN(d.class) ? class_info["unlabeled"].shape : class_info[d.class].shape) // Use the index to select the SVG file // .attr("transform", d => `translate(${xScale(d.feature1)- 10}, ${yScale(d.feature2) - 10})`) // .attr("cx", d => xScale(d.feature1)) // .attr("cy", d => yScale(d.feature2)) // .on("mouseover", handleMouseOver) // .on("mouseout", handleMouseOut) // .attr("fill", d => isNaN(d.class) ? class_info["unlabeled"].color : class_info[d.class].color) // .attr("opacity", 0.7) // .attr("stroke", "black") // .style("cursor","pointer"); // Mouseover event handler function handleMouseOver() { let d = d3.select(this); d.attr("fill","red"); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(() => { const className = d.attr("name"); const xValue = Math.round(xScale.invert(d.attr("cx")) * 100) / 100; const yValue = Math.round(yScale.invert(d.attr("cy")) * 100) / 100; return `${className}
Característica 1: ${xValue}
Característica 2: ${yValue}`; }) .style("left", d.attr("cx") + "px") .style("top", d.attr("cy") + "px"); } // Mouseout event handler function handleMouseOut() { let d = d3.select(this); d.attr("fill", d => isNaN(d.class) ? class_info["unlabeled"].color : class_info[d.class].color); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } svgContainer.selectAll(".labeled").raise(); return background.node(); }30:T607,viewof legend_pseudoLabel = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 150) .attr('height', 120) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const legend = svgContainer.append("g") .attr("class", "legend") .attr("transform", "translate(20, 30)"); const legendData = Object.entries(class_info).map(([classNumber, classInfo]) => ({ name: classInfo.name, color: classInfo.color, label: classInfo.label, path: classInfo.shape })); const legendCircleSize = 12; const legendSpacing = 6; const legendItems = legend.selectAll(".legend-itemMIAU") .data(legendData) .enter() .append("g") .attr("class", "legend-itemMIAU") .attr("transform", (d, i) => `translate(0, ${i * (legendCircleSize + legendSpacing)})`); legendItems.append("circle") .attr("cx", legendCircleSize / 2) .attr("cy", legendCircleSize / 2) .attr("r", legendCircleSize / 2) .attr("fill", d => d.color); legendItems.append("text") .attr("x", legendCircleSize + 4) .attr("y", legendCircleSize / 2 + 4) .text(d => d.name) .attr("class", "legend-label") .attr('font-family', 'Helvetica, Arial') .style("font-size", "12px"); const title = svgContainer.append('text') .attr('x', 15) .attr('y', 15) .attr('fill', 'black') .attr('font-family', 'Helvetica, Arial') .attr('font-weight', 'bold') .attr('font-size', '12px') .text('Classe das Árvores'); return background.node() }31:Tef7,viewof gaussian_mixture = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 200) .attr('height', 200) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; svgContainer.attr("width", width) .attr("height", height) .attr("position", "relative"); const xScale = d3.scaleLinear() .domain([-8,8]) .range([margin.left + offset, innerWidth-offset]); const xAxis = d3.axisBottom(xScale); svgContainer.append("g") .attr("transform", `translate(0, ${innerHeight -0})`) .call(xAxis); const yScale = d3.scaleLinear() .domain([-8,8]) .range([innerHeight - offset, margin.top+offset+0]); const yAxis = d3.axisLeft(yScale); svgContainer.append("g") .attr("transform", `translate(${margin.left+0}, 0)`) .call(yAxis); // Add vertical line svgContainer.append("line") .attr("x1", xScale(0)) .attr("y1", margin.top + offset) .attr("x2", xScale(0)) .attr("y2", innerHeight - offset) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svgContainer.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels svgContainer.append("text") .attr("x", xScale(6)) .attr("y", yScale(-7.5)) .attr("text-anchor", "middle") .text("Característica 1") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px") .style("font-weight", "bold"); svgContainer.append("text") .attr("transform", `rotate(-90 ${xScale(-6.5)},${yScale(8)})`) .attr("x", xScale(-8.5)) .attr("y", yScale(8.5)) .attr("text-anchor", "middle") .text("Característica 2") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px") .style("font-weight", "bold"); const tooltip = background.append("div") .attr("class", "tooltip") .style("opacity", 0) .style("width","auto") .style("height","auto") .style("background","whitesmoke") .style("border","2px solid gray") .style("border-radius", "5px") .style("padding","5px") .style("font-size","12px") .style("position","absolute") .style("left","10px") .style("top","10px") .style("pointer-events","none"); svgContainer.selectAll("circle") .data(multivariate_gaussian_mixture1) .join("circle") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("cx", d => xScale(d.feature1)) .attr("cy", d => yScale(d.feature2)) .attr("r", 4) .attr("class", d => d.class) .attr("fill", d => class_colors[d.class]) .attr("opacity", 0.7) .style("cursor","pointer"); // Mouseover event handler function handleMouseOver() { let d = d3.select(this); d.attr("fill","red"); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`${class_info[d.attr("class")].name}
Característica 1: ${Math.round(xScale.invert(d.attr("cx"))*100)/100}
Característica 2: ${Math.round(yScale.invert(d.attr("cy"))*100)/100}`) .style("left", d.attr("cx") + "px") .style("top", d.attr("cy") + "px"); } // Mouseout event handler function handleMouseOut() { let d = d3.select(this); d.attr("fill", d => class_colors[d.class]); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } return background.node(); }32:Td8c,legend_trees = { const background = d3.create('div') background.append("style").node().innerHTML = ` .legend-item.inactive>path{ fill: gray !important; } .legend-item{ cursor: pointer; } .legend-item:hover{ stroke: black; } ` const svgContainer = background.append('svg') .attr('width', 150) .attr('height', 150) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const legend = svgContainer.append("g") .attr("class", "legend") .attr("transform", "translate(20, 30)"); const legendData = Object.entries(class_info).map(([classNumber, classInfo]) => ({ name: classInfo.name, color: classInfo.color, label: classInfo.label, shape: classInfo.shape })); const legendRectSize = 18; const legendSpacing = 6; const legendItems = legend.selectAll(".legend-item") .data(legendData) .enter() .append("g") .attr("class", "legend-item") .attr("id", d => `${d.label.replace(/\s+/g, '').toLowerCase()}`) // Assigning id based on label .attr("transform", (d, i) => `translate(0, ${i * (legendRectSize + legendSpacing)})`) .attr("data-opacity", "1") // Initial opacity set to 1 (fully visible) .on("click", function () { const legendItem = d3.select(this); const currentOpacity = legendItem.attr("data-opacity"); const newOpacity = currentOpacity === "1" ? "0.5" : "1"; legendItem.attr("data-opacity", newOpacity); legendItem.selectAll("path").attr("opacity", newOpacity); legendItem.selectAll("text").attr("opacity", newOpacity); legendItem.node().classList.toggle("inactive") mutable activeClassesFromLegend = getActiveClassesFromLegend() //console.log(this.id); // d3.selectAll(`.${this.id}`) // //d3.selectAll(".class1") // .attr("opacity", function(){ // if (currentOpacity === "1"){ // return 0 // } else { // return 0.7 // } // }) }) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut); // Mouseover event handler function handleMouseOver() { d3.selectAll(`.${this.id}`) .attr("opacity", 1) .raise(); let lista = ["class1", "class2", "class3", "class4", "unlabeled"]; lista.splice(lista.indexOf(this.id),1); d3.selectAll("."+lista.join(", .")).attr("opacity", 0.2); } // MouseOut event handler function handleMouseOut() { let lista = ["class1", "class2", "class3", "class4", "unlabeled"]; d3.selectAll("."+lista.join(", .")) .attr("opacity", 0.7); } legendItems.append("path") .attr("d", d => d.shape) .attr("width", legendRectSize) .attr("height", legendRectSize) .attr("fill", d => d.color) .attr("stroke", "black") .attr("opacity", 1); legendItems.append("text") .attr("x", legendRectSize + 4) .attr("y", legendRectSize - 4) .text(d => d.name) .attr("class", "legend-label") .attr('font-family', 'Helvetica, Arial') .style("font-size", "12px") .attr("opacity", 1); const title = svgContainer.append('text') .attr('x', 15) .attr('y', 15) .attr('fill', 'black') .attr('font-family', 'Helvetica, Arial') .attr('font-weight', 'bold') .attr('font-size', '12px') .text('Classe das Árvores'); mutable activeClassesFromLegend = ["class1", "class2", "class3", "class4", "unlabeled"]; return background.node() }33:Tc10,viewof matrix = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 200) .attr('height', 200) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; svgContainer.attr("width", width) .attr("height", height) .attr("position", "relative"); const deepColor = "#002c07" const colorScale = d3.scaleSequential() .interpolator(d3.interpolateGreens) .domain([0, 350]); // Adjust the domain according to your data range for (let i=1; i< 5 ; i++){ svgContainer.append("text") .attr("x", 100*i - 15) .attr("y", 55) .text("Classe "+ i ) .style('fill', deepColor) .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", 5) .attr("y", 100*i + 55) .attr("transform", "rotate(-90, 35, " + (100 * i + 35) + ")") .text("Classe "+ i ) .style('fill', deepColor) .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); } //titles svgContainer.append("text") .attr("x", 150) .attr("y", 25) .text("Classes preditas") .style('fill', deepColor) .style("font-family", 'Helvetica, Arial') .style("font-size", "30px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", -200) .attr("y", 125) .attr("transform", "rotate(-90, 35, " + (100 + 35) + ")") .text("Classes reais" ) .style('fill', deepColor) .style("font-family", 'Helvetica, Arial') .style("font-size", "30px") .style("font-weight", "bold"); svgContainer.selectAll("rect") .data(data_matrix) .join("rect") .attr("x", d => d.i%4 * 100 + 75) .attr("y", d => d.j%4 * 100 + 75) .attr("width", 100) .attr("height", 100) .attr("fill", d => colorScale(d.value)) .attr("stroke", deepColor) .attr("stroke-width", 2) .attr("opacity", 1) .style("cursor","pointer") .each(function(d) { const rect = d3.select(this); // Append element and set text content svgContainer.append("text") .attr("x", +rect.attr("x") + 50) // Adjust the x-coordinate to center the text .attr("y", +rect.attr("y") + 50) // Adjust the y-coordinate to center the text .attr("text-anchor", "middle") // Center-align the text .attr("alignment-baseline", "middle") // Vertically center the text .style("fill", "#f7fcf5") .style('stroke', deepColor) .style("stroke-width", "1.5") .style("font-family", 'Helvetica, Arial') .style("font-size", "25px") // Set the font size .style("font-weight", "bold") // Set the font weight .text(d.value); }); return background.node(); }34:T61e,viewof matrix_legend = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 250) .attr('height', 500) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const deepColor = "#002c07" const colorScale = d3.scaleSequential(d3.interpolateGreens) .domain([0, 350]); const legend = svgContainer.append("g") .attr("class", "legend") .attr("transform", "translate(20, 20)"); const gradient = legend.append("linearGradient") .attr("id", "color-gradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", 420) .attr("x2", 0) .attr("y2", 20); gradient.selectAll("stop") .data(d3.range(0, 1.01, 0.01)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(d * 350)); legend.append("rect") .attr("x", 20) .attr("y", 20) .attr("width", 20) .attr("height", 400) .style("fill", "url(#color-gradient)"); for (let i=0; i< 8 ; i++){ svgContainer.append("text") .attr("x", 65) .attr("y", 445 - 50*(8/7)*i) .text(50*i) .style('fill', deepColor) .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); } const title = svgContainer.append('text') .attr('x', 15) .attr('y', 15) .attr('fill', deepColor) .attr('font-family', 'Helvetica, Arial') .attr('font-weight', 'bold') .attr('font-size', '20px') .text('Número de atribuições'); return background.node() } 35:Te76,viewof draggableNormals1 = (() => { // Definir os parâmetros da mistura de n normais let means = [meanA]; let variances = [varA]; let weightRatio = 1; let weights = []; for (let i = 0; i < means.length; i++) { if (i === 0) { weights.push(weightRatio); } else if (i === 1) { weights.push(1 - weightRatio); } else { weights.push(0); } } // Criar uma instância da classe NormalMixture const normalMixture = new NormalMixture(); // Criar um array de valores x const x_values = d3.range(-15, 15, 0.1); // Calcular os valores y da PDF da mistura de 3 normais const y_values = normalMixture.pdf(x_values, means, variances, weights); // Configurar as dimensões do gráfico const width = 400; const height = 150; const margin = { top: 0, right: 30, bottom: 2, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const offset = 0; const xScale = d3.scaleLinear() .domain([-15,15]) .range([margin.left + offset, innerWidth-offset]); const yScale = d3.scaleLinear() .domain([0,0.6]) .range([innerHeight - offset, margin.top+offset+0]); // Criar o elemento SVG const svg = d3.create('svg') // .attr("viewBox", [0, 0, width, height]) .attr('width', width) .attr('height', height) .attr("position", "relative"); // // Criar os eixos x e y manualmente // const xAxis = d3.axisBottom(xScale); // const yAxis = d3.axisLeft(yScale); // // Adicionar o eixo x // svg.append('g') // .attr('transform', `translate(0, ${height - margin.bottom})`) // .call(xAxis); // // Adicionar o eixo y // svg.append('g') // .attr('transform', `translate(${margin.left}, 0)`) // .call(yAxis); // Add vertical line svg.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0.6)) .attr("x2", xScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svg.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels // svg.append("text") // .attr("x", xScale(7)) // .attr("y", yScale(0.025)) // .attr("text-anchor", "middle") // .text("Valores observados") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // svg.append("text") // .attr("transform", `rotate(-90)`) // .attr("x", -height / 2 + 10) // .attr("y", margin.left + 20) // .attr("text-anchor", "middle") // .text("Densidade de probabilidade") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // Criar a função para gerar a linha da curva const lineGenerator = d3.line() .x((d, i) => xScale(x_values[i])) .y(d => yScale(d)) .curve(d3.curveMonotoneX); const colors = Object.values(normal_colors); for (let i = 0; i < means.length; i++) { // uma nova curva para uma das normais: const mean = [means[i]]; const variance = [variances[i]]; const weight = [weights[i]]; const n_y = normalMixture.pdf(x_values, mean, variance, weight); // Adicionar a curva da PDF da normal svg.append('path') .datum(n_y) .attr('fill', 'none') .attr('stroke', "#00520d") .attr('stroke-width', 3) .attr('d', lineGenerator) .attr("class", "curve_samples"); } return svg.node(); })(); 36:Tcf1,normalcontrollers1 = { const radius = 7; // Definir os parâmetros da mistura de n normais let means = [getSamplesParams().mean1]; let variances = [getSamplesParams().var1]; let weights = [1]; // Configurar as dimensões do gráfico const width = 400; const height = 150; const margin = { top: 0, right: 30, bottom: 2, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const offset = 0; const xScale = d3.scaleLinear() .domain([-15,15]) .range([margin.left + offset, innerWidth-offset]); const yScale = d3.scaleLinear() .domain([0,0.6]) .range([innerHeight - offset, margin.top+offset+0]); // Criar os eixos x e y manualmente // const xAxis = d3.axisBottom(xScale); // const yAxis = d3.axisLeft(yScale); // Criar o elemento SVG const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr("viewBox", [0, 0, width, height]) .attr("id","normalControllers"); // // Adicionar o eixo x // svg.append('g') // .attr('transform', `translate(0, ${height - margin.bottom})`) // .call(xAxis); // // Adicionar o eixo y // svg.append('g') // .attr('transform', `translate(${margin.left}, 0)`) // .call(yAxis); // Add vertical line svg.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0.6)) .attr("x2", xScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svg.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels // svg.append("text") // .attr("x", xScale(7)) // .attr("y", yScale(0.025)) // .attr("text-anchor", "middle") // .text("Valores observados") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // svg.append("text") // .attr("transform", `rotate(-90)`) // .attr("x", -height / 2 + 10) // .attr("y", margin.left + 20) // .attr("text-anchor", "middle") // .text("Densidade de probabilidade") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // ------------------------------------------ const colors = Object.values(normal_colors); // Calcular as coordenadas (mean, pdf(mean)) para cada normal const peakCoordinates = means.map((mean, i) => { const variance = variances[i]; const weight = weights[i]; const pdfPeak = normalPDF(mean, mean, Math.sqrt(variance)) * weight; return [mean, pdfPeak]; }); // ------------------------------------------ const circles = d3.range(means.length).map(i => ({ x: xScale(peakCoordinates[i][0]), y: yScale(peakCoordinates[i][1]), i: i, refto: "normal1" })); svg.selectAll("circle") .data(circles) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", "#00520d") .style("cursor","move") .call(drag); return svg.node(); }37:Te84,viewof draggableNormals2 = (() => { // Definir os parâmetros da mistura de n normais let means = [meanB]; let variances = [varB]; let weightRatio = 1; let weights = []; for (let i = 0; i < means.length; i++) { if (i === 0) { weights.push(weightRatio); } else if (i === 1) { weights.push(1 - weightRatio); } else { weights.push(0); } } // Criar uma instância da classe NormalMixture const normalMixture = new NormalMixture(); // Criar um array de valores x const x_values = d3.range(-15, 15, 0.1); // Calcular os valores y da PDF da mistura de 3 normais const y_values = normalMixture.pdf(x_values, means, variances, weights); // Configurar as dimensões do gráfico const width = 400; const height = 150; const margin = { top: 0, right: 30, bottom: 2, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const offset = 0; const xScale = d3.scaleLinear() .domain([-15,15]) .range([margin.left + offset, innerWidth-offset]); const yScale = d3.scaleLinear() .domain([0,0.6]) .range([innerHeight - offset, margin.top+offset+0]); // Criar o elemento SVG const svg = d3.create('svg') // .attr("viewBox", [0, 0, width, height]) .attr('width', width) .attr('height', height) .attr("position", "relative"); // // Criar os eixos x e y manualmente // const xAxis = d3.axisBottom(xScale); // const yAxis = d3.axisLeft(yScale); // // Adicionar o eixo x // svg.append('g') // .attr('transform', `translate(0, ${height - margin.bottom})`) // .call(xAxis); // // Adicionar o eixo y // svg.append('g') // .attr('transform', `translate(${margin.left}, 0)`) // .call(yAxis); // Add vertical line svg.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0.6)) .attr("x2", xScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svg.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", margin.left + innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels // svg.append("text") // .attr("x", xScale(7)) // .attr("y", yScale(0.025)) // .attr("text-anchor", "middle") // .text("Valores observados") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // svg.append("text") // .attr("transform", `rotate(-90)`) // .attr("x", -height / 2 + 10) // .attr("y", margin.left + 20) // .attr("text-anchor", "middle") // .text("Densidade de probabilidade") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // Criar a função para gerar a linha da curva const lineGenerator = d3.line() .x((d, i) => xScale(x_values[i])) .y(d => yScale(d)) .curve(d3.curveMonotoneX); const colors = Object.values(normal_colors); for (let i = 0; i < means.length; i++) { // uma nova curva para uma das normais: const mean = [means[i]]; const variance = [variances[i]]; const weight = [weights[i]]; const n_y = normalMixture.pdf(x_values, mean, variance, weight); // Adicionar a curva da PDF da normal svg.append('path') .datum(n_y) .attr('fill', 'none') .attr('stroke', "#00520d") .attr('stroke-width', 3) .attr('d', lineGenerator) .attr("class", "curve_samples"); } return svg.node(); })(); 38:Tccb,normalcontrollers2 = { const radius = 7; let means = [getSamplesParams().mean2]; let variances = [getSamplesParams().var2]; let weights = [1]; // Configurar as dimensões do gráfico const width = 400; const height = 150; const margin = { top: 0, right: 30, bottom: 2, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const offset = 0; const xScale = d3.scaleLinear() .domain([-15,15]) .range([margin.left + offset, innerWidth-offset]); const yScale = d3.scaleLinear() .domain([0,0.6]) .range([innerHeight - offset, margin.top+offset+0]); // Criar os eixos x e y manualmente // const xAxis = d3.axisBottom(xScale); // const yAxis = d3.axisLeft(yScale); // Criar o elemento SVG const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr("viewBox", [0, 0, width, height]) .attr("id","normalControllers"); // // Adicionar o eixo x // svg.append('g') // .attr('transform', `translate(0, ${height - margin.bottom})`) // .call(xAxis); // // Adicionar o eixo y // svg.append('g') // .attr('transform', `translate(${margin.left}, 0)`) // .call(yAxis); // Add vertical line svg.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0.6)) .attr("x2", xScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svg.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", margin.left + innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels // svg.append("text") // .attr("x", xScale(7)) // .attr("y", yScale(0.025)) // .attr("text-anchor", "middle") // .text("Valores observados") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // svg.append("text") // .attr("transform", `rotate(-90)`) // .attr("x", -height / 2 + 10) // .attr("y", margin.left + 20) // .attr("text-anchor", "middle") // .text("Densidade de probabilidade") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // ------------------------------------------ const colors = Object.values(normal_colors); // Calcular as coordenadas (mean, pdf(mean)) para cada normal const peakCoordinates = means.map((mean, i) => { const variance = variances[i]; const weight = weights[i]; const pdfPeak = normalPDF(mean, mean, Math.sqrt(variance)) * weight; return [mean, pdfPeak]; }); // ------------------------------------------ const circles = d3.range(means.length).map(i => ({ x: xScale(peakCoordinates[i][0]), y: yScale(peakCoordinates[i][1]), i: 1, refto: "normal1" })); svg.selectAll("circle") .data(circles) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", "#00520d") .style("cursor","move") .call(drag); return svg.node(); }39:T143b,viewof scatterOfSamples = { const background = d3.select(html`

`); const offset = 0 const width = 400; const height = 400; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svgContainer = background.append('svg') .attr('width', 400) .attr('height', 400) .style('background-color', '#FFFFFF'); svgContainer.attr("width", width) .attr("height", height) .attr("position", "relative"); const xScale = d3.scaleLinear() .domain([-15,15]) .range([margin.left + offset, innerWidth-offset]); const xAxis = d3.axisBottom(xScale); svgContainer.append("g") .attr("transform", `translate(0, ${innerHeight -0})`) .call(xAxis); const yScale = d3.scaleLinear() .domain([-15,15]) .range([innerHeight - offset, margin.top+offset+0]); const yAxis = d3.axisLeft(yScale); svgContainer.append("g") .attr("transform", `translate(${margin.left+0}, 0)`) .call(yAxis); // Add vertical line svgContainer.append("line") .attr("x1", xScale(0)) .attr("y1", margin.top + offset) .attr("x2", xScale(0)) .attr("y2", innerHeight - offset) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svgContainer.append("line") .attr("x1", margin.left + offset) .attr("y1", yScale(0)) .attr("x2", innerWidth - offset) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels svgContainer.append("text") .attr("x", xScale(15)) .attr("y", yScale(-14.5)) .attr("text-anchor", "middle") .text("X") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px"); svgContainer.append("text") .attr("x", xScale(-14.5)) .attr("y", yScale(15)) .attr("text-anchor", "middle") .text("Y") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px"); const tooltip = background.append("div") .attr("class", "tooltip") .style("opacity", 0) .style("width","auto") .style("height","auto") .style("background","whitesmoke") .style("border","2px solid gray") .style("border-radius", "5px") .style("padding","5px") .style("font-size","12px") .style("position","absolute") .style("left","10px") .style("top","10px") .style("pointer-events","none"); var densityData = d3.contourDensity() .x(function(d) { return xScale(d.x); }) // x and y = column name in .csv input data .y(function(d) { return yScale(d.y); }) .size([width, height]) .bandwidth(50) // smaller = more precision in lines = more lines (gRandomPoints) svgContainer.selectAll("path") .data(densityData) .enter() .append("path") .attr("d", d3.geoPath()) .attr("fill", "none") .attr("stroke", "#69b3a2") .attr("stroke-linejoin", "round") // const background = d3.select("#samples_background") // const svgContainer = background.select("svg") // const offset = 0 // const width = 400; // const height = 400; // const margin = { top: 30, right: 30, bottom: 30, left: 30 }; // const innerWidth = width - margin.left - margin.right; // const innerHeight = height - margin.top - margin.bottom; // const tooltip = background.select(".tooltip") // const xScale = d3.scaleLinear() // .domain([-15,15]) // .range([margin.left + offset, innerWidth-offset]); // const yScale = d3.scaleLinear() // .domain([-15,15]) // .range([innerHeight - offset, margin.top+offset+0]); const t = svgContainer.transition() .duration(200); svgContainer.selectAll("circle") .data(gRandomPoints) .join( enter => enter.append("circle") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 2) .attr("fill", "#00520d") .attr("opacity", 0.4) .style("cursor","pointer") .call(enter => enter.transition(t) .attr("opacity", 0.7) .attr("r", 4) ), update => update .attr("fill", "green"), exit => exit .attr("fill", "#000") .call(exit => exit.transition(t) .attr("y", 30) .remove()) ); // Mouseover event handler function handleMouseOver() { let d = d3.select(this); d.attr("fill","#33FF77"); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`X: ${xScale.invert(d.attr("cx"))}
Y: ${yScale.invert(d.attr("cy"))}`) .style("left", d.attr("cx") + "px") .style("top", d.attr("cy") + "px"); } // Mouseout event handler function handleMouseOut() { let d = d3.select(this); d.attr("fill", "#00520d"); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } return background.node() }3a:Tc0a,normalcontrollersMix= { const radius = 7; // Definir os parâmetros da mistura de n normais let means = [getMixParams().mean1, getMixParams().mean2]; let variances = [getMixParams().var1,getMixParams().var2]; let weights = [weight, 1-weight] const normal_configuration = normalMixture_configuration; const width = normal_configuration.width; const height = normal_configuration.height; const margin = normal_configuration.margin; const innerWidth = normal_configuration.innerWidth; const innerHeight = normal_configuration.innerHeight; const offset = normal_configuration.offset; const side_padding = normal_configuration.side_padding; const topbottom_padding = normal_configuration.topbottom_padding; const xScale = normal_configuration.xScale; const yScale = normal_configuration.yScale; // Criar o elemento SVG const svg = d3.create('svg') .attr('width', width) .attr('height', height) .attr("viewBox", [0, 0, width, height]) .attr("id","normalControllers2"); // Add vertical line svg.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0.6)) .attr("x2", xScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svg.append("line") .attr("x1", margin.left) .attr("y1", yScale(0)) .attr("x2", innerWidth) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels // svg.append("text") // .attr("x", xScale(7)) // .attr("y", yScale(0.025)) // .attr("text-anchor", "middle") // .text("Valores observados") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // svg.append("text") // .attr("transform", `rotate(-90)`) // .attr("x", -height / 2 + 10) // .attr("y", margin.left + 20) // .attr("text-anchor", "middle") // .text("Densidade de probabilidade") // .style("font-family", 'Helvetica, Arial') // .style("font-size", "16px") // .style("font-weight", "bold"); // ------------------------------------------ const colors = Object.values(normal_colors); // Calcular as coordenadas (mean, pdf(mean)) para cada normal const peakCoordinates = means.map((mean, i) => { const variance = variances[i]; const weight = weights[i]; const pdfPeak = normalPDF(mean, mean, Math.sqrt(variance)) * weight; return [mean, pdfPeak]; }); // ------------------------------------------ const circles = d3.range(means.length).map(i => ({ x: xScale(peakCoordinates[i][0]), y: yScale(peakCoordinates[i][1]), i: i, refto: "normal2" })); svg.selectAll("circle") .data(circles) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", (d, i) => colors[i]) .call(drag); return svg.node(); }3b:Tfc4,viewof normalMixturePlot = { // Definir os parâmetros da mistura de n normais //let means = species_params.map(d => d.mean); //let variances = species_params.map(d => d.var); let means = [meanC, meanD] let variances = [varC, varD] let weights = []; for (let i=0; i< means.length ; i++) { //if(i < limit_species){ if(i == 0){ weights.push(weight) }else if(i==1){ weights.push(1 - weight) }else{ weights.push(0) } } // Criar uma instância da classe NormalMixture const normalMixture = new NormalMixture(); // Criar um array de valores x const x = d3.range(-18, 18, 0.1); // Calcular os valores y da PDF da mistura de 3 normais const y = normalMixture.pdf(x, means, variances, weights); const normal_configuration = normalMixture_configuration; const width = normal_configuration.width; const height = normal_configuration.height; const margin = normal_configuration.margin; const innerWidth = normal_configuration.innerWidth; const innerHeight = normal_configuration.innerHeight; const offset = normal_configuration.offset; const side_padding = normal_configuration.side_padding; const topbottom_padding = normal_configuration.topbottom_padding; const xScale = normal_configuration.xScale; const yScale = normal_configuration.yScale; // Criar o elemento SVG const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Add vertical line svg.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(0.6)) .attr("x2", xScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add horizontal line svg.append("line") .attr("x1", margin.left) .attr("y1", yScale(0)) .attr("x2", innerWidth) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("opacity", 0.5); // Add text labels svg.append("text") .attr("x", xScale(7)) .attr("y", yScale(0.025)) .attr("text-anchor", "middle") .text("Valores observados") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px") .style("font-weight", "bold"); svg.append("text") .attr("transform", `rotate(-90)`) .attr("x", -height / 2 + 10) .attr("y", margin.left + 20) .attr("text-anchor", "middle") .text("Densidade de probabilidade") .style("font-family", 'Helvetica, Arial') .style("font-size", "16px") .style("font-weight", "bold"); // Criar a função para gerar a linha da curva const lineGenerator = d3.line() .x((d, i) => xScale(x[i])) .y(d => yScale(d)) .curve(d3.curveMonotoneX); const colors = Object.values(normal_colors) for (let i=0; i < means.length; i++){ // uma nova curva para uma das normais: const mean = [means[i]]; const variance = [variances[i]]; const weight = [weights[i]]; const n_y = normalMixture.pdf(x, mean, variance, weight); // Adicionar a curva da PDF da normal svg.append('path') .datum(n_y) // .attr('fill', 'none') .attr('stroke', colors[i]) .attr('stroke-width', 3) .attr('d', lineGenerator) .attr("id", "normal_"+i ); } // Adicionar a curva da PDF da mistura de 3 normais svg.append('path') .datum(y) // .attr('fill', 'none') .attr('stroke', d => calculateStrokeColor(colors[0], colors[1], weight)) .attr('stroke-width', 5) .attr('d', lineGenerator) .attr("id", "normal_sum"); // Criar os eixos x e y manualmente const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); // Adicionar o eixo x svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom - margin.top})`) .call(xAxis); // Adicionar o eixo y svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis); return svg.node(); } 3c:T68a,viewof legend_normalmixture = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 150) .attr('height', 120) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const legend = svgContainer.append("g") .attr("class", "legend") .attr("transform", "translate(20, 30)"); // Define the legend data const legendData = [ { label: "1ª normal", color: normal_colors["normal1"] }, { label: "2ª normal", color: normal_colors["normal2"] }, { label: "Mistura", color: normal_colors["mixture"] } ]; // Set the size and spacing for the legend const legendRectSize = 18; const legendSpacing = 4; // Add circles to the legend const legendItems = legend.selectAll(".legend-itemMixture") .data(legendData) .enter() .append("g") .attr("class", "legend-itemMixture") .attr("transform", (d, i) => `translate(0, ${i * (legendRectSize + legendSpacing)})`); legendItems.append("circle") .attr("cx", legendRectSize / 2) .attr("cy", legendRectSize / 2) .attr("r", legendRectSize / 2) .attr("fill", d => d.color); // Add labels to the legend legendItems.append("text") .attr("x", legendRectSize + legendSpacing) .attr("y", legendRectSize / 2) .attr("dy", "0.35em") .text(d => d.label) .attr("font-family", 'Helvetica, Arial') .style("font-size", "12px"); const title = svgContainer.append('text') .attr('x', 15) .attr('y', 15) .attr('fill', 'black') .attr('font-family', 'Helvetica, Arial') .attr('font-weight', 'bold') .attr('font-size', '12px') .text('Distribuições'); return background.node() }3d:T18a1,trees = { const background = d3.select("#trees_div"); if (background.select('svg#trees_svg').node()){ background.select('svg#trees_svg ').remove() } const offset = 0 const width = 1000 const height = 500 const proportionX = 1.5; const proportionY = 1; background.style.width = toString(width) + "px" background.style.height = toString(height) + "px" const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svgContainer = background.append('svg') .attr("id", "trees_svg") // .attr('width', width) // .attr('height', height) .style('background-color', '#FFFFFF') .attr("position", "relative"); const xScale = d3.scaleLinear() .domain([0, 100*proportionX]) .range([margin.left + 50, innerWidth-offset+50]); const yScale = d3.scaleLinear() .domain([0,100*proportionY]) .range([innerHeight - offset, margin.top+offset+0]); svgContainer.append("rect") .attr("x", xScale(-5)) .attr("y", yScale(105)) .attr("width", (xScale(105) - xScale(-5))) .attr("height", (yScale(-5) - yScale(105))) .attr("fill", "#c2f0c2") .attr("stroke", "#6a9c6a") .attr("stroke-width", 2) .attr("opacity", 1); const tooltip = background.select(".tooltip") // Add vertical line svgContainer.append("line") .attr("x1", xScale(0)) .attr("y1", yScale(-5)) .attr("x2", xScale(0)) .attr("y2", yScale(105)) .attr("stroke", "#6a9c6a") .attr("stroke-width", 2) .attr("opacity", 0.5); svgContainer.append("line") .attr("x1", xScale(100)) .attr("y1", yScale(-5)) .attr("x2", xScale(100)) .attr("y2", yScale(105)) .attr("stroke", "#6a9c6a") .attr("stroke-width", 2) .attr("opacity", 0.5); // Add horizontal line svgContainer.append("line") .attr("x1", xScale(-5)) .attr("y1", yScale(0)) .attr("x2", xScale(105)) .attr("y2", yScale(0)) .attr("stroke", "#6a9c6a") .attr("stroke-width", 2) .attr("opacity", 0.5); svgContainer.append("line") .attr("x1", xScale(-5)) .attr("y1", yScale(100)) .attr("x2", xScale(105)) .attr("y2", yScale(100)) .attr("stroke", "#6a9c6a") .attr("stroke-width", 2) .attr("opacity", 0.5); svgContainer.append("text") .attr("x", xScale(0)) .attr("y", yScale(-10)) .attr("text-anchor", "middle") .text("0") .style('fill', '#6a9c6a') .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", xScale(-8)) .attr("y", yScale(-1)) .attr("text-anchor", "middle") .text("0") .style('fill', '#6a9c6a') .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", xScale(102.5)) .attr("y", yScale(-4)) .attr("text-anchor", "middle") .text("X") .style('fill', '#6a9c6a') .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", xScale(-2.5)) .attr("y", yScale(100.75)) .attr("text-anchor", "middle") .text("Y") .style('fill', '#6a9c6a') .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", xScale(100)) .attr("y", yScale(-10)) .attr("text-anchor", "middle") .text("150") .style('fill', '#6a9c6a') .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", xScale(-10)) .attr("y", yScale(99)) .attr("text-anchor", "middle") .text("100") .style('fill', '#6a9c6a') .style("font-family", 'Helvetica, Arial') .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.selectAll("path") //.data(data_trees) .data(filter) .join("path") .attr("class", d => isNaN(d.class) ? "unlabeled" : `class${d.class}`) .attr("d", d => isNaN(d.class) ? class_info["unlabeled"].shape : class_info[d.class].shape) // Use the index to select the SVG file .attr("name", d => isNaN(d.class) ? class_info["unlabeled"].name : class_info[d.class].name) .attr("transform", d => `translate(${xScale(d.X)- 10}, ${yScale(d.Y) - 10})`) .attr("cx", d => xScale(d.X)) .attr("cy", d => yScale(d.Y)) .attr('feature1', d => d.feature1) .attr('feature2', d => d.feature2) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("fill", d => isNaN(d.class) ? class_info["unlabeled"].color : class_info[d.class].color) .attr("opacity", 0.7) .attr("stroke", "black") .style("cursor","pointer"); svgContainer.selectAll("#trees_svg>path:not(.unlabeled)").raise(); // Mouseover event handler function handleMouseOver() { let d = d3.select(this); d.attr("fill","red"); const className = d.attr("name"); const cx = d.attr("cx") const cy = d.attr("cy") const xValue = Math.round(xScale.invert(cx) * 100 * proportionX) / 100; const yValue = Math.round(yScale.invert(cy) * 100 * proportionY) / 100; const f1Value = Math.round(d.attr("feature1")*100)/100; const f2Value = Math.round(d.attr("feature2")*100)/100; if (cx && cy){ tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(() => { return `${className}
X: ${xValue}
Y: ${yValue}
Característica 1: ${f1Value}
Característica 2: ${f2Value}`; }) .style("transform", "translate(10px, 10px)") .style("left", `${cx}px`) .style("top", `${cy}px`); } } // Mouseout event handler function handleMouseOut() { let d = d3.select(this); d.attr("fill", d => isNaN(d.class) ? class_info["unlabeled"].color : class_info[d.class].color); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } return background.node(); }3e:Tb77,class_info = { var class_info = { "1": { "name": "Jacarandá", "label": "Class 1", "color": "#460155", "shape": "M6.35,12.66C4,14.12,2.91,13.82,2.05,11.52c-.22-.6-.88-1.2-.8-1.73A15.52,15.52,0,0,1,2.46,5.26c.59-1.18,2.24-1.83,3.06-3.1A.54.54,0,0,1,5.87,2,4.67,4.67,0,0,0,9.13.35a1.32,1.32,0,0,1,1.2-.29c1.09.77,2.31.59,3.49.75a1.42,1.42,0,0,1,.78.47A17,17,0,0,1,17.3,4.5a11.08,11.08,0,0,1,1.45,4.64c0,1.2-.45,2.48-.39,3.78,0,.39-.49,1-.9,1.18a3.81,3.81,0,0,1-5-1.7C7.94,13,6.29,15.66,7.76,20H5.26C5.12,18.19,5,16.43,6,14.75A5.77,5.77,0,0,0,6.35,12.66Zm3-1.83-.9,1.85.22.2,2.24-1.62Z"}, // Roxo "2": {"name": "Cedro", "label": "Class 2", "color": "#336991", "shape": "M12.12,2.08c2.27.15,3,1,2.84,3.2a1.15,1.15,0,0,0,.48.85,1.76,1.76,0,0,1,1,2,1.13,1.13,0,0,0,.08.75c1,1.83.95,2.37-.61,3.65a3.31,3.31,0,0,1,.34,1.05c0,.44-.08,1.19-.32,1.27-1.24.42-1.63,1.73-2.6,2.34a6,6,0,0,1-2.15.3L11.41,20H9.12V17.54a7,7,0,0,1-2.28-.79A14.87,14.87,0,0,0,4.4,14.66a1.46,1.46,0,0,1-.53-1.21,6.57,6.57,0,0,0-.17-2.56A7.38,7.38,0,0,0,3,8.75c-.5-.78,0-1.57.57-2.18a6.83,6.83,0,0,1,1-.71,2.53,2.53,0,0,1,.89-2.92c.65-.57,1.21-1.35,1.94-2C9.15-.62,11.28-.24,12.12,2.08Z"}, // Azul "3": { "name": "Carvalho", "label": "Class 3", "color": "#30b678", "shape": "M10.19,9l.24,4.15,1.3-.8c-.4-2.9.53-4.69,2.82-5.52,1.51-.55,2.86,0,3.87,1.62s1.07,3.31,0,4.32a4.84,4.84,0,0,1-6.15.13,2.68,2.68,0,0,0-1.49,3c.13,1.28.29,2.56.44,3.9l-1,.13c-.86.12-1.24-.11-1.13-1.12a17.88,17.88,0,0,0,0-3.43,3.41,3.41,0,0,0-1.55-2.79C5.19,14,3.54,14,1.94,12.56S.35,8.26,1.86,7A3,3,0,0,1,4,6.43,5.2,5.2,0,0,1,7.84,9a3.38,3.38,0,0,1,.32,2.07C8,12.28,7.92,12.27,9.42,13c0-1.39.07-2.64.07-3.9,0-.12-.25-.25-.4-.35a6.26,6.26,0,0,1-2.9-5.32C6.05,1.62,7.55.32,9.84,0A3.4,3.4,0,0,1,13.7,2.69,5.45,5.45,0,0,1,10.19,9Z"}, // Verde "4": { "name": "Pinheiro", "label": "Class 4", "color": "#ffe51f", "shape": "M6.58,12.51l-2.65-.18c1.31-1.72,2.42-3.19,3.68-4.87l-2.44.18C6.8,4.94,8.28,2.5,9.76.07L10.21,0l4.68,7.67-2.48-.24,3.66,4.86-2.6.25c.85,1.29,1.63,2.45,2.37,3.63a3.22,3.22,0,0,1,.22.95,3,3,0,0,1-1,0c-.89-.26-1.77-.6-2.65-.92s-1.19,0-1.12.86a5.4,5.4,0,0,0,.09.58c.3,2.57.89,2.27-2.09,2.32-.85,0-1-.35-.87-1.08.1-.53.19-1.08.24-1.62.09-1.19-.12-1.37-1.23-1-.89.28-1.76.64-2.65.92a2.24,2.24,0,0,1-.77,0c0-.29-.06-.63.07-.85C4.85,15.11,5.66,13.91,6.58,12.51Z"}, // Amarelo "unlabeled": { "name": "Não classificado", "label": "Unlabeled", "color": "#AAAAAA", "shape": "M10,4a6,6,0,1,0,6,6A6,6,0,0,0,10,4Zm-.14,9.14a.66.66,0,1,1,.66-.66A.66.66,0,0,1,9.86,13.14ZM11,10.08a1.57,1.57,0,0,0-.63,1.12H9.3a2.44,2.44,0,0,1,1-1.72c.36-.35.67-.64.67-1.06A.82.82,0,0,0,10,7.58a1.17,1.17,0,0,0-1.15.85L7.88,8A2.21,2.21,0,0,1,10,6.53a1.85,1.85,0,0,1,2,1.88C12,9.2,11.47,9.63,11,10.08Z"} }; return class_info; }3f:T982,class_shapes = { var class_shapes = { "1": "M6.35,12.66C4,14.12,2.91,13.82,2.05,11.52c-.22-.6-.88-1.2-.8-1.73A15.52,15.52,0,0,1,2.46,5.26c.59-1.18,2.24-1.83,3.06-3.1A.54.54,0,0,1,5.87,2,4.67,4.67,0,0,0,9.13.35a1.32,1.32,0,0,1,1.2-.29c1.09.77,2.31.59,3.49.75a1.42,1.42,0,0,1,.78.47A17,17,0,0,1,17.3,4.5a11.08,11.08,0,0,1,1.45,4.64c0,1.2-.45,2.48-.39,3.78,0,.39-.49,1-.9,1.18a3.81,3.81,0,0,1-5-1.7C7.94,13,6.29,15.66,7.76,20H5.26C5.12,18.19,5,16.43,6,14.75A5.77,5.77,0,0,0,6.35,12.66Zm3-1.83-.9,1.85.22.2,2.24-1.62Z", // Roxo "2": "M12.12,2.08c2.27.15,3,1,2.84,3.2a1.15,1.15,0,0,0,.48.85,1.76,1.76,0,0,1,1,2,1.13,1.13,0,0,0,.08.75c1,1.83.95,2.37-.61,3.65a3.31,3.31,0,0,1,.34,1.05c0,.44-.08,1.19-.32,1.27-1.24.42-1.63,1.73-2.6,2.34a6,6,0,0,1-2.15.3L11.41,20H9.12V17.54a7,7,0,0,1-2.28-.79A14.87,14.87,0,0,0,4.4,14.66a1.46,1.46,0,0,1-.53-1.21,6.57,6.57,0,0,0-.17-2.56A7.38,7.38,0,0,0,3,8.75c-.5-.78,0-1.57.57-2.18a6.83,6.83,0,0,1,1-.71,2.53,2.53,0,0,1,.89-2.92c.65-.57,1.21-1.35,1.94-2C9.15-.62,11.28-.24,12.12,2.08Z", // Azul "3": "M10.19,9l.24,4.15,1.3-.8c-.4-2.9.53-4.69,2.82-5.52,1.51-.55,2.86,0,3.87,1.62s1.07,3.31,0,4.32a4.84,4.84,0,0,1-6.15.13,2.68,2.68,0,0,0-1.49,3c.13,1.28.29,2.56.44,3.9l-1,.13c-.86.12-1.24-.11-1.13-1.12a17.88,17.88,0,0,0,0-3.43,3.41,3.41,0,0,0-1.55-2.79C5.19,14,3.54,14,1.94,12.56S.35,8.26,1.86,7A3,3,0,0,1,4,6.43,5.2,5.2,0,0,1,7.84,9a3.38,3.38,0,0,1,.32,2.07C8,12.28,7.92,12.27,9.42,13c0-1.39.07-2.64.07-3.9,0-.12-.25-.25-.4-.35a6.26,6.26,0,0,1-2.9-5.32C6.05,1.62,7.55.32,9.84,0A3.4,3.4,0,0,1,13.7,2.69,5.45,5.45,0,0,1,10.19,9Z", // Verde "4": "M6.58,12.51l-2.65-.18c1.31-1.72,2.42-3.19,3.68-4.87l-2.44.18C6.8,4.94,8.28,2.5,9.76.07L10.21,0l4.68,7.67-2.48-.24,3.66,4.86-2.6.25c.85,1.29,1.63,2.45,2.37,3.63a3.22,3.22,0,0,1,.22.95,3,3,0,0,1-1,0c-.89-.26-1.77-.6-2.65-.92s-1.19,0-1.12.86a5.4,5.4,0,0,0,.09.58c.3,2.57.89,2.27-2.09,2.32-.85,0-1-.35-.87-1.08.1-.53.19-1.08.24-1.62.09-1.19-.12-1.37-1.23-1-.89.28-1.76.64-2.65.92a2.24,2.24,0,0,1-.77,0c0-.29-.06-.63.07-.85C4.85,15.11,5.66,13.91,6.58,12.51Z", // Amarelo "other": "M10,4a6,6,0,1,0,6,6A6,6,0,0,0,10,4Zm-.14,9.14a.66.66,0,1,1,.66-.66A.66.66,0,0,1,9.86,13.14ZM11,10.08a1.57,1.57,0,0,0-.63,1.12H9.3a2.44,2.44,0,0,1,1-1.72c.36-.35.67-.64.67-1.06A.82.82,0,0,0,10,7.58a1.17,1.17,0,0,0-1.15.85L7.88,8A2.21,2.21,0,0,1,10,6.53a1.85,1.85,0,0,1,2,1.88C12,9.2,11.47,9.63,11,10.08Z" }; return class_shapes; }40:T9e3,{ const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 200) .attr('height', 200) .style('background-color', '#FAFAFA'); const offset = 70 const width = 500; const height = 500; const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; svgContainer.attr("width", width) .attr("height", height) .attr("position", "relative"); const xScale = d3.scaleLinear() .domain([0,300]) .range([margin.left + offset, innerWidth-offset]); const xAxis = d3.axisBottom(xScale); svgContainer.append("g") .attr("transform", `translate(0, ${innerHeight -30})`) .call(xAxis); const yScale = d3.scaleLinear() .domain([0,50]) .range([innerHeight - offset, margin.top+offset]); const yAxis = d3.axisLeft(yScale); svgContainer.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); const tooltip = background.append("div") .attr("class", "tooltip") .style("opacity", 0) .style("width","auto") .style("height","auto") .style("background","whitesmoke") .style("border","2px solid gray") .style("border-radius", "5px") .style("padding","5px") .style("font-size","12px") .style("position","absolute") .style("left","10px") .style("top","10px") .style("pointer-events","none"); svgContainer.selectAll("circle") .data(dataPoints) .join("circle") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 4) .attr("species", d => d.species) .attr("fill", d => species_colors[d.species]) .attr("opacity", 0.7) .style("cursor","pointer"); // Mouseover event handler function handleMouseOver() { let d = d3.select(this); d.attr("opacity",1) d.attr("fill","#33FF77"); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`X: ${xScale.invert(d.attr("cx"))}
Y: ${yScale.invert(d.attr("cy"))}`) .style("left", d.attr("cx") + "px") .style("top", d.attr("cy") + "px"); } // Mouseout event handler function handleMouseOut() { let d = d3.select(this); d.attr("fill",species_colors[d.attr("species")]); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } return background.node(); }41:T5ea,class NormalMixture { constructor() {} rvs(means, variances, weights, size) { let samples = new Array(size); let nlen = means.length; for (let i = 0; i < size; i++) { const j = d3.randomInt(0, nlen)(); samples[i] = d3.randomNormal(means[j], Math.sqrt(variances[j]))(); } return samples; } pdf(x, means, variances, weights) { let y = new Array(x.length); let nlen = means.length; // Checking if the weights sum to 1 //if (d3.sum(weights) !== 1) { // throw new Error("The weights must sum to 1"); //} // Checking if the number of means, variances, and weights are the same if (!(means.length === variances.length && means.length === weights.length)) { throw new Error("The number of means, variances, and weights must be the same"); } // Checking if the weights are positive if (weights.some(w => w < 0)) { throw new Error("The weights must be positive"); } // Checking if the variances are positive if (variances.some(v => v < 0)) { throw new Error("The variances must be positive"); } for (let i = 0; i< x.length; i++){y[i]=0}; for (let i = 0; i < nlen; i++) { for (let j=0; j value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false, id = "" } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }43:T41c,normalMixture_configuration = { const width = 400; const height = 300; const margin = { top: 5, right: 30, bottom: 30, left: 30 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const offset = 0; const side_padding = 30; const topbottom_padding = 0; const circle_colors = [normal_colors.normal1, normal_colors.normal2] const circle_drag = [normal_colors.normal1_drag, normal_colors.normal2_drag] const xScale = d3.scaleLinear() .domain([-8, 8]) .range([margin.left + offset, innerWidth-offset]); const yScale = d3.scaleLinear() .domain([0, 0.6]) .range([innerHeight - offset, margin.top+offset+0]); return { width: width, height: height, margin : margin, innerWidth: innerWidth, innerHeight: innerHeight, offset: offset, xScale: xScale, yScale: yScale, side_padding: side_padding, topbottom_padding: topbottom_padding, circle_colors: circle_colors, circle_drag_colors: circle_drag, } }44:Tc38,drag = { function dragstarted(event, d) { let normal_configuration = {} if(d.refto == "normal1"){ normal_configuration = normalControll_configuration } else if (d.refto == "normal2") { normal_configuration = normalMixture_configuration if(d.i - weight == 0){ d3.select(this) .attr("stroke", "black") .attr("fill", "#999"); return; } } d3.select(this).raise() .attr("stroke", "black") .attr("fill", normal_configuration.circle_drag_colors[d.i]); } function dragged(event, d) { // Configurar as dimensões do gráfico let normal_configuration = {} if(d.refto == "normal1"){ normal_configuration = normalControll_configuration } else if (d.refto == "normal2") { normal_configuration = normalMixture_configuration if(d.i - weight == 0){return;} } const width = normal_configuration.width; const height = normal_configuration.height; const margin = normal_configuration.margin; const innerWidth = normal_configuration.innerWidth; const innerHeight = normal_configuration.innerHeight; const offset = normal_configuration.offset; const side_padding = normal_configuration.side_padding; const topbottom_padding = normal_configuration.topbottom_padding; const xScale = normal_configuration.xScale; const yScale = normal_configuration.yScale; let event_x = event.x; let event_y = event.y; event_x = Math.min(event_x, margin.left + innerWidth - 2*side_padding); event_x = Math.max(event_x, side_padding + margin.left); event_y = Math.min(event_y, yScale(0.01)); event_y = Math.max(event_y, topbottom_padding + margin.bottom); d3.select(this).attr("cx", d.x = event_x).attr("cy", d.y = event_y); if (d.i == 0 && d.refto == "normal1"){ mutable meanA = xScale.invert(event_x); mutable varA = Math.pow(findVariance(yScale.invert(event_y)), 2) }else if(d.i == 1 && d.refto == "normal1"){ mutable meanB = xScale.invert(event_x); mutable varB = Math.pow(findVariance(yScale.invert(event_y)), 2) } else if (d.i == 0 && d.refto == "normal2" && weight!= 0 ){ mutable meanC = xScale.invert(event_x); mutable varC = Math.pow(findVariance(yScale.invert(event_y) / weight ), 2) }else if(d.i == 1 && d.refto == "normal2" && (1 - weight ) != 0 ){ mutable meanD = xScale.invert(event_x); mutable varD = Math.pow(findVariance(yScale.invert(event_y) / (1 - weight )), 2) } } function dragended(event, d) { let normal_configuration = {} if(d.refto == "normal1"){ normal_configuration = normalControll_configuration } else if (d.refto == "normal2") { normal_configuration = normalMixture_configuration } d3.select(this) .attr("stroke", null) .attr("fill", normal_configuration.circle_colors[d.i]); } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }45:[{"id":"96c4abe768abd6d596effc6f66b4d91e69762ae7d6e24ae2b36bd352633964500dd6e75ffd9ae937c2d52c7e5443996631364a72890e270596026e37f28beab4","href":"https://static.observableusercontent.com/files/96c4abe768abd6d596effc6f66b4d91e69762ae7d6e24ae2b36bd352633964500dd6e75ffd9ae937c2d52c7e5443996631364a72890e270596026e37f28beab4","name":"pseudo_label.csv","type":"text/csv","lastModified":1685917864563.112,"size":504313},{"id":"f045b8085a9fa79b4bf9663ab8f00f1d15e2650bcff99772f3789e5e00713c590ef7b1cd1be1e40ef2870798c44e2fb218f966e0feb3d449fe46d9ce6aef360d","href":"https://static.observableusercontent.com/files/f045b8085a9fa79b4bf9663ab8f00f1d15e2650bcff99772f3789e5e00713c590ef7b1cd1be1e40ef2870798c44e2fb218f966e0feb3d449fe46d9ce6aef360d","name":"pseudo_label (1).csv","type":"text/csv","lastModified":1685919870349.654,"size":892071},{"id":"593dc0ca6df2cc54acac63110f62e6d0bab868ade2f7a75decd8e65e7d4c49ce61ba61b48b01ce26f1c212a65315d92ae03a5e5bed2de13173b7947ae20183c0","href":"https://static.observableusercontent.com/files/593dc0ca6df2cc54acac63110f62e6d0bab868ade2f7a75decd8e65e7d4c49ce61ba61b48b01ce26f1c212a65315d92ae03a5e5bed2de13173b7947ae20183c0","name":"tree_samples_missing_labels.csv","type":"text/csv","lastModified":1685920374918.213,"size":339275},{"id":"aee4f37403455cd233a7f8b76c2ad298a4b719000ddd31a4b68e679868a813b4cc8796b4721e571d9461b424486b743012b44f3521879d0162b5890e1163fef8","href":"https://static.observableusercontent.com/files/aee4f37403455cd233a7f8b76c2ad298a4b719000ddd31a4b68e679868a813b4cc8796b4721e571d9461b424486b743012b44f3521879d0162b5890e1163fef8","name":"pseudo_label (2).csv","type":"text/csv","lastModified":1685920393718.829,"size":4491871},{"id":"931be08768614fd2b20c538b219384895985988fa129b8c527286d5a3e99c7ed065f8913ffab1b45fa0581047706706a2552fe76e8be5b97386321d5c19523b8","href":"https://static.observableusercontent.com/files/931be08768614fd2b20c538b219384895985988fa129b8c527286d5a3e99c7ed065f8913ffab1b45fa0581047706706a2552fe76e8be5b97386321d5c19523b8","name":"pseudo_label (3).csv","type":"text/csv","lastModified":1685991863857.567,"size":8111973},{"id":"c0853ecc7796b6960d555bbdea098485d026ae34dd625dfe3ff83f05a30e41c8dfbce563788d8fb2f80e5ce16c15929f792162d68a6d0b3e9a6652f04d2541dc","href":"https://static.observableusercontent.com/files/c0853ecc7796b6960d555bbdea098485d026ae34dd625dfe3ff83f05a30e41c8dfbce563788d8fb2f80e5ce16c15929f792162d68a6d0b3e9a6652f04d2541dc","name":"pseudo_label (4).csv","type":"text/csv","lastModified":1685995836309.922,"size":8113189},{"id":"515f52c391fb6e403d4fb5088478e4afb9912e7762f81f7af0ded10a6bff5b6b7ec4dbb39b37753eb4d9552827dfa7b98873235070d58ae1d9514a59de5ebdda","href":"https://static.observableusercontent.com/files/515f52c391fb6e403d4fb5088478e4afb9912e7762f81f7af0ded10a6bff5b6b7ec4dbb39b37753eb4d9552827dfa7b98873235070d58ae1d9514a59de5ebdda","name":"confusion_matrix (1).csv","type":"text/csv","lastModified":1686322445133.587,"size":16937},{"id":"a6308e09861d37619949ec2d82670c8ac690218fc51515cb85562d81411384f06cc3e7fee1d83f408afd4da7172a989591628bb4f41669da08b8a0e0eaa9534a","href":"https://static.observableusercontent.com/files/a6308e09861d37619949ec2d82670c8ac690218fc51515cb85562d81411384f06cc3e7fee1d83f408afd4da7172a989591628bb4f41669da08b8a0e0eaa9534a","name":"confusion_matrix.csv","type":"text/csv","lastModified":1686018816803.839,"size":16793},{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1685817495431.113,"size":13506},{"id":"02c47bc95fe643de3ea76bb35e4efffdd87d354dee80fb56dc27a669173ad0ea331bdfa31582ec52aeee133a22380a27c942280f258f6f7168db54ed19858086","href":"https://static.observableusercontent.com/files/02c47bc95fe643de3ea76bb35e4efffdd87d354dee80fb56dc27a669173ad0ea331bdfa31582ec52aeee133a22380a27c942280f258f6f7168db54ed19858086","name":"multivariate_gaussian_mixture (1).csv","type":"text/csv","lastModified":1686050537434.467,"size":78180},{"id":"8556aeb55de39005ee19fa59421f7e81e318d0cc5a2080ae81acfa5c98397f8641ec9e0ba842630427129d89987c959e3256b091774b4b7e8c82953b0510d851","href":"https://static.observableusercontent.com/files/8556aeb55de39005ee19fa59421f7e81e318d0cc5a2080ae81acfa5c98397f8641ec9e0ba842630427129d89987c959e3256b091774b4b7e8c82953b0510d851","name":"multivariate_gaussian_mixture (2).csv","type":"text/csv","lastModified":1687140620378.957,"size":75809},{"id":"2d200449b5a614e8f245bbace88f0cca998381d8f374317667b19392f05afc82b0809dc62d50d05c931d46f9e2372a32ae1df02b3883214bfd2ab6fe752f8dd8","href":"https://static.observableusercontent.com/files/2d200449b5a614e8f245bbace88f0cca998381d8f374317667b19392f05afc82b0809dc62d50d05c931d46f9e2372a32ae1df02b3883214bfd2ab6fe752f8dd8","name":"pseudo_label (5).csv","type":"text/csv","lastModified":1687140638714.807,"size":391255},{"id":"02c47bc95fe643de3ea76bb35e4efffdd87d354dee80fb56dc27a669173ad0ea331bdfa31582ec52aeee133a22380a27c942280f258f6f7168db54ed19858086","href":"https://static.observableusercontent.com/files/02c47bc95fe643de3ea76bb35e4efffdd87d354dee80fb56dc27a669173ad0ea331bdfa31582ec52aeee133a22380a27c942280f258f6f7168db54ed19858086","name":"multivariate_gaussian_mixture (1)@1.csv","type":"text/csv","lastModified":1687141200947.353,"size":78180},{"id":"c0853ecc7796b6960d555bbdea098485d026ae34dd625dfe3ff83f05a30e41c8dfbce563788d8fb2f80e5ce16c15929f792162d68a6d0b3e9a6652f04d2541dc","href":"https://static.observableusercontent.com/files/c0853ecc7796b6960d555bbdea098485d026ae34dd625dfe3ff83f05a30e41c8dfbce563788d8fb2f80e5ce16c15929f792162d68a6d0b3e9a6652f04d2541dc","name":"pseudo_label (4)@1.csv","type":"text/csv","lastModified":1687141237720.465,"size":8113189}] 2d:{"id":"31ca7950886a92d8","slug":null,"title":"Reinforcement Learning","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-06-03T18:38:15.431Z","update_time":"$D2023-06-23T01:19:36.369Z","view_time":null,"first_public_time":"$D2023-06-03T18:38:15.431Z","fork":{"id":"7dcef0ebff4028d9","slug":"input-chart","title":"Input + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"aa8988d90f35bef0","login":"amigos","name":"amigos","avatar_url":"https://avatars-next.observableusercontent.com/e707c0d04372c80e43610394fb0b7072f2e1eeca80e8da405026ca8f358cb492","tier":"starter_2024"},"version":2752,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3acea172cc1d1ad3","login":"rodrigoghp","name":"Rodrigo Gomes Hutz Pintucci","avatar_url":"https://avatars-next.observableusercontent.com/45ef06ebee49fe044536072ae1d766200603ce3026d838566a87ae25776a553c","tier":null}],"members":[{"type":"team","id":"aa8988d90f35bef0","login":"amigos","name":"amigos","avatar_url":"https://avatars-next.observableusercontent.com/e707c0d04372c80e43610394fb0b7072f2e1eeca80e8da405026ca8f358cb492","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3acea172cc1d1ad3","login":"rodrigoghp","name":"Rodrigo Gomes Hutz Pintucci","avatar_url":"https://avatars-next.observableusercontent.com/45ef06ebee49fe044536072ae1d766200603ce3026d838566a87ae25776a553c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Reinforcement Learning","cells":[{"id":4,"value":"# Reinforcement Learning\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"import { button } from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"import { html } from \"@observablehq/stdlib\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1257,"value":"import {Choropleth, Legend} from \"@d3/choropleth\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1373,"value":"viewof iterationSlider = Scrubber(\n d3.range(1, 100 + 1, 1), // min to max years with 1 step\n { autoplay: false, delay: 100, loop: false, id: \"universal_timeline\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1091,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1382,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2129,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1545,"value":"viewof page = {return (htl.html`

`)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1119,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1224,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1262,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2681,"value":"viewof sampling_parameters = {\n let div = d3.create(\"div\")\n .attr(\"id\", \"current_sample_params\")\n .style(\"font-size\", \"10px\");\n\n div.append(\"b\").text(\"Parâmetros das normais\")\n .style('font-family', 'Helvetica, Arial')\n .style('font-weight', 'bold')\n .style('font-size', '12px')\n \n div.append(\"p\").attr(\"class\",\"mean1\").text(meanA)\n div.append(\"p\").attr(\"class\",\"mean2\").text(meanB)\n div.append(\"p\").attr(\"class\",\"var1\").text(varA)\n div.append(\"p\").attr(\"class\",\"var2\").text(varB)\n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2064,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2227,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2421,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2426,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2716,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"viewof callafunction_btn = Inputs.button(\n \"Mudar amostra\", {value: null, reduce: value => {\n\n // Atualiza o valor dos pontos\n mutable gRandomPoints = Array(numPoints).fill().map(() => ({ x: d3.randomNormal(meanA, varA)(), y: d3.randomNormal(meanB, varB)() }))\n \n return null;\n }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"viewof weight = Inputs.range([0, 1], {\n value: 0.5,\n step: 0.001,\n label: \"Peso da primeira normal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2707,"value":"animateExplosion(40, 20);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2289,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1998,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2540,"value":"viewof gaussian_mixture_parameters = {\n let div = d3.create(\"div\")\n .attr(\"id\", \"current_mix_params\")\n .style(\"font-size\", \"10px\");\n\n div.append(\"b\").text(\"Parâmetros das normais\")\n .style('font-family', 'Helvetica, Arial')\n .style('font-weight', 'bold')\n .style('font-size', '12px')\n \n div.append(\"p\").attr(\"class\",\"mean1\").text(meanC)\n div.append(\"p\").attr(\"class\",\"mean2\").text(meanD)\n div.append(\"p\").attr(\"class\",\"var1\").text(varC)\n div.append(\"p\").attr(\"class\",\"var2\").text(varD)\n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2507,"value":"// Gambiarra pra pegar o valor dos parametros sem atualizar sozinho quando eles mudarem\nfunction getMixParams() {return {\n mean1: parseFloat(d3.select(\"#current_mix_params .mean1\").text()),\n mean2: parseFloat(d3.select(\"#current_mix_params .mean2\").text()),\n var1: parseFloat(d3.select(\"#current_mix_params .var1\").text()),\n var2: parseFloat(d3.select(\"#current_mix_params .var2\").text()),\n }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2691,"value":"// Gambiarra pra pegar o valor dos parametros sem atualizar sozinho quando eles mudarem\nfunction getSamplesParams() {return {\n mean1: parseFloat(d3.select(\"#current_sample_params .mean1\").text()),\n mean2: parseFloat(d3.select(\"#current_sample_params .mean2\").text()),\n var1: parseFloat(d3.select(\"#current_sample_params .var1\").text()),\n var2: parseFloat(d3.select(\"#current_sample_params .var2\").text()),\n }}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":975,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1853,"value":"{const tooltip = d3.select(\"#trees_div .tooltip\")\n .style(\"opacity\", 0)\n .style(\"width\",\"auto\")\n .style(\"height\",\"auto\")\n .style(\"background\",\"whitesmoke\")\n .style(\"border\",\"2px solid gray\")\n .style(\"border-radius\", \"5px\")\n .style(\"padding\",\"5px\")\n .style(\"font-size\",\"12px\")\n .style(\"position\",\"absolute\")\n .style(\"left\",\"10px\")\n .style(\"top\",\"10px\")\n .style(\"pointer-events\",\"none\");\n\n const background = d3.select(\"#trees_div\")\n .style(\"width\", \"750px\")\n .style(\"height\",\"500px\");\n\n return \"applying styling of tree div\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2041,"value":"> Estilização das normais\n\n\n
\nobs, no código da pra reordenar para o path da soma das normais vim antes ou depois das outras, pra ficar no fundo ou frente.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"confusion_matrix = await FileAttachment(\"confusion_matrix (1).csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1970,"value":"function calculateStrokeColor(color1, color2, weight) {\n const c1 = parseRGB(color1);\n const c2 = parseRGB(color2);\n const r = Math.round(c2.r + (c1.r - c2.r) * weight - 30);\n const g = Math.round(c2.g + (c1.g - c2.g) * weight - 30);\n const b = Math.round(c2.b + (c1.b - c2.b) * weight - 30);\n return `rgb(${r}, ${g}, ${b})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1968,"value":"function parseRGB(rgbText) {\n const regex = /rgb\$(\\d+), (\\d+), (\\d+)\$/;\n const [, r, g, b] = rgbText.match(regex);\n return { r: parseInt(r), g: parseInt(g), b: parseInt(b) };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1976,"value":"calculateStrokeColor(\"rgb(214, 111, 111)\", \"rgb(111, 173, 214)\", 0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1474,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"data_matrix = confusion_matrix.filter(d => d.iteration === iterationSlider)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2159,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":826,"value":"class_colors = {\n var class_colors = {\n \"1\": \"#460155\", // Roxo\n \"2\": \"#336991\", // Azul\n \"3\": \"#30b678\", // Verde\n \"4\": \"#ffe51f\", // Amarelo\n \"other\": \"#EEEEEE\"\n };\n \n return class_colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1370,"value":"data_trees = pseudo_label.filter(d => d.iteration === iterationSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"data_pseudo = pseudo_label.filter(d => d.iteration === iterationSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"pseudo_label = await FileAttachment(\"pseudo_label (4)@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"age = data.map(d => d[\"age\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"size = data.map(d => d[\"size\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"species = data.map(d => d[\"especie\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":382,"value":"dataPoints = age.map((x, i) => ({ x: x, y: size[i], species: species[i] }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"species_colors = {\n var species_colors = {\n \"ipe\": \"#FF5733\", // Laranja\n \"baoba\": \"#2E8B57\", // Verde\n \"cedro\": \"#8B4513\", // Marrom\n \"pinheiro\": \"#006400\", // Verde Escuro\n \"carvalho\": \"#8B4513\", // Marrom\n \"sequoia\": \"#8B0000\", // Vermelho Escuro\n \"manga rosa\": \"#FF69B4\", // Rosa\n \"jacaranda\": \"#4B0082\", // Índigo\n \"other\": \"#77777744\" // Cinza\n };\n \n return species_colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1960,"value":"normal_colors = {\n const color1 = \"rgb(214, 111, 111)\";\n const color2 = \"rgb(111, 173, 214)\";\n\n const color1_d = \"rgb(234, 131, 131)\";\n const color2_d = \"rgb(121, 193, 234)\";\n \n var color3 = calculateStrokeColor(color1, color2, weight)\n var normal_colors = {\n \"normal1\": color1, // Laranja\n \"normal2\": color2, // Verde\n \"mixture\": color3, // Marrom\n \"normal1_drag\": color1_d,\n \"normal2_drag\": color2_d,\n };\n \n return normal_colors;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"mutable species_params = [\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 },\n {\"mean\": 0, \"var\": 1 }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"function normalPDF(x, mean, standardDeviation) {\n const coefficient = 1 / Math.sqrt(2 * Math.PI * Math.pow(standardDeviation, 2));\n const exponent = -Math.pow(x - mean, 2) / (2 * Math.pow(standardDeviation, 2));\n return coefficient * Math.exp(exponent);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"data = await FileAttachment(\"tree_samples_missing_labels.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"multivariate_gaussian_mixture1 = await FileAttachment(\"multivariate_gaussian_mixture (1)@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1459,"value":"filter = data_trees.filter(d => {\n //console.log(\"d.class:\",d.class,\" , class_info:\",class_info, \"class_info[d.class]: \",class_info[d.class], \"isNaN(class_info[d.class]):\", isNaN(class_info[d.class]))\n let d_class = \"\"\n if(isNaN(d.class)){\n d_class = \"unlabeled\"\n }else{\n d_class = (class_info[d.class].label.replace(/\\s+/g, '').toLowerCase())\n }\n //const legendItem = isNaN(d.class)? d3.select(\".unlabeled\") : d3.selectAll(`.${d_class}`) ;\n //console.log(legendItem)\n //console.log(`.${class_info[d.class].label.replace(/\\s+/g, '').toLowerCase()}`)\n //const opacity = legendItem.attr(\"data-opacity\");\n \n //console.log(legendItem.node().classList.value)\n\n //console.log(\"ponto: \",d_class,\", lista: \",activeClassesFromLegend,\" aceito:\",activeClassesFromLegend.includes(d_class))\n return activeClassesFromLegend.includes(d_class);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1689,"value":"function getActiveClassesFromLegend(){\n const activeLegendItems = d3.selectAll(\".legend-item:not(.inactive)\");\n let activeClassesNodes = activeLegendItems.nodes()\n let activeClassesIds = []\n\n for(let i=0; i ({ x: d3.randomNormal(meanA, varA)(), y: d3.randomNormal(meanB, varB)() }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2029,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"function findVariance(y) {\n return 1 / ( y * Math.sqrt(2 * Math.PI)) \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2460,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2456,"value":"normalControll_configuration = {\n const width = 400;\n const height = 150;\n const margin = { top: 0, right: 30, bottom: 2, left: 30 };\n const innerWidth = width - margin.left - margin.right;\n const innerHeight = height - margin.top - margin.bottom;\n const offset = 0;\n const side_padding = 30;\n const topbottom_padding = 5;\n\n const circle_colors = [\"#00520d\", \"#00520d\"]\n const circle_drag = [\"#168728\", \"#168728\"]\n\n const xScale = d3.scaleLinear()\n .domain([-15,15])\n .range([margin.left + offset, innerWidth-offset]);\n \n const yScale = d3.scaleLinear()\n .domain([0,0.6])\n .range([innerHeight - offset, margin.top+offset+0]);\n \n return {\n width: width,\n height: height,\n margin : margin,\n innerWidth: innerWidth,\n innerHeight: innerHeight,\n offset: offset,\n xScale: xScale,\n yScale: yScale,\n side_padding: side_padding,\n topbottom_padding: topbottom_padding,\n circle_colors: circle_colors,\n circle_drag_colors: circle_drag\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2702,"value":"// Função para animação de explosão\nfunction animateExplosion(x, y) {\n const duration = 1000; // Duração da animação em milissegundos\n \n // Seleciona os círculos a serem destruídos\n const destroyedCircles = d3.selectAll(\"circle\")\n .filter(function() {\n return d3.select(this).attr(\"cx\") == x && d3.select(this).attr(\"cy\") == y;\n });\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2224,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2067,"value":"mutable meanA = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2069,"value":"mutable meanB = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2071,"value":"mutable varA = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2073,"value":"mutable varB= 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2277,"value":"mutable meanC = -4.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2279,"value":"mutable meanD = -2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2281,"value":"mutable varC = 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2283,"value":"mutable varD = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W45","stdlib":"1","titling":"auto"}} 2e:"$2d:body"