2c:null 2d:["$","title",null,{"children":"R-Ladies Chapters Events | Deepali Kank | Observable"}] 32:T16a3,chart = { // Function to create a radial gradient function createRadialGradient(svg, id, color1, color2) { const gradient = svg .append("defs") .append("radialGradient") .attr("id", id) .attr("cx", "50%") .attr("cy", "50%") .attr("r", "50%") .attr("fx", "25%") .attr("fy", "25%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", color1); gradient.append("stop").attr("offset", "100%").attr("stop-color", color2); return `url(#${id})`; } // Function to draw a single small flower function drawSmallFlower(svg, x, y, scale, gradientId) { const flowerGroup = svg .append("g") .attr("class", "flower") .attr("transform", `translate(${x}, ${y}) scale(${scale})`); // Draw petals for (let i = 0; i < 5; i++) { const angle = i * 72 - 18; // -18 to start at 12 o'clock position flowerGroup .append("path") .attr("d", "M0,-10 C5,-5 10,-10 0,-30 C-10,-10 -5,-5 0,-10") .attr("fill", gradientId) .attr("transform", `rotate(${angle})`) .attr("opacity", 0.9); } // Draw center flowerGroup .append("circle") .attr("r", 3) .attr("fill", "gold") .attr("stroke", "white") .attr("stroke-width", 0.5); return flowerGroup; } // Function to animate flowers function animateFlowers(svg) { const width = +svg.attr("width"); const height = +svg.attr("height"); const padding = 40; svg.selectAll(".flower").each(function () { const flower = d3.select(this); const startX = parseFloat(flower.attr("data-x")); const startY = parseFloat(flower.attr("data-y")); function moveFlower() { const angleRad = Math.random() * Math.PI * 2; const distance = Math.random() * 30; let targetX = startX + Math.cos(angleRad) * distance; let targetY = startY + Math.sin(angleRad) * distance; // Ensure the flower stays within the SVG boundaries targetX = Math.max(padding, Math.min(width - padding, targetX)); targetY = Math.max(padding, Math.min(height - padding, targetY)); flower .transition() .duration(5000 + Math.random() * 5000) .ease(d3.easeQuadInOut) .attrTween("transform", function () { const startTransform = d3.zoomTransform(this); return function (t) { const x = startX + (targetX - startX) * t; const y = startY + (targetY - startY) * t; const scale = startTransform.k * (1 + Math.sin(t * Math.PI) * 0.1); return `translate(${x}, ${y}) scale(${scale})`; }; }) .on("end", moveFlower); } moveFlower(); }); } // Function to draw all flowers function drawFlowers(svg, data) { const width = +svg.attr("width"); const height = +svg.attr("height"); const padding = 40; // Create gradients const inPersonGradient = createRadialGradient( svg, "inPersonGradient", "#FFB3BA", "#FF69B4" ); const virtualGradient = createRadialGradient( svg, "virtualGradient", "#A7D8DE", "#20B2AA" ); // Calculate total events and create an array of all events let allEvents = []; let inPersonCount = 0; let virtualCount = 0; data.forEach((d) => { for (let i = 0; i < d.no_of_events; i++) { allEvents.push(d.location); if (d.location === "inperson") { inPersonCount++; } else { virtualCount++; } } }); // Shuffle the array to mix in-person and virtual events allEvents = d3.shuffle(allEvents); // Draw flowers randomly allEvents.forEach((location) => { const x = padding + Math.random() * (width - 2 * padding); const y = padding + Math.random() * (height - 2 * padding); const gradientId = location === "inperson" ? inPersonGradient : virtualGradient; const scale = 0.7 + Math.random() * 0.3; // Random scale for variety const flower = drawSmallFlower(svg, x, y, scale, gradientId); flower.attr("data-x", x).attr("data-y", y); // Store original position }); // Start animation animateFlowers(svg); return { inPersonCount, virtualCount }; } // Set up the SVG container const svgWidth = 1000; const svgHeight = 600; const svg = d3 .create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("style", "background-color: black;"); // Function to Update Chart based on selected city function updateChart(selectedCity) { const filteredData = data2.filter((d) => d.city === selectedCity); svg.selectAll("*").remove(); // Clear existing drawing // Draw flowers and get event counts const { inPersonCount, virtualCount } = drawFlowers(svg, filteredData); // Add city name and event counts at the top of the SVG const text = svg .append("text") .attr("x", svgWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-size", "24px"); text.append("tspan").text(`${selectedCity.toUpperCase()}: `); text .append("tspan") .attr("fill", "#FF69B4") .text(`${inPersonCount} In-Person`); text.append("tspan").attr("fill", "white").text(", "); text .append("tspan") .attr("fill", "#20B2AA") .text(`${virtualCount} Virtual Events`); } // Observe Dropdown Changes d3.select("#citySelector").on("change", function () { updateChart(this.value); }); // Initial Drawing const initialCity = d3.select("#citySelector").node().value; updateChart(initialCity); return svg.node(); }33:[{"id":"0a184b921da7379e9d40e54080b1db40f5ffe27349e65c902484229af82149349c0ff7e7571e183059549f89cf1c04c33b77bd388a0b16a56359c49192aa1353","href":"https://static.observableusercontent.com/files/0a184b921da7379e9d40e54080b1db40f5ffe27349e65c902484229af82149349c0ff7e7571e183059549f89cf1c04c33b77bd388a0b16a56359c49192aa1353","name":"df1.csv","type":"text/csv","lastModified":1719033740616.315,"size":6656}] 30:{"id":"0fccf48039130dee","slug":null,"title":"R-Ladies Chapters Events","thumbnail":"ae1addbfe8d8d3be24a9a47c98ea50b6ea60b5a78c060917148517bb42d74566","access_level":"public","create_time":"$D2024-06-22T05:22:20.616Z","update_time":"$D2025-02-03T13:15:00.945Z","view_time":null,"first_public_time":"$D2024-06-22T13:30:36.862Z","has_unpublished_edits":null,"fork":{"id":"d30791feffacf739","slug":null,"title":"Flower: R ladies","owner":{"id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":296,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"R-Ladies Chapters Events","cells":[{"id":168,"value":"\n\n

R-Ladies Chapters Events

R-Ladies Global is an inspiring story of community, empowerment, and diversity in the field of data science. Founded by Gabriela de Queiroz, R-Ladies began as a grassroots movement with a simple mission: to promote gender diversity in the R programming community and provide a welcoming space for women and gender minorities to learn, collaborate, and excel in data science.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"data2 = await FileAttachment(\"df1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data2","database":"$undefined"},{"id":85,"value":"data2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"