2a:null 2b:["$","title",null,{"children":"Paris 2024: Medal Count | Shad Frigui | Observable"}] 30:Ta57,viz = () => { const flagWidth = 20; // Medal count labels const labelCommon = { x: 0, y: "noc", text: "medals", dx: -15, className: "medal-count" }; const goldLabels = Plot.text(medals, { ...labelCommon, filter: (d) => d.medalType === "gold" }); const totalLabels = Plot.text( medals, Plot.groupY( { x: "sum", text: "sum" }, { ...labelCommon } ) ); const plot = Plot.plot({ // Dimensions width: svgWidth, height: svgHeight, margin: 0, // Scales x: { insetLeft: 180, domain: [0, maxTotalMedals] }, y: { domain: sort === "Gold medals" ? sortGoldYDomain : sortTotalYDomain, padding: 0.2 }, color: { domain: ["gold", "silver", "bronze"], range: ["#f9cf12", "#b6b7b9", "#e5812c"] // gold, silver, peru colors // range: ["#ffd700", "#c0c0c0", "#cd853f"] // Other // range: ["#fcc861", "#e2e2e2", "#dcb386"] }, // Other top-level options className: "plot", axis: null, label: null, // Marks marks: [ // NOC flags Plot.image( medals, Plot.selectFirst({ src: "flagURL", frameAnchor: "left", y: "noc", z: "noc", width: flagWidth, dx: 10, className: "noc-flag" }) ), // Y-axis Plot.axisY({ tickFormat: (y) => (y === "Great Britain" ? "Britain" : y), tickSize: 0, dx: flagWidth + 15, className: "y-axis" }), // Waffle marks Plot.waffleX(medals, { filter: (d) => (sort === "Gold medals" ? d.medalType === "gold" : true), x: "medals", y: "noc", fill: "medalType", fillOpacity: 0.8, stroke: "medalType", strokeWidth: 2, gap: 3, rx: "100%" }), // Y-axis gridlines Plot.gridY({ ticks: sort === "Gold medals" ? sortGoldYDomain.slice(0, 9) : sortTotalYDomain.slice(0, 9), dy: dy }), // Medal count labels sort === "Gold medals" ? goldLabels : totalLabels, // Medal type labels sort === "Total medals" ? Plot.text( medals, Plot.stackX({ filter: (d) => d.noc === sortTotalYDomain[0], frameAnchor: "top", x: "medals", text: (d) => d.medalType.replace(/^\w/, (c) => c.toUpperCase()), dy: -9, className: "medal-type" }) ) : null ] }); return plot; }31:[{"id":"92837e7a7c0c012d9da09ddb979774fd39c5529d834824dfe871d5b3e6328a4d05a5df62a0296e1066da8c2913d5be65cbf0b89d3bf346df178fb77817706082","href":"https://static.observableusercontent.com/files/92837e7a7c0c012d9da09ddb979774fd39c5529d834824dfe871d5b3e6328a4d05a5df62a0296e1066da8c2913d5be65cbf0b89d3bf346df178fb77817706082","name":"paris-24-gold-medal-count.png","type":"image/png","lastModified":1723433138945.371,"size":260648},{"id":"6532b34035f04d1841db9a87af7197535a45241cc492c30eebb0bf4440f47d8a6c70a889c408999c62571b8544bf28d2b47374a5e22b1a4d21894e56b6df127c","href":"https://static.observableusercontent.com/files/6532b34035f04d1841db9a87af7197535a45241cc492c30eebb0bf4440f47d8a6c70a889c408999c62571b8544bf28d2b47374a5e22b1a4d21894e56b6df127c","name":"country-flags@2.json","type":"application/json","lastModified":1723418869428.416,"size":22738},{"id":"5d81cf1484f9fbf17a6403e1ad77f9fa6f1be5a048a41b1a1742f07e75a8c65239b624b31f9ed9e7b1f357379a39e34fbe03340206dc0f29e1a346fc07d8acee","href":"https://static.observableusercontent.com/files/5d81cf1484f9fbf17a6403e1ad77f9fa6f1be5a048a41b1a1742f07e75a8c65239b624b31f9ed9e7b1f357379a39e34fbe03340206dc0f29e1a346fc07d8acee","name":"medals@2.json","type":"application/json","lastModified":1723418869428.416,"size":575356}] 2e:{"id":"8c566fafdd96abad","slug":"paris-24-medal-count","title":"Paris 2024: Medal Count","thumbnail":"a3d689d6de50905423544ae907542a5edc70aca36a4bf696146cda5572443c71","access_level":"public","create_time":"$D2024-08-11T23:27:49.428Z","update_time":"$D2024-08-28T22:10:20.184Z","view_time":null,"first_public_time":"$D2024-08-12T02:05:37.516Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/635800f7fe5494a1bc548666985c01c02a373cb79c71182e874bdc85efcd6913","tier":"starter_2024"},"version":6685,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afc1efddfa830eb6","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/ff30c5d300e0b2c956a89730e2aa88e5629872a07345a7bd4bb437c3c8bf55c6","tier":null}],"members":[{"type":"individual","id":"afc1efddfa830eb6","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/ff30c5d300e0b2c956a89730e2aa88e5629872a07345a7bd4bb437c3c8bf55c6","tier":null,"role":"editor"},{"type":"team","id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/635800f7fe5494a1bc548666985c01c02a373cb79c71182e874bdc85efcd6913","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"9d42bae72c949002","reply_to_id":null,"content":"It's probably better to use the range [\"gold\", \"silver\", \"peru\"] for medal colors.","create_time":"$D2024-08-14T02:07:04.349Z","update_time":"$D2024-08-14T02:07:46.563Z","resolved":true,"user":{"type":"individual","id":"19c57ace3238ff26","login":"qcgm1978","name":"Philipp","avatar_url":"https://avatars-next.observableusercontent.com/a2371fc072945861e5c8d49692718d08a8549e9a28475a735bdf615436ac5234","tier":null}},{"id":"d27b3d4eb58f6cab","reply_to_id":"9d42bae72c949002","content":"Thanks for the feedback, Philipp. I initially chose softer colors, but I agree that a familiar palette like the one you suggested works better. I've modified the color range.","create_time":"$D2024-08-15T00:29:05.089Z","update_time":"$D2024-08-16T01:40:37.075Z","resolved":true,"user":{"type":"individual","id":"afc1efddfa830eb6","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/ff30c5d300e0b2c956a89730e2aa88e5629872a07345a7bd4bb437c3c8bf55c6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"0b8b86046f742573","slug":"public","title":"Shad's Graphics","owner":{"id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui"}},"type":"notebook","body":{"titling":"auto","title":"Paris 2024: Medal Count","cells":[{"id":1457,"value":"# Paris 2024: Medal Count\n`Published August 12, 2024`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6498,"value":"The U.S. and China share the title for most golds at the 2024 Olympics; the U.S. leads overall with 126 medals, China came in second with 91.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5378,"value":"

Top 10 countries

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4449,"value":"viewof sort = Inputs.radio([\"Gold medals\", \"Total medals\"], {\n label: \"Sort by\",\n value: \"Total medals\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6503,"value":"viz()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5384,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5879,"value":"I originally planned to add a tooltip for each cell displaying details like the name of the medal winner, sport, etc. However, tooltips are not working correctly with the recently released waffle mark, so I've prepared a simplified dataset where each data point represents an NOC with a specific medal type instead of a medal winner.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5427,"value":"## Static visualization for social media publishing\nShowing only top countries by gold medal count.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6583,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6579,"value":"vizStatic = FileAttachment(\"paris-24-gold-medal-count.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5403,"value":"---\n## Graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5890,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5405,"value":"svgWidth = Math.min(width, 800)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6602,"value":"svgHeight = svgWidth < 480 ? 500 : 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6607,"value":"dy = svgWidth < 480 ? 25 : 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2448,"value":"bgColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3651,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1093,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4263,"value":"medals","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5093,"value":"data = {\n const data = await FileAttachment(\"medals@2.json\").json();\n return data.medalStandings.medalsTable;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6138,"value":"medals = aq\n .from(data)\n .derive({\n gold: aq.escape((d) => d.medalsNumber.find((v) => v.type === \"Total\").gold),\n silver: aq.escape(\n (d) => d.medalsNumber.find((v) => v.type === \"Total\").silver\n ),\n bronze: aq.escape(\n (d) => d.medalsNumber.find((v) => v.type === \"Total\").bronze\n )\n })\n // Fold (pivot longer) medal types\n .fold([\"gold\", \"silver\", \"bronze\"], { as: [\"medalType\", \"medals\"] })\n .join(aq.from(countryFlags), [\"organisation\", \"countryISO3\"])\n .select(\n { organisation: \"nocISO3\" },\n { description: \"noc\" },\n \"medalType\",\n \"medals\",\n \"rank\",\n \"rankTotal\",\n \"flagURL\"\n )\n\n// Without Arquero (steps before joining countryFlags)\n// data.medalsTable.flatMap((d) => {\n// const totalObj = d.medalsNumber.find((v) => v.type === \"Total\");\n\n// return [\"gold\", \"silver\", \"bronze\"].map((type) => ({\n// nocISO3: d.organisation,\n// noc: d.description,\n// medalType: type,\n// medals: totalObj[type]\n// }));\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5892,"value":"countryFlags = FileAttachment(\"country-flags@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6168,"value":"sortGoldYDomain = medals\n .filter((d) => d.medalType === \"gold\" && d.rank <= 10)\n .orderby(\"rank\")\n // .view()\n .array(\"noc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6178,"value":"sortTotalYDomain = medals\n .filter((d) => d.rankTotal <= 10)\n .orderby(\"rankTotal\")\n .dedupe(\"noc\")\n // .view()\n .array(\"noc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6200,"value":"maxTotalMedals = medals\n .groupby(\"nocISO3\")\n .rollup({ total: (d) => op.sum(d.medals) })\n .orderby(aq.desc(\"total\"))\n // .view()\n .get(\"total\", 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5397,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4436,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5392,"value":"import {franklinLight} from \"@shadfriguii/fonts-and-icons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"