29:null 2a:["$","title",null,{"children":"Reinforcement Learning | Rodrigo Pintucci | Observable"}] 2f:T1084,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(7)) .attr("y", yScale(-7.5)) .attr("text-anchor", "middle") .text("Feature 1") .style("font-family", "Myriad Pro") .style("font-size", "16px") .style("font-weight", "bold"); svgContainer.append("text") .attr("transform", `rotate(-90 ${xScale(-6.5)},${yScale(8)})`) .attr("x", xScale(-7.5)) .attr("y", yScale(8.5)) .attr("text-anchor", "middle") .text("Feature 2") .style("font-family", "Myriad Pro") .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", "Myriad Pro") //.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 => d.class) .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"); // Mouseover event handler function handleMouseOver() { let d = d3.select(this); d.attr("fill","red"); tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`Feature 1: ${Math.round(xScale.invert(d.attr("cx"))*100)/100}
Feature 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 => 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:T4c0,viewof legend_pseudoLabel = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 120) .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, 20)"); const legendData = Object.entries(class_info).map(([classNumber, classInfo]) => ({ color: classInfo.color, label: classInfo.label, path: classInfo.shape })); const legendCircleSize = 12; const legendSpacing = 6; const legendItems = legend.selectAll(".legend-item") .data(legendData) .enter() .append("g") .attr("class", "legend-item") .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.label) .attr("class", "legend-label") .style("font-size", "12px"); return background.node() }31:Tea3,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(7)) .attr("y", yScale(-7.5)) .attr("text-anchor", "middle") .text("Feature 1") .style("font-family", "Myriad Pro") .style("font-size", "16px") .style("font-weight", "bold"); svgContainer.append("text") .attr("transform", `rotate(-90 ${xScale(-6.5)},${yScale(8)})`) .attr("x", xScale(-7.5)) .attr("y", yScale(8.5)) .attr("text-anchor", "middle") .text("Feature 2") .style("font-family", "Myriad Pro") .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(`Feature 1: ${Math.round(xScale.invert(d.attr("cx"))*100)/100}
Feature 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:T1808,trees = { if(d3.selectAll("#trees_svg").append("svg").node()) {d3.selectAll("#trees_svg").remove();} const background = d3.select("#trees_div"); const svgContainer = background.append('svg') .attr("id", "trees_svg") .attr('width', 200) .attr('height', 200) .style('background-color', '#FFFFFF'); const offset = 0 const width = 1000; const height = 500; const proportionX = 1.5; const proportionY = 1; 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([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.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"); // 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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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" : `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.X)- 10}, ${yScale(d.Y) - 10})`) .attr("cx", d => xScale(d.X)) .attr("cy", d => yScale(d.Y)) .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(".labeled").raise(); // 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")].label}
X: ${Math.round(xScale.invert(d.attr("cx"))*100*proportionX)/100}
Y: ${Math.round(yScale.invert(d.attr("cy"))*100*proportionY)/100}`) //.style("left", `${d3.event.pageX}px`) //.style("top", `${d3.event.pageY}px`); .style("transform", "translate(10px, 10px)") .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); } return background.node(); }33:T84d,legend_trees = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 120) .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, 20)"); const legendData = Object.entries(class_info).map(([classNumber, classInfo]) => ({ 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); //console.log(this.id); d3.selectAll(`.${this.id}`) //d3.selectAll(".class1") .attr("opacity", function(){ if (currentOpacity === "1"){ return 0 } else { return 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.label) .attr("class", "legend-label") .style("font-size", "12px") .attr("opacity", 1); return background.node() }34:T921,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 colorScale = d3.scaleSequential() .interpolator(d3.interpolateBlues) .domain([0, 333]); // Adjust the domain according to your data range for (let i=1; i< 5 ; i++){ svgContainer.append("text") .attr("x", 100*i - 35) .attr("y", 35) .text("Classe "+ i ) .style('fill', '#020d1e') .style("font-family", "Myriad Pro") .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.append("text") .attr("x", 35) .attr("y", 100*i + 35) .attr("transform", "rotate(-90, 35, " + (100 * i + 35) + ")") .text("Classe "+ i ) .style('fill', '#020d1e') .style("font-family", "Myriad Pro") .style("font-size", "20px") .style("font-weight", "bold"); } svgContainer.selectAll("rect") .data(data_matrix) .join("rect") .attr("x", d => d.i%4 * 100 + 50) .attr("y", d => d.j%4 * 100 + 50) .attr("width", 100) .attr("height", 100) .attr("fill", d => colorScale(d.value)) .attr("stroke", "#020d1e") .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', "#020d1e") .style("font-size", "20px") // Set the font size .style("font-weight", "bold") // Set the font weight .text(d.value); }); return background.node(); }35:T4f4,viewof matrix_legend = { const background = d3.create('div') const svgContainer = background.append('svg') .attr('width', 120) .attr('height', 500) .style('background-color', '#FFFFFF'); const offset = 0 const width = 500; const height = 500; const colorScale = d3.scaleSequential(d3.interpolateBlues) .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", 400) .attr("x2", 0) .attr("y2", 0); 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 * 333)); legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 400) .style("fill", "url(#color-gradient)"); for (let i=0; i< 8 ; i++){ svgContainer.append("text") .attr("x", 45) .attr("y", 425 - 50*(8/7)*i) .text(50*i) .style('fill', '#020d1e') .style("font-family", "Myriad Pro") .style("font-size", "20px") .style("font-weight", "bold"); } return background.node() } 36:Tf7d,viewof samplesScatter = { 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([-10,10]) .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([-10,10]) .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(10)) .attr("y", yScale(-9.5)) .attr("text-anchor", "middle") .text("X") .style("font-family", "Myriad Pro") .style("font-size", "16px"); svgContainer.append("text") .attr("x", xScale(-9.5)) .attr("y", yScale(10)) .attr("text-anchor", "middle") .text("Y") .style("font-family", "Myriad Pro") .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"); svgContainer.selectAll("circle") .data(randomPoints) .join("circle") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 4) .attr("fill", "steelblue") .attr("opacity", 0.7) .style("cursor","pointer"); // 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", "steelblue"); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } 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 (randomPoints) svgContainer.selectAll("path") .data(densityData) .enter() .append("path") .attr("d", d3.geoPath()) .attr("fill", "none") .attr("stroke", "#69b3a2") .attr("stroke-linejoin", "round") return background.node(); }37:T973,{ // Definir os parâmetros da mistura de n normais let means = [muX, muY]; let variances = [sigmaX, sigmaY]; let weights = []; for (let i=0; i< means.length ; i++) { if(i < limit_species){ weights.push(1) }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(-10, 20, 0.1); // Calcular os valores y da PDF da mistura de 3 normais const y = normalMixture.pdf(x, means, variances, weights); // Configurar as dimensões do gráfico const width = 300; const height = 200; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; // Criar a escala x const xScale = d3.scaleLinear() .domain(d3.extent(x)) .range([margin.left, width - margin.right]); // Criar a escala y const yScale = d3.scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); // Criar o elemento SVG const svg = d3.create('svg') .attr('width', width) .attr('height', height); // 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); // 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); // Adicionar a curva da PDF da mistura de 3 normais //svg.append('path') // .datum(y) // .attr('fill', 'none') // .attr('stroke', 'steelblue') // .attr('stroke-width', 2) // .attr('d', lineGenerator); const colors = Object.values(species_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 let curve = svg.append('path') .datum(n_y) .attr('fill', 'none') .attr('stroke', colors[i]) .attr('stroke-width', 2) .attr('d', lineGenerator); //curve.call(drag) } return svg.node(); } 38:Ta2d,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 = [mean1, mean2] let variances = [var1, var2] 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(-10, 20, 0.1); // Calcular os valores y da PDF da mistura de 3 normais const y = normalMixture.pdf(x, means, variances, weights); // Configurar as dimensões do gráfico const width = 400; const height = 300; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; // Criar a escala x const xScale = d3.scaleLinear() .domain(d3.extent(x)) .range([margin.left, width - margin.right]); // Criar a escala y const yScale = d3.scaleLinear() //.domain([0, d3.max(y)]) .domain([0, 0.6]) .range([height - margin.bottom, margin.top]); // Criar o elemento SVG const svg = d3.create('svg') .attr('width', width) .attr('height', height); // 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); // 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); // Adicionar a curva da PDF da mistura de 3 normais svg.append('path') .datum(y) .attr('fill', 'none') .attr('stroke', 'steelblue') .attr('stroke-width', 2) .attr('d', lineGenerator); const colors = Object.values(species_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', 2) .attr('d', lineGenerator); } return svg.node(); } 39:Tada,class_info = { var class_info = { "1": { "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": { "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": { "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": { "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": { "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; }3a: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; }3b: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(); }3c: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 ({ 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("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); }); 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.label) .attr("class", "legend-label") .style("font-size", "12px") .attr("opacity", 1); 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.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"); // 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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .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", "Myriad Pro") .style("font-size", "20px") .style("font-weight", "bold"); svgContainer.selectAll("path") .data(data_trees) //.data(filter) .join("path") .attr("class", d => isNaN(d.class) ? "other" : d.class) .attr("d", d => isNaN(d.class) ? class_info["other"].shape : class_info[d.class].shape) // Use the index to select the SVG file .attr("transform", d => `translate(${xScale(d.X)- 10}, ${yScale(d.Y) - 10})`) .attr("cx", d => xScale(d.X)) .attr("cy", d => yScale(d.Y)) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) .attr("fill", d => isNaN(d.class) ? class_info["other"].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(`${class_info[d.attr("class")].label}
X: ${Math.round(xScale.invert(d.attr("cx"))*100*proportionX)/100}
Y: ${Math.round(yScale.invert(d.attr("cy"))*100*proportionY)/100}`) //.style("left", `${d3.event.pageX}px`) //.style("top", `${d3.event.pageY}px`); .style("transform", "translate(10px, 10px)") .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["other"].color : class_info[d.class].color); tooltip.transition() .delay(300) .duration(500) .style("opacity", 0); } // Create a function to update the graph based on the legend opacity function updateGraph() { const filteredClasses = legendItems .filter(function () { return d3.select(this).attr("data-opacity") === "1"; }) .data() .map(function (d) { return d.label; }); // Use the filteredClasses to update your graph svgContainer.selectAll("path") .attr("opacity", function (d) { return filteredClasses.includes(d.class) ? 0.7 : 0; }); } // Call the updateGraph function whenever the legend is clicked legendItems.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); // Update the graph based on the new opacity updateGraph(); }); return background.node(); }3f:[{"id":"a6308e09861d37619949ec2d82670c8ac690218fc51515cb85562d81411384f06cc3e7fee1d83f408afd4da7172a989591628bb4f41669da08b8a0e0eaa9534a","href":"https://static.observableusercontent.com/files/a6308e09861d37619949ec2d82670c8ac690218fc51515cb85562d81411384f06cc3e7fee1d83f408afd4da7172a989591628bb4f41669da08b8a0e0eaa9534a","name":"confusion_matrix.csv","type":"text/csv","lastModified":1686258299269.831,"size":16793},{"id":"c0853ecc7796b6960d555bbdea098485d026ae34dd625dfe3ff83f05a30e41c8dfbce563788d8fb2f80e5ce16c15929f792162d68a6d0b3e9a6652f04d2541dc","href":"https://static.observableusercontent.com/files/c0853ecc7796b6960d555bbdea098485d026ae34dd625dfe3ff83f05a30e41c8dfbce563788d8fb2f80e5ce16c15929f792162d68a6d0b3e9a6652f04d2541dc","name":"pseudo_label (4).csv","type":"text/csv","lastModified":1686258299269.831,"size":8113189},{"id":"593dc0ca6df2cc54acac63110f62e6d0bab868ade2f7a75decd8e65e7d4c49ce61ba61b48b01ce26f1c212a65315d92ae03a5e5bed2de13173b7947ae20183c0","href":"https://static.observableusercontent.com/files/593dc0ca6df2cc54acac63110f62e6d0bab868ade2f7a75decd8e65e7d4c49ce61ba61b48b01ce26f1c212a65315d92ae03a5e5bed2de13173b7947ae20183c0","name":"tree_samples_missing_labels.csv","type":"text/csv","lastModified":1686258299269.831,"size":339275},{"id":"02c47bc95fe643de3ea76bb35e4efffdd87d354dee80fb56dc27a669173ad0ea331bdfa31582ec52aeee133a22380a27c942280f258f6f7168db54ed19858086","href":"https://static.observableusercontent.com/files/02c47bc95fe643de3ea76bb35e4efffdd87d354dee80fb56dc27a669173ad0ea331bdfa31582ec52aeee133a22380a27c942280f258f6f7168db54ed19858086","name":"multivariate_gaussian_mixture (1).csv","type":"text/csv","lastModified":1686258299269.831,"size":78180}] 2d:{"id":"77cbd07cf8ff2737","slug":null,"title":"Reinforcement Learning","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-06-08T21:04:59.269Z","update_time":"$D2023-06-08T21:04:59.269Z","view_time":null,"first_public_time":"$D2023-06-08T21:04:59.269Z","fork":{"id":"31ca7950886a92d8","slug":null,"title":"Reinforcement Learning","owner":{"id":"aa8988d90f35bef0","login":"amigos","name":"amigos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f1ccd50d7206cfa1","login":"rodrigopintucci","name":"Rodrigo Pintucci","avatar_url":"https://avatars-next.observableusercontent.com/4771ab00de78423d840ec0efcc1e4bde52a9632412f085a00f3a28f546eb1c27","tier":"starter_2024"},"version":1560,"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":"individual","id":"3acea172cc1d1ad3","login":"rodrigoghp","name":"Rodrigo Gomes Hutz Pintucci","avatar_url":"https://avatars-next.observableusercontent.com/45ef06ebee49fe044536072ae1d766200603ce3026d838566a87ae25776a553c","tier":null,"role":"editor"},{"type":"team","id":"f1ccd50d7206cfa1","login":"rodrigopintucci","name":"Rodrigo Pintucci","avatar_url":"https://avatars-next.observableusercontent.com/4771ab00de78423d840ec0efcc1e4bde52a9632412f085a00f3a28f546eb1c27","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"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":807,"value":"import {Scrubber} from \"@mbostock/scrubber\"","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":362,"value":"dataFail = d3.csv(\"https://raw.githubusercontent.com/RodrigoPintucci/ReinforcementLearning/main/tree_samples_missing_labels.csv?token=GHSAT0AAAAAAB6DWJ5UUTWQ5STQPAGMA2MSZD4Z67Q\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1373,"value":"viewof pseudoLabel_iterationSlider = Scrubber(\n d3.range(1, 100 + 1, 1), // min to max years in 5 year increments\n { autoplay: false, delay: 100, loop: false } // experiment with these settings!\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"$2f","pinned":true,"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":800,"value":"viewof trees_iterationSlider = Scrubber(\n d3.range(1, 100 + 1, 1), // min to max years in 5 year increments\n { autoplay: false, delay: 100, loop: false } // experiment with these settings!\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1545,"value":"viewof page = {return (htl.html`

`)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":975,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1119,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"data_matrix = confusion_matrix.filter(d => d.iteration === matrix_iterationSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1241,"value":"viewof matrix_iterationSlider = Scrubber(\n d3.range(2, 101 + 1, 1), // min to max years in 5 year increments\n { autoplay: false, delay: 100, loop: false } // experiment with these settings!\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1224,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1262,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"viewof muX = Inputs.range([-2, 2], {\n value: 0.0,\n step: 0.001,\n label: \"Média da distribuição de X\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"viewof muY = Inputs.range([-2, 2], {\n value: 0.0,\n step: 0.001,\n label: \"Média da distribuição de Y\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"viewof sigmaX = Inputs.range([0.001, 30], {\n value: 1,\n step: 0.001,\n label: \"Desvio padrão da distribuição de X\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"viewof sigmaY = Inputs.range([0, 2], {\n value: 1,\n step: 0.001,\n label: \"Desvio padrão da distribuição de Y\"\n})","pinned":false,"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 de random X\n mutable randomX = Array(numPoints).fill().map(() => distX());\n mutable randomY = Array(numPoints).fill().map(() => distY());\n \n return null;\n }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":847,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1174,"value":"viewof mean1 = Inputs.range([-6, 16], {\n value: 0,\n step: 0.01,\n label: \"Média da primeira normal\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1176,"value":"viewof mean2 = Inputs.range([-6, 16], {\n value: 1,\n step: 0.01,\n label: \"Média da segunda normal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"viewof var1 = Inputs.range([0.01, 20], {\n value: 1,\n step: 0.01,\n label: \"Variancia da primeira normal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"viewof var2 = Inputs.range([0.01, 20], {\n value: 1,\n step: 0.01,\n label: \"Variancia da segunda normal\"\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":502,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"confusion_matrix = await FileAttachment(\"confusion_matrix.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1474,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","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":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1370,"value":"data_trees = pseudo_label.filter(d => d.iteration === trees_iterationSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"data_pseudo = pseudo_label.filter(d => d.iteration === pseudoLabel_iterationSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"pseudo_label = await FileAttachment(\"pseudo_label (4).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"distX= d3.randomNormal(muX, sigmaX)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"distY= d3.randomNormal(muY, sigmaY)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"numPoints = 100;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"teste = [randomX, randomY]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"botaoteste = botao2()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"botaoteste[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"function botao2(){\n\n\n// Create a button widget\nconst myButton = button(\"Click Me\");\nlet value = 1\n// Event listener for button click\nmyButton.addEventListener(\"click\", () => {\n value = 2\n});\n\nreturn [myButton, value];\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"play = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"function botao() {\n const button = md``;\n\n d3.select(button).on(\"click\", function() {\n \n });\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"botao()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"mutable randomX = Array(numPoints).fill().map(() => distX())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"mutable randomY = Array(numPoints).fill().map(() => distY())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"randomPoints = randomX.map((x, i) => ({ x: x, y: randomY[i] }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1007,"value":"drag = {\n\n // Configurar as dimensões do gráfico\n const width = 300;\n const height = 200;\n const margin = { top: 20, right: 20, bottom: 30, left: 40 };\n\n const x_base = d3.range(-10, 20, 0.1);\n const xScale = d3.scaleLinear()\n .domain(d3.extent(x_base))\n .range([margin.left, width - margin.right]);\n\n \n function dragstarted(event, d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n //d3.select(this).attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n mutable muX = xScale(event.x);\n }\n\n function dragended(event, d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"$3b","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":true,"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":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":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"limit_species = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"

AAA

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":704,"value":"$3d","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).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1459,"value":"filter = data_trees.filter(d => isNaN(d.class))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1498,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"