2b:null 2c:["$","title",null,{"children":"How Couples Met | Christophe Yamahata | Observable"}] 31:T411,viewof display_inspect = { const el = htl.html`

Appendix

⇣ Check to inspect the notebook script

`; const checkbox = el.querySelector("input"); const spacer = el.querySelector("div"); function update() { const show = checkbox.checked; document.querySelectorAll(".observablehq--inspect").forEach(node => { if (el.contains(node)) return; node.style.display = show ? "" : "none"; }); spacer.style.height = show ? "0" : "20vh"; } checkbox.addEventListener("change", update); const observer = new MutationObserver(update); observer.observe(document.body, { childList: true, subtree: true }); update(); invalidation.then(() => observer.disconnect()); return el; }32:T59f,raceImages = [ { name: "Coworkers", image: await (await FileAttachment("co-workers.jpg")).url(),}, { name: "Met Online", image: await (await FileAttachment("met_online.png")).url(),}, { name: "Bar or Restaurant", image: await (await FileAttachment("cocktail.png")).url(),}, { name: "Through Friend", image: await (await FileAttachment("Friends.png")).url(),}, { name: "Through Family", image: await (await FileAttachment("family.jpg")).url(),}, { name: "Church", image: await (await FileAttachment("church.jpg")).url(),}, { name: "College", image: await (await FileAttachment("students.PNG")).url(),}, { name: "Primary or Secondary School", image: await (await FileAttachment("school_kids.png")).url(),}, { name: "Volunteer Organization", image: await (await FileAttachment("volunteer.png")).url(),}, { name: "Customer-Client Relationship", image: await (await FileAttachment("customer_client.png")).url(),}, { name: "Party", image: await (await FileAttachment("party.jpg")).url(),}, { name: "Public Place", image: await (await FileAttachment("park.PNG")).url(),}, { name: "Through Neighbour", image: await (await FileAttachment("neighbour.png")).url(),}, { name: "On Vacation", image: await (await FileAttachment("vacation.png")).url(),}, { name: "Blind Date", image: await (await FileAttachment("blind_date.png")).url(),}, { name: "Military", image: await (await FileAttachment("military.png")).url(),}, ]33:T4fc,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -10) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -10) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }34:[{"id":"dff970fdfa21630022040a7df42e510d624655119dac0ef701d20c504416758b56408f1fdb09bb2ef402574bb8b86e79e3989a5b3e11af7e1a695605818c40c7","href":"https://static.observableusercontent.com/files/dff970fdfa21630022040a7df42e510d624655119dac0ef701d20c504416758b56408f1fdb09bb2ef402574bb8b86e79e3989a5b3e11af7e1a695605818c40c7","name":"blind_date.png","type":"image/png","lastModified":1773006502595.752,"size":14047},{"id":"d5d7bb38215830b633a276d1153c07825af0cd1688903780f7c7fb7dc04f08fb9fe8ace431d1b8fc8d5105d010344d251ecf1b9b9aa0ce1d4c9eb94941d8ebba","href":"https://static.observableusercontent.com/files/d5d7bb38215830b633a276d1153c07825af0cd1688903780f7c7fb7dc04f08fb9fe8ace431d1b8fc8d5105d010344d251ecf1b9b9aa0ce1d4c9eb94941d8ebba","name":"park.PNG","type":"image/png","lastModified":1773003948477.716,"size":50752},{"id":"9cc5a2db37e63090faa358d66e4debabd6750c83931c6fdf2a2b11415518a8b629536f03690c3db1c8c64225c310ced2fd98ea87bf1d25b6c34295044568551a","href":"https://static.observableusercontent.com/files/9cc5a2db37e63090faa358d66e4debabd6750c83931c6fdf2a2b11415518a8b629536f03690c3db1c8c64225c310ced2fd98ea87bf1d25b6c34295044568551a","name":"party.jpg","type":"image/jpeg","lastModified":1772996020090.215,"size":138458},{"id":"74ab4e7ef69cb3f78737e561bed5ddddd4368e2e02fef1a2bb9b4101552f6566f5a509f6c0a5dc1218d778b62622e8e4fb04df541e45c2ddf7a814bd1c3ec3fc","href":"https://static.observableusercontent.com/files/74ab4e7ef69cb3f78737e561bed5ddddd4368e2e02fef1a2bb9b4101552f6566f5a509f6c0a5dc1218d778b62622e8e4fb04df541e45c2ddf7a814bd1c3ec3fc","name":"how_couples_met_1960-2010_decade-.csv","type":"text/csv","lastModified":1772999890844.751,"size":5307},{"id":"2415dd3144d0b26c7f8b5a19b2310aa7bd1e6efaad2cd1760c791a48dd362acc0b1c246e3596a871305f9da38d8245594c7cb1df87f891faa4a3793adad6fba9","href":"https://static.observableusercontent.com/files/2415dd3144d0b26c7f8b5a19b2310aa7bd1e6efaad2cd1760c791a48dd362acc0b1c246e3596a871305f9da38d8245594c7cb1df87f891faa4a3793adad6fba9","name":"co-workers.jpg","type":"image/jpeg","lastModified":1773000285851.745,"size":57680},{"id":"3aa62b27697233b49682bad70349c1784fffb146b78bacef6105e18f99cd5a83ded42fbdf92d7758dabca6ae5f7b16ea5aa5c36900f68f6056fec2dda920e024","href":"https://static.observableusercontent.com/files/3aa62b27697233b49682bad70349c1784fffb146b78bacef6105e18f99cd5a83ded42fbdf92d7758dabca6ae5f7b16ea5aa5c36900f68f6056fec2dda920e024","name":"Friends.png","type":"image/png","lastModified":1772995281189.378,"size":68629},{"id":"b0e49ded40f57a83b47913b94ca2b96d43740504288bfd7a044c2d5aa373854a67a4bf65a3fc1ff06e25f22994e06558227ae796092a97f6f933575471f81eb2","href":"https://static.observableusercontent.com/files/b0e49ded40f57a83b47913b94ca2b96d43740504288bfd7a044c2d5aa373854a67a4bf65a3fc1ff06e25f22994e06558227ae796092a97f6f933575471f81eb2","name":"family.jpg","type":"image/jpeg","lastModified":1773005889484.166,"size":45636},{"id":"2c8fa7194609ddb5683a619c263d13dbfd081f2d984670890af4b6d1e4a8cc58f2462906a6312b850598fd54491e32e14073a61fd93844eced817d6fdc12033e","href":"https://static.observableusercontent.com/files/2c8fa7194609ddb5683a619c263d13dbfd081f2d984670890af4b6d1e4a8cc58f2462906a6312b850598fd54491e32e14073a61fd93844eced817d6fdc12033e","name":"volunteer.png","type":"image/png","lastModified":1773000176065.972,"size":161070},{"id":"e4cea12363d6e776e8ba23497dc6a6825ac9cf018b421da4638ce623076a4ea9d30a69141c881d5c04d85c5bd1e14498ebc1bedaaf37fe86bb836f7533121d01","href":"https://static.observableusercontent.com/files/e4cea12363d6e776e8ba23497dc6a6825ac9cf018b421da4638ce623076a4ea9d30a69141c881d5c04d85c5bd1e14498ebc1bedaaf37fe86bb836f7533121d01","name":"cocktail.png","type":"image/png","lastModified":1772993357405.935,"size":390875},{"id":"676216d4a21eac944060e7ba9f63c66018fec31921ae10f9948702325bbe7c3c771cc982b520acdbb33b4f681c437a9b0b6a73edfa58f61dcb5e39b4c57fdaa4","href":"https://static.observableusercontent.com/files/676216d4a21eac944060e7ba9f63c66018fec31921ae10f9948702325bbe7c3c771cc982b520acdbb33b4f681c437a9b0b6a73edfa58f61dcb5e39b4c57fdaa4","name":"neighbour.png","type":"image/png","lastModified":1773004425075.678,"size":18427},{"id":"7b0eec78d507dfffe1479cc072bb8d5a0873e6020f73327a0d85ead0e0fa08cb7097d02208339910045726651c1b67b90b10a85cdc6dd209b3f334c9601df695","href":"https://static.observableusercontent.com/files/7b0eec78d507dfffe1479cc072bb8d5a0873e6020f73327a0d85ead0e0fa08cb7097d02208339910045726651c1b67b90b10a85cdc6dd209b3f334c9601df695","name":"school_kids.png","type":"image/png","lastModified":1773005620218.775,"size":77300},{"id":"7a93259736de64d55e1b1738519f5a9870b319f6bcdaf6c5b1c4ddcc663524688fbd0654d14719291c89b82863315cc955deec5b2bdb941cdb5d9aedb559c0d0","href":"https://static.observableusercontent.com/files/7a93259736de64d55e1b1738519f5a9870b319f6bcdaf6c5b1c4ddcc663524688fbd0654d14719291c89b82863315cc955deec5b2bdb941cdb5d9aedb559c0d0","name":"met_online.png","type":"image/png","lastModified":1773000808723.035,"size":17621},{"id":"30ef55d36ca8d522ec81251277ce262ac45e8cf0e597685dfa9c45e48f7d7b0c27bd1ee0af92ba8cf254a3398c5d69134b5548af312ff5d139d7ac1d64b9b231","href":"https://static.observableusercontent.com/files/30ef55d36ca8d522ec81251277ce262ac45e8cf0e597685dfa9c45e48f7d7b0c27bd1ee0af92ba8cf254a3398c5d69134b5548af312ff5d139d7ac1d64b9b231","name":"military.png","type":"image/png","lastModified":1773006048394.969,"size":39517},{"id":"45eab38d1f2bf82752103f1c168b15b298c9d7708295d435b1c4a0a5c5db550a599f1454c5eb7e27e438091952ed3e670cf948ea90f80643160d98aacd5df777","href":"https://static.observableusercontent.com/files/45eab38d1f2bf82752103f1c168b15b298c9d7708295d435b1c4a0a5c5db550a599f1454c5eb7e27e438091952ed3e670cf948ea90f80643160d98aacd5df777","name":"students.PNG","type":"image/png","lastModified":1772995737924.129,"size":179145},{"id":"62becb7fd8b36525da5d4f3dcfd2d1177f5cffafbd9b2ee37d25c32d6c9f4dcf75a2f48f5d9fba69909a5f0f9ddff2228390046460b735ef87cb59b6a1314cca","href":"https://static.observableusercontent.com/files/62becb7fd8b36525da5d4f3dcfd2d1177f5cffafbd9b2ee37d25c32d6c9f4dcf75a2f48f5d9fba69909a5f0f9ddff2228390046460b735ef87cb59b6a1314cca","name":"vacation.png","type":"image/png","lastModified":1773005216997.48,"size":42541},{"id":"47787b254c1ee2fc594daefbde4e01bdb5ac8264647ac9bdc94bcbedf4173b3e60b914984558e120c05f713a79b7ee15ed8a434ca5cf40362d39fab3ca2c9278","href":"https://static.observableusercontent.com/files/47787b254c1ee2fc594daefbde4e01bdb5ac8264647ac9bdc94bcbedf4173b3e60b914984558e120c05f713a79b7ee15ed8a434ca5cf40362d39fab3ca2c9278","name":"customer_client.png","type":"image/png","lastModified":1773000072627.37,"size":108702},{"id":"d89cd33f8dcb5ad0fb2cb456e7f89dd9c42cc89a096584cddb6bc43cb88777cbbc5654376e654fc2057dfd9af40a0be5a032d763a6a238b0e933318a5092d24e","href":"https://static.observableusercontent.com/files/d89cd33f8dcb5ad0fb2cb456e7f89dd9c42cc89a096584cddb6bc43cb88777cbbc5654376e654fc2057dfd9af40a0be5a032d763a6a238b0e933318a5092d24e","name":"church.jpg","type":"image/jpeg","lastModified":1773004878861.808,"size":44475}] 2f:{"id":"6da4007b0784320c","slug":"how-couples-met","title":"How Couples Met","thumbnail":"74b7156687ae244b8a6e93445ebb41b8ed15e31f8cbf9ea5a9eafaaa53cdbd11","access_level":"public","create_time":"$D2026-03-08T17:22:32.238Z","update_time":"$D2026-09-04T23:53:03.378Z","view_time":null,"first_public_time":"$D2026-03-08T19:33:07.832Z","fork":{"id":"4fc891603c4652ee","slug":"bar-chart-race-with-images","title":"Bar Chart Race with Images","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":3852,"publish_version":3852,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"5bf9536d79c83bd9","slug":"chart-races","title":"Chart races","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"How Couples Met","cells":[{"id":239,"value":"md`# How Couples Met\n## **Universe**: English-literate adults in the United States, 1960–2010\n\nData from the *[How Couples Meet and Stay Together](https://data.stanford.edu/hcmst2017)* survey. CSV file adapted from work by [Nathan Yau (Flowingdata)](https://flowingdata.com/2019/03/15/shifts-in-how-couples-meet-online-takes-the-top-spot/).\n

Bar Chart Race based on a notebook by [Mike Bostock](https://observablehq.com/@d3/bar-chart-race) and a fork by [Jeremy Ashkenas](https://observablehq.com/@jashkenas/iowa-caucuses-the-bar-chart-race).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3147,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":0,"value":"chart = {\n replay;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg); \n const updateLabels = labels(svg);\n const updateImages = images(svg);\n const updateTicker = ticker(svg);\n\n yield svg.node();\n\n for (const keyframe of keyframes) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n\n // Extract the top bar’s value.\n x.domain([0,keyframe[1][0].value]);\n\n updateBars(keyframe, transition);\n updateAxis(keyframe, transition);\n updateLabels(keyframe, transition);\n updateImages(keyframe, transition);\n updateTicker(keyframe, transition);\n\n invalidation.then(() => svg.interrupt());\n await transition.end();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3782,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":982,"value":"viewof replay = html`