2b:null 2c:["$","title",null,{"children":"Final Project Fork1 | Liwen Peng | Observable"}] 31:Tc65,figure1a = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Not a Perfect Matching";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 1(a)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes = []; nodes.push([width / 8 * 3, boxHeight / 3]); // top left = 0 nodes.push([width / 8 * 5, boxHeight / 3]); // top right = 1 nodes.push([width / 8 * 3, boxHeight / 1.5]); // bottom left = 2 nodes.push([width / 8 * 5, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); // Create a horizontal link from the first node to the last const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); // Append the link to the svg element var path1 = svg.append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element var path2 = svg.append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none'); // use for the intial offset to "hide" the graph const length1 = path1.node().getTotalLength(); const length2 = path2.node().getTotalLength(); function repeat() { // Animate the path by setting the initial offset and dasharray and then transition the offset to 0 path1.attr("stroke-dasharray", length1 + " " + length1) .attr("stroke-dashoffset", length1) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(2000) .on("end", () => setTimeout(repeat, 3000)); path2.attr("stroke-dasharray", length2 + " " + length2) .attr("stroke-dashoffset", length2) .transition() .delay(2000) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(2000) .on("end", () => setTimeout(repeat, 3000)); }; // Append the nodes to the svg element for (let i = 0; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes[i][0] - 9) .attr("y", nodes[i][1] + 5) .attr("font-size", 20) .attr("fill", "black") .text("r" + (i / 2 + 1)); } for (let i = 1; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes[i][0] - 11) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2); } repeat(); return svg.node(); }32:T8d0,figure1b = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Perfect Matching";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 1(b)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes = []; nodes.push([width / 8 * 3, boxHeight / 3]); // top left = 0 nodes.push([width / 8 * 5, boxHeight / 3]); // top right = 1 nodes.push([width / 8 * 3, boxHeight / 1.5]); // bottom left = 2 nodes.push([width / 8 * 5, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); // Create a vertical link from the first node to the third const link2 = d3.linkHorizontal()({ source: nodes[2], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none'); // Append the nodes to the svg element for (let i = 0; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes[i][0] - 9) .attr("y", nodes[i][1] + 5) .attr("font-size", 20) .attr("fill", "black") .text("r" + (i / 2 + 1)); } for (let i = 1; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes[i][0] - 11) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2); } return svg.node(); }33:T1198,figure1 = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); // left diagram svg.append("text") .attr("class", "title") .attr("x", width / 4) .attr("y", 45) .html(function (d) {return "Not a Perfect Matching";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 4) .attr("y", 260) .html(function (d) {return "Figure 1(a)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes1 = []; nodes1.push([width / 8 * 1, boxHeight / 3]); // top left = 0 nodes1.push([width / 8 * 3, boxHeight / 3]); // top right = 1 nodes1.push([width / 8 * 1, boxHeight / 1.5]); // bottom left = 2 nodes1.push([width / 8 * 3, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1_1 = d3.linkHorizontal()({ source: nodes1[0], target: nodes1[1] }); // Create a horizontal link from the first node to the last const link1_2 = d3.linkHorizontal()({ source: nodes1[0], target: nodes1[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1_1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link1_2) .attr('stroke', 'black') .attr('fill', 'none'); // Append the nodes to the svg element for (let i = 0; i < nodes1.length; i = i + 2) { svg .append('circle') .attr('cx', nodes1[i][0]) .attr('cy', nodes1[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes1[i][0] - 9) .attr("y", nodes1[i][1] + 5) .attr("font-size", 20) .attr("fill", "black") .text("r" + (i / 2 + 1)); } for (let i = 1; i < nodes1.length; i = i + 2) { svg .append('circle') .attr('cx', nodes1[i][0]) .attr('cy', nodes1[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes1[i][0] - 11) .attr("y", nodes1[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2); } // right diagram svg.append("text") .attr("class", "title") .attr("x", width / 4 * 3) .attr("y", 45) .html(function (d) {return "Perfect Matching";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 4 * 3) .attr("y", 260) .html(function (d) {return "Figure 1(b)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes2 = []; nodes2.push([width / 8 * 5, boxHeight / 3]); // top left = 0 nodes2.push([width / 8 * 7, boxHeight / 3]); // top right = 1 nodes2.push([width / 8 * 5, boxHeight / 1.5]); // bottom left = 2 nodes2.push([width / 8 * 7, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link2_1 = d3.linkHorizontal()({ source: nodes2[0], target: nodes2[1] }); // Create a vertical link from the first node to the third const link2_2 = d3.linkHorizontal()({ source: nodes2[2], target: nodes2[3] }); // Append the link to the svg element svg .append('path') .attr('d', link2_1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link2_2) .attr('stroke', 'black') .attr('fill', 'none'); // Append the nodes to the svg element for (let i = 0; i < nodes2.length; i = i + 2) { svg .append('circle') .attr('cx', nodes2[i][0]) .attr('cy', nodes2[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes2[i][0] - 9) .attr("y", nodes2[i][1] + 5) .attr("font-size", 20) .attr("fill", "black") .text("r" + (i / 2 + 1)); } for (let i = 1; i < nodes2.length; i = i + 2) { svg .append('circle') .attr('cx', nodes2[i][0]) .attr('cy', nodes2[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes2[i][0] - 11) .attr("y", nodes2[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2); } return svg.node(); }34:Taed,figure2a = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h0, h1)", "(r0, r1)", "(h0, h1)", "(r0, r1)"] svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Matching with a Blocking Pair";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 2(a)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes = []; nodes.push([width / 8 * 3, boxHeight / 3]); // top left = 0 nodes.push([width / 8 * 5, boxHeight / 3]); // top right = 1 nodes.push([width / 8 * 3, boxHeight / 1.5]); // bottom left = 2 nodes.push([width / 8 * 5, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1 = d3.linkHorizontal()({ source: nodes[1], target: nodes[2] }); // Create a horizontal link from the first node to the third const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); // Create a dash link from the first node to the second to show blocking pair const link3 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') // Append the link to the svg element svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "red"); // Append the nodes to the svg element for (let i = 0; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes[i][0] - 93) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("(h1, h2)" + "\u00A0" + "\u00A0" + "\u00A0" + "r" + (i / 2 + 1)); } for (let i = 1; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes[i][0] - 11) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2 + "\u00A0" + "\u00A0" + " (r1, r2)"); } return svg.node(); }35:T97a,figure2b = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h0, h1)", "(r0, r1)", "(h0, h1)", "(r0, r1)"] svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Matching without Blocking Pairs";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 2(b)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes = []; nodes.push([width / 8 * 3, boxHeight / 3]); // top left = 0 nodes.push([width / 8 * 5, boxHeight / 3]); // top right = 1 nodes.push([width / 8 * 3, boxHeight / 1.5]); // bottom left = 2 nodes.push([width / 8 * 5, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); // Create a horizontal link from the first node to the third const link2 = d3.linkHorizontal()({ source: nodes[2], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') // Append the nodes to the svg element for (let i = 0; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes[i][0] - 93) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("(h1, h2)" + "\u00A0" + "\u00A0" + "\u00A0" + "r" + (i / 2 + 1)); } for (let i = 1; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes[i][0] - 11) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2 + "\u00A0" + "\u00A0" + " (r1, r2)"); } return svg.node(); }36:T1403,figure2 = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h0, h1)", "(r0, r1)", "(h0, h1)", "(r0, r1)"] // left diagram svg.append("text") .attr("class", "title") .attr("x", width / 4) .attr("y", 45) .html(function (d) {return "Matching with a Blocking Pair";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 4) .attr("y", 260) .html(function (d) {return "Figure 2(a)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes1 = []; nodes1.push([width / 8 * 1, boxHeight / 3]); // top left = 0 nodes1.push([width / 8 * 3, boxHeight / 3]); // top right = 1 nodes1.push([width / 8 * 1, boxHeight / 1.5]); // bottom left = 2 nodes1.push([width / 8 * 3, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1_1 = d3.linkHorizontal()({ source: nodes1[1], target: nodes1[2] }); // Create a horizontal link from the first node to the third const link1_2 = d3.linkHorizontal()({ source: nodes1[0], target: nodes1[3] }); // Create a dash link from the first node to the second to show blocking pair const link1_3 = d3.linkHorizontal()({ source: nodes1[0], target: nodes1[1] }); // Append the link to the svg element svg .append('path') .attr('d', link1_1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link1_2) .attr('stroke', 'black') .attr('fill', 'none') // Append the link to the svg element svg .append('path') .attr('d', link1_3) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "red"); // Append the nodes to the svg element for (let i = 0; i < nodes1.length; i = i + 2) { svg .append('circle') .attr('cx', nodes1[i][0]) .attr('cy', nodes1[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes1[i][0] - 92) .attr("y", nodes1[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("(h1, h2)" + "\u00A0" + "\u00A0" + "\u00A0" + "r" + (i / 2 + 1)); } for (let i = 1; i < nodes1.length; i = i + 2) { svg .append('circle') .attr('cx', nodes1[i][0]) .attr('cy', nodes1[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes1[i][0] - 11) .attr("y", nodes1[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2 + "\u00A0" + "\u00A0" + " (r1, r2)"); } // right diagram svg.append("text") .attr("class", "title") .attr("x", width / 4 * 3) .attr("y", 45) .html(function (d) {return "Matching without Blocking Pairs";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 4 * 3) .attr("y", 260) .html(function (d) {return "Figure 2(b)";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes2 = []; nodes2.push([width / 8 * 5, boxHeight / 3]); // top left = 0 nodes2.push([width / 8 * 7, boxHeight / 3]); // top right = 1 nodes2.push([width / 8 * 5, boxHeight / 1.5]); // bottom left = 2 nodes2.push([width / 8 * 7, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link2_1 = d3.linkHorizontal()({ source: nodes2[0], target: nodes2[1] }); // Create a horizontal link from the first node to the third const link2_2 = d3.linkHorizontal()({ source: nodes2[2], target: nodes2[3] }); // Append the link to the svg element svg .append('path') .attr('d', link2_1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link2_2) .attr('stroke', 'black') .attr('fill', 'none') // Append the nodes to the svg element for (let i = 0; i < nodes2.length; i = i + 2) { svg .append('circle') .attr('cx', nodes2[i][0]) .attr('cy', nodes2[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes2[i][0] - 92) .attr("y", nodes2[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("(h1, h2)" + "\u00A0" + "\u00A0" + "\u00A0" + "r" + (i / 2 + 1)); } for (let i = 1; i < nodes2.length; i = i + 2) { svg .append('circle') .attr('cx', nodes2[i][0]) .attr('cy', nodes2[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes2[i][0] - 11) .attr("y", nodes2[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2 + "\u00A0" + "\u00A0" + " (r1, r2)"); } return svg.node(); }37:T98f,figure3 = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h0, h1)", "(r0, r1)", "(h0, h1)", "(r0, r1)"] svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Stable Matching: Perfect Matching without Blocking Pairs";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 3";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes = []; nodes.push([width / 8 * 3, boxHeight / 3]); // top left = 0 nodes.push([width / 8 * 5, boxHeight / 3]); // top right = 1 nodes.push([width / 8 * 3, boxHeight / 1.5]); // bottom left = 2 nodes.push([width / 8 * 5, boxHeight / 1.5]); // bottom right = 3 // Create a horizontal link from the first node to the second const link1 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); // Create a horizontal link from the first node to the third const link2 = d3.linkHorizontal()({ source: nodes[2], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') // Append the nodes to the svg element for (let i = 0; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes[i][0] - 92) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("(h1, h2)" + "\u00A0" + "\u00A0" + "\u00A0" + "r" + (i / 2 + 1)); } for (let i = 1; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes[i][0] - 11) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2 + "\u00A0" + "\u00A0" + " (r1, r2)"); } return svg.node(); }38:T54d0,figure4 = { const boxHeight = 420; const iterationHeight = 400; const iterationFontSize = "17px"; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h1, h2, h3, h4)", "(r3, r2, r1, r4)", "(h1, h2, h3, h4)", "(r1, r2, r3, r4)", "(h2, h3, h1, h4)", "(r3, r4, r2, r1)", "(h3, h2, h4, h1)", "(r4, r3, r2, r1)"] svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 20) .html(function (d) {return "Gale Shapley Algorithm for Stable Matching";}) .style("font-size", "20px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 370) .html(function (d) {return "Figure 4";}) .style("font-size", "13px") .attr("text-anchor", 'middle'); let nodes = []; nodes.push([width / 8 * 3, (boxHeight / 5) * 1]); // top left = 0 nodes.push([width / 8 * 5, (boxHeight / 5) * 1]); // top right = 1 nodes.push([width / 8 * 3, (boxHeight / 5) * 2]); nodes.push([width / 8 * 5, (boxHeight / 5) * 2]); nodes.push([width / 8 * 3, (boxHeight / 5) * 3]); nodes.push([width / 8 * 5, (boxHeight / 5) * 3]); nodes.push([width / 8 * 3, (boxHeight / 5) * 4]); nodes.push([width / 8 * 5, (boxHeight / 5) * 4]); if (iteration == 1) { const link1 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link3 = d3.linkHorizontal()({ source: nodes[4], target: nodes[3] }); const link4 = d3.linkHorizontal()({ source: nodes[6], target: nodes[5] }); // Append the link to the svg element var path1 = svg.append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); var path2 = svg.append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); var path3 = svg.append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); // Append the link to the svg element var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); // use for the intial offset to "hide" the graph const length1 = path1.node().getTotalLength(); const length2 = path2.node().getTotalLength(); const length3 = path3.node().getTotalLength(); const length4 = path4.node().getTotalLength(); function repeat() { // Animate the path by setting the initial offset and dasharray and then transition the offset to 0 path1.attr("stroke-dasharray", dash_line + length1) .attr("stroke-dashoffset", length1) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) path2.attr("stroke-dasharray", dash_line + length2) .attr("stroke-dashoffset", length2) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) path3.attr("stroke-dasharray", dash_line + length3) .attr("stroke-dashoffset", length3) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) path4.attr("stroke-dasharray", dash_line + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 1 (propose)";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 2) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[4], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[6], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[0], target: nodes[1] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); svg .append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); var path1 = svg.append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') var path2 = svg.append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') var path3 = svg.append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke", "white"); const length1 = path1.node().getTotalLength(); const length2 = path2.node().getTotalLength(); const length3 = path3.node().getTotalLength(); const length4 = path4.node().getTotalLength(); function repeat() { path1.attr("stroke-dasharray", length1 + " " + length1) .attr("stroke-dashoffset", length1) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1000) path2.attr("stroke-dasharray", length2 + " " + length2) .attr("stroke-dashoffset", length2) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1000) path3.attr("stroke-dasharray", length3 + " " + length3) .attr("stroke-dashoffset", length3) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1000) path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1000) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 1";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 3) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[4], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[6], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); const length4 = path4.node().getTotalLength(); function repeat() { // Animate the path by setting the initial offset and dasharray and then transition the offset to 0 path4.attr("stroke-dasharray", dash_line + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 2 (propose)";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 4) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[6], target: nodes[5] }); const link3 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link4 = d3.linkHorizontal()({ source: nodes[4], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'white') .attr('fill', 'none') const length4 = path4.node().getTotalLength(); function repeat() { path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 2";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 5) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[6], target: nodes[5] }); const link3 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link4 = d3.linkHorizontal()({ source: nodes[4], target: nodes[5] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); const length4 = path4.node().getTotalLength(); function repeat() { path4.attr("stroke-dasharray", dash_line + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 3 (propose)";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 6) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[4], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[6], target: nodes[5] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); svg .append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') var path3 = svg.append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'white') .attr('fill', 'none') const length3 = path4.node().getTotalLength(); const length4 = path4.node().getTotalLength(); function repeat() { path3.attr("stroke-dasharray", length3 + " " + length3) .attr("stroke-dashoffset", length3) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 3";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 7) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[4], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[6], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); const length4 = path4.node().getTotalLength(); function repeat() { path4.attr("stroke-dasharray", dash_line + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 4 (propose)";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } else if (iteration == 8) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[4], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[6], target: nodes[3] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'white') .attr('fill', 'none') const length4 = path4.node().getTotalLength(); function repeat() { path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 4";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } // *****************************************************************// else if (iteration == 9) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[4], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[6], target: nodes[7] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); const length4 = path4.node().getTotalLength(); function repeat() { path4.attr("stroke-dasharray", dash_line + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 5 (propose)";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } // *****************************************************************// else if (iteration == 10) { const link1 = d3.linkHorizontal()({ source: nodes[2], target: nodes[1] }); const link2 = d3.linkHorizontal()({ source: nodes[0], target: nodes[3] }); const link3 = d3.linkHorizontal()({ source: nodes[4], target: nodes[5] }); const link4 = d3.linkHorizontal()({ source: nodes[6], target: nodes[7] }); // Append the link to the svg element svg .append('path') .attr('d', link1) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link2) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link3) .attr('stroke', 'black') .attr('fill', 'none') svg .append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "black"); var path4 = svg.append('path') .attr('d', link4) .attr('stroke', 'black') .attr('fill', 'none') const length4 = path4.node().getTotalLength(); function repeat() { path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(800) }; svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 5";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); repeat(); } // *****************************************************************// // Append the nodes to the svg element for (let i = 0; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A3E4D7'); const text = svg.append("text") .attr("x", nodes[i][0] - 156) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text(preference[i] + "\u00A0" + "\u00A0" + "\u00A0" + "r" + (i / 2 + 1)); } for (let i = 1; i < nodes.length; i = i + 2) { svg .append('circle') .attr('cx', nodes[i][0]) .attr('cy', nodes[i][1]) .attr('r', 20) .style('fill', '#A9CCE3'); const text = svg.append("text") .attr("x", nodes[i][0] - 11) .attr("y", nodes[i][1] + 6) .attr("font-size", 20) .attr("fill", "black") .text("h" + (i + 1) / 2 + "\u00A0" + "\u00A0" + "\u00A0" + preference[i]); } return svg.node(); }39:[] 2f:{"id":"1139f24a7a0c414c","slug":null,"title":"Final Project Fork1","thumbnail":"c69da0d563eb93b8e3c2edfa0799644b5a3046b82b923c2e40405d824c1fd5aa","access_level":"public","create_time":"$D2023-02-25T22:47:00.880Z","update_time":"$D2023-02-26T01:44:52.497Z","view_time":null,"first_public_time":"$D2023-02-25T22:47:00.880Z","has_unpublished_edits":null,"fork":{"id":"a0e7892165f879d3","slug":null,"title":"Final Project","owner":{"id":"3d648461531216f2","login":"liwenp","name":"Liwen Peng"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3d648461531216f2","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":"starter_2024"},"version":486,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a805c41a57924202","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":null}],"members":[{"type":"individual","id":"a805c41a57924202","login":"liwenp","name":"Liwen Peng","avatar_url":"https://avatars-next.observableusercontent.com/dcaed4e45a78e05e1211d4eb1c88110c7eeb3a5e79116a8f9f7966b9a4830016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Final Project Fork1","cells":[{"id":0,"value":"# Final Project Fork1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"dash_line = {return 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \"+ 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \" + 8 + \" \"}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"// viewof iteration = Inputs.range([0, 10], {step: 1, value: 0})\nviewof iteration = Scrubber(\n d3.range(0, 11, 1),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"