2b:null 2c:["$","title",null,{"children":"Rappers in Tunisia (mob) | ToulouseDataviz | Observable"}] 31:T1bdb,vignette = { return html`

`; } /*vignette = { return html`

Swipe left to choose
Swipe right to play
Watch video below

✖

🎵

`; }*/32:Tf93,html2 = { const container = html`

`; // --- Récupération de l’ID vidéo --- const embed = data[out].YoutubeEmbed; // ex: "https://www.youtube.com/embed/VIDEOID" const videoId = embed && embed.split("/embed/")[1] ? embed.split("/embed/")[1].split(/[?&]/)[0] : embed; const videoWrap = container.querySelector("#videoWrap"); // --- Crée l’iframe YouTube --- const iframe = html``; videoWrap.append(iframe); // --- Contrôles externes (en haut à droite) --- const controls = html`

`; videoWrap.append(controls); // --- Chargement de l’API YouTube --- function loadYouTubeAPI() { return new Promise((resolve) => { if (window.YT && window.YT.Player) resolve(window.YT); else { if ( !document.querySelector( 'script[src="https://www.youtube.com/iframe_api"]' ) ) { const tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; document.body.appendChild(tag); } const wait = setInterval(() => { if (window.YT && window.YT.Player) { clearInterval(wait); resolve(window.YT); } }, 100); } }); } let player = null; // --- Création du lecteur --- loadYouTubeAPI().then((YT) => { player = new YT.Player(iframe, { events: { onReady: async (ev) => { try { ev.target.mute(); await ev.target.playVideo(); // autoplay muet // tentative d’unmute automatique après 0.8s setTimeout(() => { try { ev.target.unMute(); } catch {} }, 800); } catch (err) { console.warn("Autoplay bloqué, nécessite interaction utilisateur."); } } } }); }); // --- Liens boutons externes --- const playBtn = controls.querySelector("#playBtn"); const pauseBtn = controls.querySelector("#pauseBtn"); const muteBtn = controls.querySelector("#muteBtn"); playBtn.onclick = () => { try { player.playVideo(); } catch {} }; pauseBtn.onclick = () => { try { player.pauseVideo(); } catch {} }; muteBtn.onclick = () => { try { if (player.isMuted && player.isMuted()) { player.unMute(); muteBtn.textContent = "Mute"; } else { player.mute(); muteBtn.textContent = "Unmute"; } } catch {} }; return container; } /* html2 = html`
`*/ // ${data[out].name}
33:T439,updatePlayingCard = (foundIndex) => { const tinderChosen = document.querySelector(".tinder-chosen-target"); tinderChosen?.remove(); const div = document.createElement("div"); div.className = "tinder-chosen-target"; const tinderChosenParent = document.querySelector(".tinder-chosen"); const content = data[foundIndex]; div.innerHTML = `

Listening to ...

${content.name}

${content.category.slice( 2 )}

Subscriber count: ${content.followers.toLocaleString()}
Video count: ${content.videoCount.toLocaleString()}
View count: ${content.viewCount.toLocaleString()}

`; tinderChosenParent.appendChild(div); }34:T13d3,initCards = () => { const allCards = buildCardLayout(); const tinderContainer = document.querySelector(".tinder"); tinderContainer.classList.add("loaded"); allCards.forEach(function (el) { const hammerTime = new Hammer(el); hammerTime.on("pan", function (_event) { el.classList.add("moving"); }); hammerTime.on("pan", function (event) { if (event.deltaX === 0) return; if (event.center.x === 0 && event.center.y === 0) return; tinderContainer.classList.toggle("tinder_love", event.deltaX > 0); tinderContainer.classList.toggle("tinder_nope", event.deltaX < 0); const xMulti = event.deltaX * 0.03; const yMulti = event.deltaY / 80; const rotate = xMulti * yMulti; event.target.style.transform = "translate(" + event.deltaX + "px, " + event.deltaY + "px) rotate(" + rotate + "deg)"; }); hammerTime.on("panend", function (event) { el.classList.remove("moving"); tinderContainer.classList.remove("tinder_love"); tinderContainer.classList.remove("tinder_nope"); const moveOutWidth = document.body.clientWidth; const keep = Math.abs(event.deltaX) < 80 || Math.abs(event.velocityX) < 0.5; event.target.classList.toggle("removed", !keep); if (keep) { event.target.style.transform = ""; } else { const endX = Math.max( Math.abs(event.velocityX) * moveOutWidth, moveOutWidth ); const toX = event.deltaX > 0 ? endX : -endX; const endY = Math.abs(event.velocityY) * moveOutWidth; const toY = event.deltaY > 0 ? endY : -endY; const xMulti = event.deltaX * 0.03; const yMulti = event.deltaY / 80; const rotate = xMulti * yMulti; event.target.style.transform = "translate(" + toX + "px, " + (toY + event.deltaY) + "px) rotate(" + rotate + "deg)"; if (event.deltaX > 0) { // play card const foundIndex = event.target.getAttribute("index"); mutable out = foundIndex; setTimeout(() => { updatePlayingCard(foundIndex); }, 200); } reInjectInDeck(event.target); } }); }); // ✅ After all cards are built and DOM is stable, show the first random card setTimeout(() => { const randomIndex = Math.floor(Math.random() * data.length); mutable out = randomIndex; updatePlayingCard(randomIndex); }, 300); // gives Android/WebView enough time to layout the deck } /*initCards = () => { const allCards = buildCardLayout(); const tinderContainer = document.querySelector(".tinder"); tinderContainer.classList.add("loaded"); allCards.forEach(function (el) { const hammerTime = new Hammer(el); hammerTime.on("pan", function (_event) { el.classList.add("moving"); }); hammerTime.on("pan", function (event) { if (event.deltaX === 0) return; if (event.center.x === 0 && event.center.y === 0) return; tinderContainer.classList.toggle("tinder_love", event.deltaX > 0); tinderContainer.classList.toggle("tinder_nope", event.deltaX < 0); const xMulti = event.deltaX * 0.03; const yMulti = event.deltaY / 80; const rotate = xMulti * yMulti; event.target.style.transform = "translate(" + event.deltaX + "px, " + event.deltaY + "px) rotate(" + rotate + "deg)"; }); hammerTime.on("panend", function (event) { el.classList.remove("moving"); tinderContainer.classList.remove("tinder_love"); tinderContainer.classList.remove("tinder_nope"); const moveOutWidth = document.body.clientWidth; const keep = Math.abs(event.deltaX) < 80 || Math.abs(event.velocityX) < 0.5; event.target.classList.toggle("removed", !keep); if (keep) { event.target.style.transform = ""; } else { const endX = Math.max( Math.abs(event.velocityX) * moveOutWidth, moveOutWidth ); const toX = event.deltaX > 0 ? endX : -endX; const endY = Math.abs(event.velocityY) * moveOutWidth; const toY = event.deltaY > 0 ? endY : -endY; const xMulti = event.deltaX * 0.03; const yMulti = event.deltaY / 80; const rotate = xMulti * yMulti; event.target.style.transform = "translate(" + toX + "px, " + (toY + event.deltaY) + "px) rotate(" + rotate + "deg)"; if (event.deltaX > 0) { // play card const foundIndex = event.target.getAttribute("index"); mutable out = foundIndex; setTimeout(() => { updatePlayingCard(foundIndex); }, 200); // wait for cards to render and DOM to settle //updatePlayingCard(foundIndex); //); } reInjectInDeck(event.target); } }); }); }*/35:T459,/*initButtons = () => { const nope = document.getElementById("nope"); const love = document.getElementById("love"); function createButtonListener(love) { return function (event) { const cards = document.querySelectorAll(".tinder--card:not(.removed)"); const moveOutWidth = document.body.clientWidth * 1.5; if (!cards.length) return false; const card = cards[0]; card.classList.add("removed"); if (love) { card.style.transform = "translate(" + moveOutWidth + "px, -100px) rotate(-30deg)"; const foundIndex = card.getAttribute("index"); mutable out = foundIndex; updatePlayingCard(foundIndex); } else { card.style.transform = "translate(-" + moveOutWidth + "px, -100px) rotate(30deg)"; } setTimeout(() => reInjectInDeck(card), 1500); event.preventDefault(); }; } const nopeListener = createButtonListener(false); const loveListener = createButtonListener(true); //nope.addEventListener("click", nopeListener); //love.addEventListener("click", loveListener); }*/36:T50b,data_temp = { const temp = google_sheet .filter((d) => d.isLastScraping == "TRUE") .map((d) => ({ image_url: d.CoverImageUrl, followers: +d.subscriberCount, name: d.title, viewCount: +d.viewCount, videoCount: +d.videoCount, createdAt: d.createdAt, AverageViewsPerVideo: +d.AverageViewsPerVideo, YearsSinceCreation: d.YearsSinceCreation, CustomCluster: 7 - d.CustomClusterNbOfViews.slice(0, 1).toString() + " - " + d.CustomClusterNbOfViews.slice(2), CustomClusterNbOfViews: 7 - d.CustomClusterNbOfViews.slice(0, 1), YoutubeChannel: d.YoutubeChannel, LastestVideoUrl: d.LastestVideoUrl, YoutubeEmbed: d.LastestVideoUrlEmbeded + "?autoplay=1&mute=0", isLastScraping: d.isLastScraping, ScrapingDate: d3.utcParse("%Y-%m-%d")(d.ScrapingDate), HasNewVideoSinceLastScraping: d.HasNewVideoSinceLastScraping == "TRUE" ? "(New video)" : "", PreviousScrapingDate: d.PreviousScrapingDate, category: d.viewCount <= 1e6 ? "1-Underground Talents" : d.viewCount < 100e6 ? "2-Rising Stars" : d.viewCount < 500e6 ? "3-Established Stars" : "4-Legendary Icons" })); return temp; }37:[] 2f:{"id":"f13020896d3eb7f5","slug":"rappers-in-tunisia-mob","title":"Rappers in Tunisia (mob)","thumbnail":"7ea89885838ad2a97858ac664290f9577c9fd22557d72addf0fd9e7bf829f2e4","access_level":"public","create_time":"$D2024-11-14T21:38:37.730Z","update_time":"$D2026-06-22T12:28:59.808Z","view_time":null,"first_public_time":"$D2024-11-18T11:40:29.403Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":3339,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"71604b9a149d9a33","slug":"collections_tdv","title":"Collections_TDV","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"title":"Rappers in Tunisia (mob)","cells":[{"id":0,"value":"# Rappers in Tunisia (mob)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1696,"value":"## Tunisian rappers\n\nThanks to Connor Rothschild, Mike Bostock's and Ben Oldenburg\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2522,"value":"html1 = html`\n

\n Toulouse DataViz presents : ${data.length} Tunisian Rap Artists - (${ScrapingDate})\n

Swipe left to choose
Swipe right to select
And watch video below

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2789,"value":"viewof select = Inputs.select(dataCategories, { label: \"Select category\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2657,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2338,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2619,"value":"Hammer = require(\"https://hammerjs.github.io/dist/hammer.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2791,"value":"dataCategories = [\n \"All\",\n ...Array.from(new Set(data.map((item) => item.category.slice(2))))\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2806,"value":"cardContentsWithIndex = data.map((item, index) => {\n return { index: index, ...item };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2630,"value":"cardContents = select !== \"All\"\n ? cardContentsWithIndex.filter((item) => item.category.slice(2) === select)\n : cardContentsWithIndex","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2814,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2635,"value":"renderCard = (index, content) => {\n const div = document.createElement(\"div\");\n div.className = \"tinder--card\";\n div.innerHTML = `\n

${content.name}

${content.category.slice(2)}

\nSubscriber count: ${content.followers.toLocaleString()}
\nVideo count: ${content.videoCount.toLocaleString()}
\nView count: ${content.viewCount.toLocaleString()}\n \n\n `;\n div.setAttribute(\"index\", index);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2626,"value":"buildCardDeck = () => {\n const tinderCardContainer = document.querySelector(\".tinder--cards\");\n tinderCardContainer.textContent = \"\";\n cardContents.forEach((content, index) => {\n tinderCardContainer.appendChild(renderCard(content.index, content));\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2639,"value":"buildCardLayout = () => {\n const newCards = document.querySelectorAll(\".tinder--card:not(.removed)\");\n const allCards = document.querySelectorAll(\".tinder--card\");\n newCards.forEach(function (card, index) {\n card.style.zIndex = allCards.length - index;\n card.style.transform =\n \"scale(\" + (30 - index) / 30 + \") translateY(-\" + 30 * index + \"px)\";\n card.style.opacity = (10 - index) / 10;\n });\n return allCards;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2641,"value":"reInjectInDeck = (ref) => {\n const tinderCardContainer = document.querySelector(\".tinder--cards\");\n tinderCardContainer.removeChild(ref);\n ref.classList.toggle(\"removed\", false);\n tinderCardContainer.appendChild(ref);\n buildCardLayout();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2637,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2643,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2988,"value":"updatePlayingCard(out)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2645,"value":"render = () => {\n buildCardDeck();\n initCards();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2648,"value":"render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3188,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1299,"value":"google_sheet_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRRKsMjh4M_MwwnSvDxmZQhUDqKwWku5kLCr3d-JD_aE5UPgOyHIuJZwWHTis1z6dlwOuNNoH4wndC5/pub?gid=754453702&single=true&output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1301,"value":"google_sheet = {\n let temp = [];\n const spreadsheet = await d3\n .csv(google_sheet_url)\n .then((data) => data.forEach((d) => temp.push(d)));\n return temp;\n}\n\n// ou équivalent d3.csv(google_sheet_url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1706,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1713,"value":"data = data_temp.sort((a, b) => b.followers - a.followers)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3296,"value":"/*emptyCard = ({\n image_url:\n \"https://upload.wikimedia.org/wikipedia/commons/e/ef/Youtube_logo.png\",\n followers: 0,\n name: \"\",\n viewCount: 0,\n videoCount: 0,\n createdAt: null,\n AverageViewsPerVideo: null,\n YearsSinceCreation: null,\n CustomCluster: null,\n CustomClusterNbOfViews: null,\n YoutubeChannel: null,\n LastestVideoUrl: null,\n YoutubeEmbed: \"https://www.youtube.com/watch?v=zm8_SDEYjtw\",\n isLastScraping: null,\n ScrapingDate: null,\n HasNewVideoSinceLastScraping: null,\n PreviousScrapingDate: null,\n category: \"\"\n})*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3298,"value":"// Assuming `data` is your array of 97 channel objects:\n/*data = [\n emptyCard, // 👈 This will be your initial “no selection” card\n ...data_temp_2 // keep all your existing items\n]*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2340,"value":"mutable out = 0 //;Math.floor(Math.random() * data.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2127,"value":"ScrapingDate = d3.timeFormat(\"%B %d, %Y\")(data[1].ScrapingDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2615,"value":"google_sheet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2015,"value":"### Configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"