2b:null 2c:["$","title",null,{"children":"Simple D3 | abhisek banerjee | Observable"}] 31:T1bc5,chart1 = { // Set up SVG dimensions const svgWidth = 500; const svgHeight = 500; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const width = svgWidth - margin.left - margin.right; const height = svgHeight - margin.top - margin.bottom; // Create an SVG container const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight); // Append a light grey square svg.append("rect") .attr("x", 50) // X-coordinate of the top-left corner of the square .attr("y", 50) // Y-coordinate of the top-left corner of the square .attr("width", 400) // Width of the square .attr("height", 400) // Height of the square .attr("fill", "#f0f0f0"); // Light grey color (you can adjust the color code) // Append 6 vertical white lines for (let i = 1; i <= 6; i++) { svg.append("line") .attr("x1", 50 + i * 400 / 7) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 50 + i * 400 / 7) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("stroke", "white"); // White color } // Append 8 horizontal white lines for (let i = 1; i <= 8; i++) { svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 50 + i * 400 / 9) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 50 + i * 400 / 9) // Y-coordinate of the ending point .attr("stroke", "white"); // White color } // Make lables to axes const xAxisLabels = [-4, 0, 4]; const xLabelPositions = [50 + (400 / 7), 50 + 3 * (400 / 7), 50 + 5 * (400 / 7)]; xAxisLabels.forEach((label, index) => { svg.append("text") .attr("x", xLabelPositions[index]) .attr("y", 465) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") // Adjust the text color .attr("font-size", "15px") .text(label); }); const yAxisLabels = [-8,-4, 0, 4]; const yLabelPositions = [450 - (400 / 9)+2, 450 - 3 * (400 / 9)+2 , 450 - 5 * (400 / 9)+2, 450 - 7 * (400 / 9)+2 ]; yAxisLabels.forEach((label, index) => { svg.append("text") .attr("x", 40) .attr("y", yLabelPositions[index]) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") // Adjust the text color .attr("font-size", "15px") .text(label); }); // Add "x" and "y" labels svg.append("text") .attr("x", 222) // Adjust the x-coordinate for label placement .attr("y", 485) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .text("X"); svg.append("text") .attr("x", 20) // Adjust the x-coordinate for label placement .attr("y", 227) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .attr("transform", "rotate(-90, 20, 227)") .text("Y"); // Function to generate Black random dots function generateRandomDots_Black(numDots) { for (let i = 0; i < numDots; i++) { const x = 150 + Math.random() * 250; const y = 100 + Math.random() * 250; svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) // Adjust the radius of the dots .attr("fill", "black"); // Alternate between black and golden dots } } generateRandomDots_Black(60) // Function to generate yellow random dots function generateRandomDots_yellow(numDots) { for (let i = 0; i < numDots; i++) { const x = 200 + Math.random() * 250; const y = 200 + Math.random() * 250; svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) // Adjust the radius of the dots .attr("fill", "goldenrod"); // Alternate between black and golden dots } } generateRandomDots_yellow(40); // Adjust the number of dots as needed // Add black vertical line svg.append("line") .attr("x1", 240) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 240) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("stroke", "black"); // Add golden vertical line svg.append("line") .attr("x1", 330) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 330) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("stroke", "goldenrod"); // Add black horizontal line svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 200) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 200) // Y-coordinate of the ending point .attr("stroke", "black"); // Add golden horizontal line svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 290) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 290) // Y-coordinate of the ending point .attr("stroke", "goldenrod"); // Move black and golden dots to respective lines with transitions to vertical line const moveDotsToLines = (dotsColor, lineXCoordinate) => { const lineYCoordinate = dotsColor === "black" ? 200 : 290; svg.selectAll("circle") .filter(function () { return this.getAttribute("fill") === dotsColor; }) .transition() .duration(3000) .attr("cx", lineXCoordinate) .on("end", () => { // After the vertical line transition ends, move to horizontal line moveDotsToLinesH(dotsColor, lineYCoordinate); // Adjust the Y-coordinate as needed }); }; // Move black and golden dots to respective lines with transitions to horizontal lines const moveDotsToLinesH = (dotsColor, lineYCoordinate) => { svg.selectAll("circle") .filter(function () { return this.getAttribute("fill") === dotsColor; }) .transition() .duration(3000) .attr("cy", lineYCoordinate); }; // Move black dots to the black vertical line moveDotsToLines("black", 240); // Move golden dots to the golden vertical line moveDotsToLines("goldenrod", 330); svg.append("line") .attr("x1", 240) // X-coordinate of the starting point .attr("y1", 200) // Y-coordinate of the starting point .attr("x2", 330) // X-coordinate of the ending point .attr("y2", 290) // Y-coordinate of the ending point .attr("stroke", "blue") .attr("stroke-width", 3); return svg.node(); }32:T249c,chart2 = { // Set up SVG dimensions const svgWidth = 500; const svgHeight = 500; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const width = svgWidth - margin.left - margin.right; const height = svgHeight - margin.top - margin.bottom; // Create an SVG container const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight); // Initialize count let count = 0; // Function to update the visualization based on the current count function updateVisualization() { //svg.selectAll("*").remove(); // Append a light grey square svg.append("rect") .attr("x", 50) // X-coordinate of the top-left corner of the square .attr("y", 50) // Y-coordinate of the top-left corner of the square .attr("width", 400) // Width of the square .attr("height", 400) // Height of the square .attr("fill", "#f0f0f0"); // Light grey color (you can adjust the color code) // Append 6 vertical white lines for (let i = 1; i <= 6; i++) { svg.append("line") .attr("x1", 50 + i * 400 / 7) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 50 + i * 400 / 7) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("stroke", "white"); // White color } // Append 8 horizontal white lines for (let i = 1; i <= 8; i++) { svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 50 + i * 400 / 9) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 50 + i * 400 / 9) // Y-coordinate of the ending point .attr("stroke", "white"); // White color } // Make lables to axes const xAxisLabels = [-4, 0, 4]; const xLabelPositions = [50 + (400 / 7), 50 + 3 * (400 / 7), 50 + 5 * (400 / 7)]; xAxisLabels.forEach((label, index) => { svg.append("text") .attr("x", xLabelPositions[index]) .attr("y", 465) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") // Adjust the text color .attr("font-size", "15px") .text(label); }); const yAxisLabels = [-8,-4, 0, 4]; const yLabelPositions = [450 - (400 / 9)+2, 450 - 3 * (400 / 9)+2 , 450 - 5 * (400 / 9)+2, 450 - 7 * (400 / 9)+2 ]; yAxisLabels.forEach((label, index) => { svg.append("text") .attr("x", 40) .attr("y", yLabelPositions[index]) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") // Adjust the text color .attr("font-size", "15px") .text(label); }); // Add "x" and "y" labels svg.append("text") .attr("x", 222) // Adjust the x-coordinate for label placement .attr("y", 485) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .text("X"); svg.append("text") .attr("x", 20) // Adjust the x-coordinate for label placement .attr("y", 227) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .attr("transform", "rotate(-90, 20, 227)") .text("Y"); // Function to generate Black random dots with a quicker delay function generateRandomDots_Black(numDots) { function addBlackDot(i) { const x = 150 + Math.random() * 250; const y = 100 + Math.random() * 250; svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) // Adjust the radius of the dots .attr("fill", "black"); // Alternate between black and golden dots } for (let i = 0; i < numDots; i++) { setTimeout(addBlackDot, i * 100); // Adjust the delay (in milliseconds) } } generateRandomDots_Black(60); // Function to generate yellow random dots with a quicker delay function generateRandomDots_yellow(numDots) { function addYellowDot(i) { const x = 200 + Math.random() * 250; const y = 200 + Math.random() * 250; svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) // Adjust the radius of the dots .attr("fill", "goldenrod"); // Alternate between black and golden dots } for (let i = 0; i < numDots; i++) { setTimeout(addYellowDot, i * 100); // Adjust the delay (in milliseconds) } } generateRandomDots_yellow(40); // Adjust the number of dots as needed // Add black vertical line setTimeout(function () { svg.append("line") .attr("x1", 240) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 240) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "black"); }, 6000); // Add golden vertical line setTimeout(function () { svg.append("line") .attr("x1", 330) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 330) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "goldenrod"); }, 6000); // Move black dots to respective lines with transitions to vertical line setTimeout(function() { svg.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "black"; }) .transition() .duration(3000) .attr("cx", 240) .on("end", () => { }); }, 6300); //}; // Move golden dots to respective lines with transitions to vertical line setTimeout(function() { svg.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "goldenrod"; }) .transition() .duration(3000) .attr("cx", 330) .on("end", () => { }); }, 6300); //}; // Add black horizontal line setTimeout(function () { svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 200) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 200) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "black"); }, 9300); // Add golden horizontal line setTimeout(function () { svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 290) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 290) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "goldenrod"); }, 9300); // Move black dots to respective lines with transitions to horizontal line setTimeout(function() { svg.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "black"; }) .transition() .duration(3000) .attr("cy", 200) .on("end", () => { }); }, 9500); //}; // Move golden dots to respective lines with transitions to horizontal line setTimeout(function() { svg.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "goldenrod"; }) .transition() .duration(3000) .attr("cy", 290) .on("end", () => { }); }, 9500); //}; setTimeout(function () { svg.selectAll(".to-disappear") // Select by class .transition() .duration(1000) // Adjust the duration to control the fade-out speed .attr("opacity", 0) // Set the opacity to 0 to make them disappear .remove(); // Remove the lines from the SVG }, 12500); // Create a delay of 12.5 seconds before drawing the blue line setTimeout(function () { // Add a blue line that starts at (240, 200) and ends at (330, 290) svg.append("line") .attr("x1", 240) // X-coordinate of the starting point .attr("y1", 200) // Y-coordinate of the starting point .attr("x2", 330) // Initial X-coordinate of the ending point (same as starting point) .attr("y2", 290) // Initial Y-coordinate of the ending point (same as starting point) .attr("stroke", "blue") .attr("stroke-width", 3) .transition() .duration(2000) // 2 seconds for the line to extend .attr("x2", 330) // Final X-coordinate of the ending point .attr("y2", 290); // Final Y-coordinate of the ending point }, 12500); // 12.5 seconds (12500 milliseconds) console.log("Current count:", count); } // Update the visualization initially updateVisualization(); // Set interval to update count every second const interval = setInterval(() => { // Increment count count++; // If count reaches 6, reset to 0 if (count === 6) { count = 0; } // Update the visualization updateVisualization(); }, 13000); return svg.node(); } 33:T52b,viewof count = { var value = 0; const button = html``; // Initial text let isButtonDisabled = false; Object.defineProperty(button, "value", { get() { return value; } }); button.onclick = () => { if (isButtonDisabled) { return; // Do nothing if the button is disabled } // Disable the button for 5 seconds isButtonDisabled = true; button.disabled = true; setTimeout(() => { isButtonDisabled = false; // Enable the button after 5 seconds button.disabled = false; // Update the button text based on the value if (value === 0) { button.textContent = "Figure out diff in X"; } else if (value === 1) { button.textContent = "Remove diff in X"; } else if (value === 2) { button.textContent = "Figure out diff in Y"; } else if (value === 3) { button.textContent = "Remove diff in Y"; } else if (value === 4) { button.textContent = "Draw line"; } else if (value === 5) { button.textContent = "Raw Data Generation"; } value = (value < 5) ? value + 1 : 0; // Increment up to 5, then reset to 0 button.dispatchEvent(new CustomEvent("input")); }, 5000); // 5000 milliseconds (5 seconds) }; return button; } 34:T2eb5,chart3 = { // Initialize count let l = count; if(l==0){ // Set up SVG dimensions const svgWidth = 500; const svgHeight = 500; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const width = svgWidth - margin.left - margin.right; const height = svgHeight - margin.top - margin.bottom; // Create an SVG container const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("id", "mySvg"); svg.append("text") .attr("x", 20) // X-coordinate .attr("y", 35) // Y-coordinate .attr("class", "Text_1") // Set a specific ID .style("font-size", "14px") .text(`Start with Raw Data. Correlation between X and Y is ${(0.2 + Math.random() * 0.1).toFixed(3)}`); // The text you want to display svg.append("text") .attr("x", 20) // X-coordinate .attr("y", 15) // Y-coordinate .style("font-size", "14px") .text("The correlation between X and Y with Z as an instrument variable."); //svg.selectAll("*").remove(); // Append a light grey square svg.append("rect") .attr("x", 50) // X-coordinate of the top-left corner of the square .attr("y", 50) // Y-coordinate of the top-left corner of the square .attr("width", 400) // Width of the square .attr("height", 400) // Height of the square .attr("fill", "#f0f0f0"); // Light grey color (you can adjust the color code) // Append 6 vertical white lines for (let i = 1; i <= 6; i++) { svg.append("line") .attr("x1", 50 + i * 400 / 7) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 50 + i * 400 / 7) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("stroke", "white"); // White color } // Append 8 horizontal white lines for (let i = 1; i <= 8; i++) { svg.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 50 + i * 400 / 9) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 50 + i * 400 / 9) // Y-coordinate of the ending point .attr("stroke", "white"); // White color } // Make lables to axes const xAxisLabels = [-4, 0, 4]; const xLabelPositions = [50 + (400 / 7), 50 + 3 * (400 / 7), 50 + 5 * (400 / 7)]; xAxisLabels.forEach((label, index) => { svg.append("text") .attr("x", xLabelPositions[index]) .attr("y", 465) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") // Adjust the text color .attr("font-size", "15px") .text(label); }); const yAxisLabels = [-8,-4, 0, 4]; const yLabelPositions = [450 - (400 / 9)+2, 450 - 3 * (400 / 9)+2 , 450 - 5 * (400 / 9)+2, 450 - 7 * (400 / 9)+2 ]; yAxisLabels.forEach((label, index) => { svg.append("text") .attr("x", 40) .attr("y", yLabelPositions[index]) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") // Adjust the text color .attr("font-size", "15px") .text(label); }); // Add "x" and "y" labels svg.append("text") .attr("x", 222) // Adjust the x-coordinate for label placement .attr("y", 485) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .text("X"); svg.append("text") .attr("x", 20) // Adjust the x-coordinate for label placement .attr("y", 227) // Adjust the y-coordinate for label placement .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "14px") .attr("transform", "rotate(-90, 20, 227)") .text("Y"); // Function to generate Black random dots with a quicker delay function generateRandomDots_Black(numDots) { function addBlackDot(i) { const x = 150 + Math.random() * 250; const y = 100 + Math.random() * 250; svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) // Adjust the radius of the dots .attr("fill", "black"); // Alternate between black and golden dots } for (let i = 0; i < numDots; i++) { setTimeout(addBlackDot, i * 100); // Adjust the delay (in milliseconds) } } generateRandomDots_Black(60); // Function to generate yellow random dots with a quicker delay function generateRandomDots_yellow(numDots) { function addYellowDot(i) { const x = 200 + Math.random() * 250; const y = 200 + Math.random() * 250; svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) // Adjust the radius of the dots .attr("fill", "goldenrod"); // Alternate between black and golden dots } for (let i = 0; i < numDots; i++) { setTimeout(addYellowDot, i * 100); // Adjust the delay (in milliseconds) } } generateRandomDots_yellow(40); // Adjust the number of dots as needed return svg.node(); }if(l==1){ const existingSvg = d3.select("#mySvg"); if (existingSvg.size() > 0) { // Create a deep copy of the existing SVG const svg1 = existingSvg.node().cloneNode(true); // Now, you can use D3 to manipulate the new svg1 selection const svg1Selection = d3.select(svg1); // Select the text element by its ID svg1Selection.selectAll(".Text_1") .text("Figure out what difference in X are explained by Z"); // Add black vertical line setTimeout(function () { svg1Selection.append("line") .attr("x1", 240) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 240) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "black"); }, 1000); // Add golden vertical line setTimeout(function () { svg1Selection.append("line") .attr("x1", 330) // X-coordinate of the starting point .attr("y1", 50) // Y-coordinate of the starting point .attr("x2", 330) // X-coordinate of the ending point .attr("y2", 450) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "goldenrod"); }, 2000); return svg1Selection.node(); } }; if(l==2){ const existingSvg = d3.select("#mySvg"); if (existingSvg.size() > 0) { // Create a deep copy of the existing SVG const svg2 = existingSvg.node().cloneNode(true); // Now, you can use D3 to manipulate the new svg1 selection const svg2Selection = d3.select(svg2); // Select the text element by its class svg2Selection.selectAll(".Text_1") .text("Remove everything in X not explained by Z"); // Move black dots to respective lines with transitions to vertical line // setTimeout(function() { svg2Selection.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "black"; }) .transition() .duration(3000) .attr("cx", 240) .on("end", () => { }); // }, 6300); //}; // Move golden dots to respective lines with transitions to vertical line setTimeout(function() { svg2Selection.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "goldenrod"; }) .transition() .duration(3000) .attr("cx", 330) .on("end", () => { }); }, 3000); return svg2Selection.node(); } }; if(l==3){ const existingSvg = d3.select("#mySvg"); if (existingSvg.size() > 0) { // Create a deep copy of the existing SVG const svg3 = existingSvg.node().cloneNode(true); // Now, you can use D3 to manipulate the new svg1 selection const svg3Selection = d3.select(svg3); // Select the text element by its class svg3Selection.selectAll(".Text_1") .text("Figure out what difference in Y are explained by Z"); // Add black horizontal line setTimeout(function () { svg3Selection.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 200) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 200) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "black"); }, 1000); // Add golden horizontal line setTimeout(function () { svg3Selection.append("line") .attr("x1", 50) // X-coordinate of the starting point .attr("y1", 290) // Y-coordinate of the starting point .attr("x2", 450) // X-coordinate of the ending point .attr("y2", 290) // Y-coordinate of the ending point .attr("class", "to-disappear") .attr("stroke", "goldenrod"); }, 2000); return svg3Selection.node(); } }; if(l==4){ const existingSvg = d3.select("#mySvg"); if (existingSvg.size() > 0) { // Create a deep copy of the existing SVG const svg4 = existingSvg.node().cloneNode(true); // Now, you can use D3 to manipulate the new svg1 selection const svg4Selection = d3.select(svg4); // Select the text element by its class svg4Selection.selectAll(".Text_1") .text("Remove everything in Y not explained by Z"); // Move black dots to respective lines with transitions to horizontal line svg4Selection.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "black"; }) .transition() .duration(3000) .attr("cy", 200) .on("end", () => { }); // Move golden dots to respective lines with transitions to horizontal line setTimeout(function() { svg4Selection.selectAll("circle") .filter(function () { return this.getAttribute("fill") === "goldenrod"; }) .transition() .duration(3000) .attr("cy", 290) .on("end", () => { }); }, 3000); return svg4Selection.node(); } }; if(l==5){ const existingSvg = d3.select("#mySvg"); if (existingSvg.size() > 0) { // Create a deep copy of the existing SVG const svg5 = existingSvg.node().cloneNode(true); // Now, you can use D3 to manipulate the new svg1 selection const svg5Selection = d3.select(svg5); // Select the text element by its class svg5Selection.selectAll(".Text_1") .text("Draw a line between the points. The slope is the effect of X on Y."); setTimeout(function () { svg5Selection.selectAll(".to-disappear") // Select by class .transition() .duration(1000) // Adjust the duration to control the fade-out speed .attr("opacity", 0) // Set the opacity to 0 to make them disappear .remove(); // Remove the lines from the SVG }, 1000); // Create a delay of 12.5 seconds before drawing the blue line setTimeout(function () { // Add a blue line that starts at (240, 200) and ends at (330, 290) svg5Selection.append("line") .attr("x1", 240) // X-coordinate of the starting point .attr("y1", 200) // Y-coordinate of the starting point .attr("x2", 330) // Initial X-coordinate of the ending point (same as starting point) .attr("y2", 290) // Initial Y-coordinate of the ending point (same as starting point) .attr("stroke", "blue") .attr("stroke-width", 3) .transition() .duration(2000) // 2 seconds for the line to extend .attr("x2", 330) // Final X-coordinate of the ending point .attr("y2", 290); // Final Y-coordinate of the ending point }, 3000); // 12.5 seconds (12500 milliseconds) return svg5Selection.node(); } }; } 35:[] 2f:{"id":"671d7db82b3df185","slug":null,"title":"Simple D3","thumbnail":"d3248afce324d023347c2f2c0f06214cb65356a0ed33b869b89fbea65aa6e2e0","access_level":"public","create_time":"$D2023-10-23T06:31:04.975Z","update_time":"$D2023-12-15T15:13:21.471Z","view_time":null,"first_public_time":"$D2023-10-23T06:31:04.975Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ae09c890574f6c53","login":"abhisek-banerjee","name":"abhisek banerjee","avatar_url":"https://avatars-next.observableusercontent.com/d5466158559b26b1e5d19aab8c889889deb937452d84c49dfd6ccae261a0884b","tier":"starter_2024"},"version":291,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"26c7ddda3d62c7d0","login":"abhisek-banerjee","name":"abhisek banerjee","avatar_url":"https://avatars-next.observableusercontent.com/d5466158559b26b1e5d19aab8c889889deb937452d84c49dfd6ccae261a0884b","tier":null}],"members":[{"type":"individual","id":"26c7ddda3d62c7d0","login":"abhisek-banerjee","name":"abhisek banerjee","avatar_url":"https://avatars-next.observableusercontent.com/d5466158559b26b1e5d19aab8c889889deb937452d84c49dfd6ccae261a0884b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Simple D3","cells":[{"id":0,"value":"# IV estimation\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"