2a:null 2b:["$","title",null,{"children":"Women Participation in the Olympics | Shad Frigui | Observable"}] 30: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; }31: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; } })32:[{"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}] 2e:{"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","has_unpublished_edits":null,"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,"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":"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7497,"value":"viz()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6904,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7490,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7492,"value":"vizStatic = FileAttachment(\"women-participation-olympics.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7500,"value":"---\n## Graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5821,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7028,"value":"facetX= svgWidth < 480 ? null : \"season\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7030,"value":"facetY = svgWidth < 480 ? \"season\" : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7045,"value":"padding = svgWidth < 480 ? 0.08 : 0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6883,"value":"svgWidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7040,"value":"svgHeight = svgWidth < 480 ? 750 : 375","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":6951,"value":"#### Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5972,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7026,"value":"legendFacetAnchor = svgWidth < 480 ? \"top\" : \"right\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7071,"value":"legendFrameAnchor = svgWidth < 480 ? \"bottom-right\" : \"top-right\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7073,"value":"legendDx = svgWidth < 480 ? -70 : -105","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7402,"value":"legendDy = svgWidth < 480 ? -45 : -30","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":6880,"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":5615,"value":"data = await FileAttachment(\"women-participation-olympics.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":7579,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"