2f:T58f,map = { const container = html`

`; yield container; const map = L.map(container).setView([15, 27.6], 2); //for more tile options see https://leaflet-extras.github.io/leaflet-providers/preview/ (copy url) L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: "© OpenStreetMap contributors" }).addTo(map); // for marketCluster to work, you need to import the code snippet below to import this feature let markers = markerCluster({}); // loop to create a marker for each drag queen queenGeoFiltered.forEach(queen => { var queenIcon = L.icon({ iconUrl: queen.link_image, // map to image url iconSize: [32, 32], // size of the icon iconAnchor: [16, 16], // point of the icon corresponds to marker's location }); let marker = L.marker([queen.latitude, queen.longitude], {icon: queenIcon}); // Add a tooltip with Queen info (name, hometown) marker.bindTooltip(`${queen.name}
${queen.city}`, { permanent: false, direction: 'top' }); // Open the tooltip when the marker is clicked marker.on('click', function() { marker.openTooltip(); }); // Add the marker to the marker cluster group markers.addLayer(marker); }); // Add the marker cluster group to the map map.addLayer(markers); } 30:[{"id":"47d9e742812d753f696a9c8239a37c64b874b16ca4181e759ae8adf8d2a2ba90619b09253eaef9e29a57174984b0f1e37d2fe9ace6636d5b2a58bb4c81322bdb","href":"https://static.observableusercontent.com/files/47d9e742812d753f696a9c8239a37c64b874b16ca4181e759ae8adf8d2a2ba90619b09253eaef9e29a57174984b0f1e37d2fe9ace6636d5b2a58bb4c81322bdb","name":"queen_geo_data.csv","type":"text/csv","lastModified":1681348121590.33,"size":103020},{"id":"1d40b90a43ce2b074c4fe532d6b2d4c77622e74c544c2aa914ed9fef1ad440fa2efe86ae0adc0567a6c24dcc669e44efe8c5641994003938fccfadd077c04ded","href":"https://static.observableusercontent.com/files/1d40b90a43ce2b074c4fe532d6b2d4c77622e74c544c2aa914ed9fef1ad440fa2efe86ae0adc0567a6c24dcc669e44efe8c5641994003938fccfadd077c04ded","name":"season_contestants.csv","type":"text/csv","lastModified":1681387784296.407,"size":85091},{"id":"0126244fe29c76312a05205db38f9af1dee78139a46112e5847315f7d240bc733c6b2732a8828d6d7617f3bbe5ca73d3c32b96a6392c8141b4de9e02ed2f348d","href":"https://static.observableusercontent.com/files/0126244fe29c76312a05205db38f9af1dee78139a46112e5847315f7d240bc733c6b2732a8828d6d7617f3bbe5ca73d3c32b96a6392c8141b4de9e02ed2f348d","name":"season_contestant.csv","type":"text/csv","lastModified":1681387971276.881,"size":178566},{"id":"d0f673251d65ca2a5213d5a836a344a5a207b94abdb5e0856738f3f177ca538328d83228241e781e2a2e8601bcfeefefe64e65b5f4d09b6955f86b484e574d86","href":"https://static.observableusercontent.com/files/d0f673251d65ca2a5213d5a836a344a5a207b94abdb5e0856738f3f177ca538328d83228241e781e2a2e8601bcfeefefe64e65b5f4d09b6955f86b484e574d86","name":"contestants.csv","type":"text/csv","lastModified":1681388786240.39,"size":187236},{"id":"7884812618ee9b6c41c1d0deb9e4ea6036b66942f65b24b351f48ea08b229896f292df7a59c4d4f92d35ba5ed9283b3a1e7177da15880e8fa2d401485d569fa9","href":"https://static.observableusercontent.com/files/7884812618ee9b6c41c1d0deb9e4ea6036b66942f65b24b351f48ea08b229896f292df7a59c4d4f92d35ba5ed9283b3a1e7177da15880e8fa2d401485d569fa9","name":"queen_geo_data@1.csv","type":"text/csv","lastModified":1692973645318.772,"size":133427},{"id":"714a7066d6d4bea18756b42dc7b9f42b4eddb11b24ce6fa1af1aa75244d7b58e126b047723ed346fe09c03c3b2d568bc233e5d2f1f9c08670dc4eb1417bf387d","href":"https://static.observableusercontent.com/files/714a7066d6d4bea18756b42dc7b9f42b4eddb11b24ce6fa1af1aa75244d7b58e126b047723ed346fe09c03c3b2d568bc233e5d2f1f9c08670dc4eb1417bf387d","name":"contestants@1.csv","type":"text/csv","lastModified":1692974128496.595,"size":240902}] 2d:{"title":"Where Are You Queen?","cells":[{"id":0,"value":"# Where Are You Queen?\n\nMap of **RuPaul's Drag Queens** around the world. Data was scraped from [Drag Race Wiki](https://rupaulsdragrace.fandom.com/wiki/RuPaul%27s_Drag_Race_Wiki). It's wild to see how RuPaul's footprint grow as the show adds different international franchises. There are over 350 queens on this map from more than 10 franchises!","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"// create form of input values to subset the queen geo data\n\nviewof filters = (\n Inputs.form({\n seasonYear: Inputs.range([2009, 2023], {label: \"Max Season Year\", step: 1, value:2023}),\n franchise:Inputs.select(franchises, {label: \"Franchise\", value: franchises, multiple:5})\n},\n // borrowed template from Allison Horst - splits up in two columns\n {template})\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"# Data\n\nData is from my [Github](https://github.com/tashapiro/drag-race/tree/main/data). I did some additional wrangling and combining in R before uploading. Geo coordinates per hometown created with **tidygeocoder**. ","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"queen_geo_data = await FileAttachment(\"queen_geo_data@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"queen_geo_data_old = await FileAttachment(\"queen_geo_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"contestants = await FileAttachment(\"contestants@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"contestants_old = await FileAttachment(\"contestants.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"//get unique franchise names in a list for filter\nfranchises = [...new Set(contestants.map(f => f.franchise_name))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"queenList = [...new Set(queen_geo_data.map(q => q.name))].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"//subset data\nscFiltered = contestants.filter(contestant => filters.franchise.includes(contestant.franchise_name) && contestant.season_year<=filters.seasonYear);","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"scFiltered[1].contestant_id","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"//\nqueenGeoFiltered = queen_geo_data.filter(queen => scFiltered.some(sc => sc.contestant_id === queen.queen_id));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"# Import Leaflet\n\nNeed additional version for **markerClusterGroup**.","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"# CSS\n\nMake it sparkle!","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"## Input Form Template\n\nCode for template taken from Allison Horst's [Life in a Waffle Chart notebook](https://observablehq.com/@observablehq/life-in-waffle). \n\nOriginal credit - Martien van Steenbergen's [Horizontal inputs](https://observablehq.com/@martien/horizontal-inputs) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs\n\ntemplate = (inputs) => \nhtl.html`

${Object.values(inputs)}

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"## Formatting Marker Clusters","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"## Formatting The Other Stuff","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}