2b:null 2c:["$","title",null,{"children":"Women Participation in the Olympics | Shad Frigui | Observable"}] 31:Tb1a,viz = () => { const axisCommon = { fontSize: 14, fill: "#333" }; const dotCommon = { x: "year", y: "percentage", r: "participants", fill: "season" }; const plot = Plot.plot({ // Dimensions width: svgWidth, height: svgHeight, marginTop: 20, marginRight: 50, marginBottom: 30, marginLeft: 30, // Scales y: { percent: true, insetTop: 20 }, r: { range: [2, 17] }, color: { domain: ["summer", "winter"], range: ["#f4c20d", "#a780b8"] }, // Other top-level options // Facet based on svgWidth for a responsive design // If svgWidth < 480, facet on y (facetX: null); otherwise, facet on x (facetY: null) facet: { data: data, x: facetX, y: facetY }, axis: null, label: null, padding: padding, style: { background: bgColor, fontFamily: franklinLight, overflow: "visible" }, marks: [ // X-axis Plot.axisX({ ...axisCommon, ticks: [1900, 1940, 1980, 2020], tickFormat: "Y", tickSize: 8, stroke: "#c2c2c2" }), Plot.ruleY([0], { stroke: "#c2c2c2" }), // Y-axis gridlines Plot.gridY({ ticks: [10, 20, 30, 40, 50], stroke: "#e8e8e8", strokeOpacity: 1, shapeRendering: "crispEdges" }), // Y-axis Plot.axisY({ ...axisCommon, ticks: [0, 10, 20, 30, 40, 50], tickFormat: (y, i, ticks) => `${y}%${i === ticks.length - 1 ? " of total athletes" : ""}`, tickSize: 0, textAnchor: "start", textStroke: bgColor, textStrokeWidth: 6, dx: -19 }), // Dot marks Plot.dot(data, { ...dotCommon, fillOpacity: 0.8, stroke: (d) => (d.year === 2024 ? "#000" : bgColor), strokeWidth: 1, title: (d) => `${d.city} ${d.year}\n${d3.format(",")( d.participants )} women (${d3.format(".1%")(d.percentage)})`, tip: { fillOpacity: 0.95, stroke: "none", fontSize: 14, lineHeight: 1.2 } }), Plot.text(data, { filter: (d) => d.year === 2024, x: "year", y: "percentage", text: (d) => `${d.city}\n${d.year}`, textAnchor: "start", lineAnchor: "bottom", fontSize: 16, lineHeight: 1.1, fill: "#000", dx: 5, dy: -20 }), // Hover effect on dots Plot.dot( data, Plot.pointer({ ...dotCommon, stroke: "#000", strokeWidth: 2 }) ), // Legend helper legend([10, 1000, 5000], { r: (d) => d, title: (d, i, ticks) => `${d}${i === ticks.length - 1 ? " women" : ""}` }) ] }); return plot; }32:T5bb,// Adapted from legend = (data, options) => Plot.dot(data, { ...options, facetAnchor: legendFacetAnchor, frameAnchor: legendFrameAnchor, stroke: "#000", strokeWidth: 0.8, dx: legendDx, dy: legendDy, render: (i, s, v, d, c, next) => { const g = next(i, s, v, d, c); const tickSize = 23; d3.select(g) .selectAll("circle") .each(function (i) { const r = -this.getAttribute("r"); const x = +this.getAttribute("cx"); const y = +this.getAttribute("cy"); const title = d3.select(this).select("title"); this.setAttribute("transform", `translate(0,${-r})`); // Add ticks d3.select(g) .append("line") .attr("x1", x) .attr("y1", y - 2 * r) .attr("x2", x + tickSize) .attr("y2", y - 2 * r) .style("stroke", "#000") .style("stroke-dasharray", "4, 2"); // Add labels d3.select(g) .append("text") .attr("x", x + tickSize + 2) .attr("y", y - 2 * r) .style("alignment-baseline", "middle") .style("text-anchor", "start") .style("font-size", "14px") .style("fill", "#000") .style("stroke", bgColor) .style("paint-order", "stroke fill") .text(title.text()); title.remove(); }); return g; } })33:[{"id":"1900b3bb3c9fb2a3f83319373b722e54d885d1475a9d196baf1426e5e0c40e5bb2fcecf0e07e1c7a69cf60d60582c6ae725321b9b9310303b8cec486aa8f2e3d","href":"https://static.observableusercontent.com/files/1900b3bb3c9fb2a3f83319373b722e54d885d1475a9d196baf1426e5e0c40e5bb2fcecf0e07e1c7a69cf60d60582c6ae725321b9b9310303b8cec486aa8f2e3d","name":"women-participation-olympics.png","type":"image/png","lastModified":1721925403196.167,"size":242640},{"id":"459a52bcfd96779b339fd6809f6e427e02c443d8ec3b158f02f3c52c4fcb0b9e7d582c92a5bedcd7965b63ab7ecb3f60f4b26bb0657ae5ea9f4f9a79f7350fb0","href":"https://static.observableusercontent.com/files/459a52bcfd96779b339fd6809f6e427e02c443d8ec3b158f02f3c52c4fcb0b9e7d582c92a5bedcd7965b63ab7ecb3f60f4b26bb0657ae5ea9f4f9a79f7350fb0","name":"women-participation-olympics.csv","type":"text/csv","lastModified":1721925426838.841,"size":2662}] 2f:{"id":"afd67ec36d74410e","slug":"women-participation-olympics","title":"Women Participation in the Olympics","thumbnail":"e5b430489eb88e18808a6cea829db5393ed30d9da41504a9ec90361a4da26012","access_level":"public","create_time":"$D2024-07-24T01:21:57.383Z","update_time":"$D2024-08-28T19:50:42.423Z","view_time":null,"first_public_time":"$D2024-07-25T16:58:06.277Z","fork":true,"stars":15,"starred":false,"owner":{"type":"team","id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/635800f7fe5494a1bc548666985c01c02a373cb79c71182e874bdc85efcd6913","tier":"starter_2024"},"version":7673,"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":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"0b8b86046f742573","slug":"public","title":"Shad's Graphics","owner":{"id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui"}},"type":"notebook","body":{"title":"Women Participation in the Olympics","cells":[{"id":1457,"value":"# Women Participation in the Olympics\n`Published July 25, 2024`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6878,"value":"For the first time in Olympic history, the Paris 2024 Games, starting on July 26, will feature an equal number of female and male athletes—a historic milestone for gender equality in sports.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6896,"value":"

Participation of women athletes in the Summer \n and Winter Olympic Games\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7497,"value":"viz()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6904,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7572,"value":"For rich text support in tooltips, please upvote this [GitHub issue](https://github.com/observablehq/plot/issues/1767) by adding a 👍 reaction to the top post.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7488,"value":"## Static visualization for social media publishing\nI tried to match the New York Times' style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7490,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7492,"value":"vizStatic = FileAttachment(\"women-participation-olympics.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7500,"value":"---\n## Graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5821,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7028,"value":"facetX= svgWidth < 480 ? null : \"season\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7030,"value":"facetY = svgWidth < 480 ? \"season\" : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7045,"value":"padding = svgWidth < 480 ? 0.08 : 0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6883,"value":"svgWidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7040,"value":"svgHeight = svgWidth < 480 ? 750 : 375","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2448,"value":"bgColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6951,"value":"#### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5972,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7026,"value":"legendFacetAnchor = svgWidth < 480 ? \"top\" : \"right\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7071,"value":"legendFrameAnchor = svgWidth < 480 ? \"bottom-right\" : \"top-right\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7073,"value":"legendDx = svgWidth < 480 ? -70 : -105","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7402,"value":"legendDy = svgWidth < 480 ? -45 : -30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3651,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6880,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5615,"value":"data = await FileAttachment(\"women-participation-olympics.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7579,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7577,"value":"import {\n franklinLight,\n iconArrowCursor,\n iconHandTap\n} from \"@shadfriguii/fonts-and-icons\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"