2b:null 2c:["$","title",null,{"children":"Final Project Fork2 | Liwen Peng | Observable"}] 31:T8eb,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 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(); }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:T1866,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 var path1_1 = svg.append('path') .attr('d', link1_1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element var path1_2 = svg.append('path') .attr('d', link1_2) .attr('stroke', 'black') .attr('fill', 'none'); const length1_1 = path1_1.node().getTotalLength(); const length1_2 = path1_2.node().getTotalLength(); function repeat1() { // Animate the path by setting the initial offset and dasharray and then transition the offset to 0 path1_1.attr("stroke-dasharray", length1_1 + " " + length1_1) .attr("stroke-dashoffset", length1_1) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(2000) .on("end", () => setTimeout(repeat1, 3000)); path1_2.attr("stroke-dasharray", length1_2 + " " + length1_2) .attr("stroke-dashoffset", length1_2) .transition() .delay(2000) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(2000) .on("end", () => setTimeout(repeat1, 1000)); }; // 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 var path2_1 = svg.append('path') .attr('d', link2_1) .attr('stroke', 'black') .attr('fill', 'none'); // Append the link to the svg element var path2_2 = svg.append('path') .attr('d', link2_2) .attr('stroke', 'black') .attr('fill', 'none'); const length2_1 = path2_1.node().getTotalLength(); const length2_2 = path2_2.node().getTotalLength(); function repeat2() { // Animate the path by setting the initial offset and dasharray and then transition the offset to 0 path2_1.attr("stroke-dasharray", length1_1 + " " + length1_1) .attr("stroke-dashoffset", length1_1) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(2000) .on("end", () => setTimeout(repeat2, 3000)); path2_2.attr("stroke-dasharray", length1_2 + " " + length1_2) .attr("stroke-dashoffset", length1_2) .transition() .delay(2000) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(2000) .on("end", () => setTimeout(repeat2, 1000)); }; // 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); } repeat1(); repeat2(); 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:T1624,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 var path_red = svg.append('path') .attr('d', link1_3) .attr('stroke', 'black') .attr('fill', 'none') .attr("stroke-dasharray", 8) .attr("stroke", "red"); // use for the intial offset to "hide" the graph const length_red = path_red.node().getTotalLength(); function repeat() { // Animate the path by setting the initial offset and dasharray and then transition the offset to 0 path_red.attr("stroke-dasharray", dash_line + length_red) .attr("stroke-dashoffset", length_red) .transition() .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 < 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)"); } repeat(); return svg.node(); }37:Tcde,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 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') 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, 1000)); }; // 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)"); } repeat() return svg.node(); }38:T58d2,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(1800) path2.attr("stroke-dasharray", dash_line + length2) .attr("stroke-dashoffset", length2) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) path3.attr("stroke-dasharray", dash_line + length3) .attr("stroke-dashoffset", length3) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) path4.attr("stroke-dasharray", dash_line + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) }; 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(1800) path2.attr("stroke-dasharray", length2 + " " + length2) .attr("stroke-dashoffset", length2) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) path3.attr("stroke-dasharray", length3 + " " + length3) .attr("stroke-dashoffset", length3) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .delay(1800) .duration(1800) }; 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(1800) }; 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') .attr("stroke", "white"); 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(1800) }; 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(1800) }; 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() .delay(1800) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) path4.attr("stroke-dasharray", length4 + " " + length4) .attr("stroke-dashoffset", length4) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .duration(1800) }; 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(1800) }; 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(1800) }; 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(1800) }; 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(1800) }; 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(); } else if (iteration == 11) { 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') svg.append("text") .attr("x", width / 2) .attr("y", iterationHeight) .html(function (d) {return "Iteration: 5";}) .style("font-size", "iterationFontSize") .attr("text-anchor", 'middle'); } // 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:Tffb,figure5 = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h1, h2)", "(r2, r1)", "(h2, h1)", "(r1, r2)"] svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Proposer Optimality";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 5";}) .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 if (proposer_selected == "Riders") { // 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 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') } else if (proposer_selected == "Horses") { // 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[3], target: nodes[0] }); // 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') } 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, 1000)); }; // 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(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]); } repeat() return svg.node(); }3a:Tffb,figure6 = { const boxHeight = 300; const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]); const preference = ["(h1, h2)", "(r2, r1)", "(h2, h1)", "(r1, r2)"] svg.append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", 45) .html(function (d) {return "Proposer Optimality";}) .style("font-size", "17px") .attr("text-anchor", 'middle'); svg.append("text") .attr("x", width / 2) .attr("y", 260) .html(function (d) {return "Figure 5";}) .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 if (proposer_selected == "Riders") { // 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 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') } else if (proposer_selected == "Horses") { // 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[3], target: nodes[0] }); // 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') } 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, 1000)); }; // 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(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]); } repeat() return svg.node(); }3b:T1f70,const colors = require('colors'); const emoji = require('node-emoji'); const Gender = require('./gender.js'); const Person = require('./person.js'); const tools = require('./tools.js'); const emo = { pray: emoji.get('pray'), grimacing: emoji.get('grimacing'), heartEyes: emoji.get('heart_eyes'), brokenHeart: emoji.get('broken_heart'), cry: emoji.get('cry'), ring: emoji.get('ring'), blush: emoji.get('blush'), sob: emoji.get('sob') }; class StableMarriageProblem { constructor (config) { if (typeof config !== 'object') { throw new Error('StableMarriageProblem can only be instantiated with a config object'); } if (!config.hasOwnProperty('men') || !config.hasOwnProperty('women')) { throw new Error('Config object must have properties "men" and "women" specified'); } if (!config.men instanceof Object || !config.women instanceof Object || Array.isArray(config.men) || Array.isArray(config.women)) { throw new Error('Config object\'s properties "men" and "women" must be key-value paired Objects'); } // The following check can be omitted as soon as different sized sets are supported if (Object.keys(config.men).length !== Object.keys(config.women).length) { throw new Error('Men and women sets need to be of the same size'); } this.n = Object.keys(config.men).length; this.men = []; this.women = []; let configMenKeys = Object.keys(config.men); let configWomenKeys = Object.keys(config.women); let keyMapping = {}; // Create persons and establish a mapping between config keys and internal IDs for (let g in config) { if (g === 'men' || g === 'women') { for (let k in config[g]) { let person = new Person(g); if (keyMapping.hasOwnProperty(k)) { throw new Error('Could not create Person with key "' + k + '": Key already exists'); } keyMapping[k] = person.id; if (g === 'men') { this.men[this.men.length] = person; } else { this.women[this.women.length] = person; } } } } // Map priority lists from config to internal priority lists for (let g in config) { if (g === 'men' || g === 'women') { for (let k in config[g]) { if (!Array.isArray(config[g][k])) { throw new Error('Could not create priority list for ' + ((g === 'men') ? 'man' : 'woman') + ' "' + k + '": Priority list configuration must ' + 'be an Array'); } if (config[g][k].length != this.n) { throw new Error('Could not create priority list for ' + ((g === 'men') ? 'man' : 'woman') + ' "' + k + '": Priority lists must be of ' + 'same size as the whole instance (n=' + this.n + ')');} let person = this.getPersonByID(new Gender(g), keyMapping[k]); person.setPriorityList(config[g][k].map(v => { if (!keyMapping.hasOwnProperty(v)) { throw new Error('Could not create priority list for ' + ((g === 'men') ? 'man' : 'woman') + ' "' + k + '": Unknown key "' + v + '"'); } let knownKeysForOppositeGender = (g === 'men') ? configWomenKeys : configMenKeys; if (knownKeysForOppositeGender.indexOf(v + '') < 0) { throw new Error('Could not create priority list for ' + ((g === 'men') ? 'man' : 'woman') + ' "' + k + '": Key "' + v + '" is invalid '+ '(priority lists may only contain persons of opposite sex)'); } return keyMapping[v]; })); } } } } getPersonByID (gender, id) { var list = (gender.value == 'male') ? this.men : this.women; var c = 0; while (c < list.length) { if (list[c].id == id) { return list[c]; } c++; } return null; } printPriorityTable () { var string = 'MEN:\n'; this.men.forEach(v => { string += v.printPriorityList() + '\n'; }); string += '\nWOMEN:\n'; this.women.forEach(v => { string += v.printPriorityList() + '\n'; }); return string; } existsFreeMan () { var result = false, c = 0; while (c < this.men.length) { if (!this.men[c].engagedWith) { result = true; break; } c++; } return result; } nextFreeMan (index) { var result = null; if (!this.men[index].engagedWith) { result = index; } else { var c = (index+1) % this.men.length; while (c != index) { if (!this.men[c].engagedWith) { result = c; break; } c = (c+1) % this.men.length; } } return result; } propose (manId, womanId) { let man = this.getPersonByID(new Gender('male'), manId), woman = this.getPersonByID(new Gender('female'), womanId); console.log(colors.red(tools.indentify('Man ' + manId, 8) + ': ' + emo.pray + ' "Do you love me, woman ' + womanId + '?"')); var womanString = 'My current husband is number ' + woman.priorityList.indexOf(woman.engagedWith) + ' on my list and you are number ' + woman.priorityList.indexOf(manId) + '.'; if (woman.engagedWith !== null && woman.priorityList.indexOf(woman.engagedWith) < woman.priorityList.indexOf(manId)) { man.nextProposal++; console.log(colors.green(tools.indentify('Woman ' + womanId, 8) + ': ' + emo.grimacing + ' "I don\'t love you, I\'m sorry. ' + womanString + '"')); return false; } console.log(colors.green(tools.indentify('Woman ' + womanId, 8) + ': ' + emo.heartEyes + ' "Yes, I love you! ' + womanString + '"')); this.engage(man, woman); man.nextProposal++; return true; } engage (man, woman) { console.log(''); // divorce if (man.engagedWith !== null) { console.log(colors.cyan(' Man ' + man.id + ' ' + emo.brokenHeart + ' ' + emo.cry + ' Woman ' + man.engagedWith)); this.getPersonByID(new Gender('female'), man.engagedWith).engagedWith = null; } if (woman.engagedWith !== null) { console.log(colors.cyan(' Woman ' + woman.id + ' ' + emo.brokenHeart + ' ' + emo.cry + ' Man ' + woman.engagedWith)); this.getPersonByID(new Gender('male'), woman.engagedWith).engagedWith = null; } //engage console.log(colors.cyan(' Man ' + man.id + ' ' + emo.ring + ' ' + emo.blush + ' Woman ' + woman.id)); man.engagedWith = woman.id; woman.engagedWith = man.id; } match () { var c = 0; while (this.existsFreeMan()) { c = this.nextFreeMan(c); let proposer = this.men[c]; console.log('\n\n\n Man ' + proposer.id + ' is now looking for a partner...'); while (proposer.nextProposal < proposer.priorityList.length && !this.propose(proposer.id, proposer.priorityList[proposer.nextProposal])) { console.log(tools.indentify('', 3) + emo.sob + ' ' + emo.sob + ' ' + emo.sob + ' ' + emo.sob + ' ' + emo.sob + '\n'); } } } } 3c:[] 2f:{"id":"f94bbb03b8c5f137","slug":null,"title":"Final Project Fork2","thumbnail":"023d2f2a1912f29fc1c021b70acb14abf692c2642160b66db2b833f294dd2b6e","access_level":"public","create_time":"$D2023-03-04T22:33:23.018Z","update_time":"$D2023-03-04T23:38:41.313Z","view_time":null,"first_public_time":"$D2023-03-04T22:33:23.018Z","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":666,"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 Fork2","cells":[{"id":0,"value":"# Final Project Fork2","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":false,"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":387,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"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})\n// viewof iteration = Scrubber(\n// d3.range(0, 11, 1),\n// { autoplay: false, delay: 2000, loop: false }\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"viewof iteration = PrevNext()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"iteration","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"PrevNext = () => {\nconst buttons = html`\n\n`\nbuttons.value = 0\n\nbuttons.reset.onclick = event => {\n buttons.value = 0;\n event.preventDefault(); // Don’t submit the form.\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n}\nbuttons.prev.onclick = event => {\n if (buttons.value > 0) {\n buttons.value -= 1;\n } else {\n buttons.value = 0;\n }\n event.preventDefault(); // Don’t submit the form.\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n}\nbuttons.next.onclick = event => {\n if (buttons.value < 11) {\n buttons.value += 1;\n } else {\n buttons.value = 11;\n }\n event.preventDefault(); // Don’t submit the form.\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n}\nreturn buttons\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"function dropdown(options) {\n let dd = html ``\n \n for (var i = 0; i < options.length; i++) {\n var option = document.createElement(\"option\");\n option.value = options[i];\n option.text = options[i];\n dd.appendChild(option);\n }\n \n return dd; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"