29:null 2a:["$","title",null,{"children":"Rappers in Tunisia (mobile) | ToulouseDataviz | Observable"}] 2f:T533,// Cellule 3 — data_temp (transformation) function _data_temp(google_sheet) { return 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" })); }30:T1845,function _rapWidget(html, cardContents, data, ScrapingDate) { const style = html``; const root = html`

Tunisian Rap Artists · ${ScrapingDate}

${viewof select}

Sélectionnez un artiste

`; const carouselEl = root.querySelector("#rc-carousel"); const nowEl = root.querySelector("#rc-now"); const slotEl = root.querySelector("#rc-slot"); const soundBtn = root.querySelector("#rc-sound-btn"); let currentVid = null; // --- iframe pur, sans API YT --- function makeIframe(vid, mute) { const f = document.createElement("iframe"); f.src = `https://www.youtube.com/embed/${vid}?autoplay=1&mute=${ mute ? 1 : 0 }&playsinline=1&rel=0&modestbranding=1`; f.allow = "autoplay; encrypted-media; picture-in-picture"; f.allowFullscreen = true; return f; } function loadVideo(vid, mute = true) { slotEl.innerHTML = ""; slotEl.appendChild(makeIframe(vid, mute)); if (mute) soundBtn.classList.add("visible"); else soundBtn.classList.remove("visible"); } // --- Bouton son : recrée l'iframe avec mute=0 --- // C'est un trusted tap → le navigateur autorise autoplay avec son soundBtn.addEventListener("click", () => { if (!currentVid) return; loadVideo(currentVid, false); // mute=false → mute=0 dans l'URL }); // --- Sélection carte --- function selectCard(dataIndex) { const d = data[dataIndex]; const m = (d.YoutubeEmbed || "").match(/\/embed\/([^?&]+)/); currentVid = m ? m[1] : null; root.value = dataIndex; root.dispatchEvent(new CustomEvent("input")); carouselEl .querySelectorAll(".rc-card") .forEach((c) => c.classList.toggle("active", +c.dataset.index === dataIndex) ); nowEl.innerHTML = `

${d.name}

${d.category.slice(2)}

${d.followers.toLocaleString()} abonnés · ${d.videoCount.toLocaleString()} vidéos · ${(d.viewCount / 1e6).toFixed(1)}M vues ${ d.HasNewVideoSinceLastScraping ? ` · ${d.HasNewVideoSinceLastScraping}` : "" }

`; if (currentVid) loadVideo(currentVid, true); const card = carouselEl.querySelector(`[data-index="${dataIndex}"]`); if (card) card.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); } // --- Construction du carrousel --- cardContents.forEach((item) => { const card = document.createElement("div"); card.className = "rc-card"; card.dataset.index = item.index; card.innerHTML = `

${item.name}

`; card.addEventListener("click", () => selectCard(item.index)); carouselEl.appendChild(card); }); if (cardContents.length > 0) selectCard(cardContents[0].index); root.value = cardContents[0]?.index ?? 0; return html`${style}${root}`; }31:[] 2d:{"id":"b8a74afba1f2a777","slug":null,"title":"Rappers in Tunisia (mobile)","thumbnail":"13f0442ae043783886de055a357112c6ced88f919e14366ac16f6e48e1bf2b12","access_level":"public","create_time":"$D2026-06-22T12:02:20.041Z","update_time":"$D2026-06-22T20:40:08.730Z","view_time":null,"first_public_time":"$D2026-06-22T16:50:21.931Z","fork":false,"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":242,"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":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"71604b9a149d9a33","slug":"collections_tdv","title":"Collections_TDV","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"title":"Rappers in Tunisia (mobile)","cells":[{"id":0,"value":"# Rappers in Tunisia (mobile)\n\n## version juin 2026","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":129,"value":"rapWidget = _rapWidget(html, cardContents, data, scrapingDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"--","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"// Cellule 1 — google_sheet_url\ngoogle_sheet_url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRRKsMjh4M_MwwnSvDxmZQhUDqKwWku5kLCr3d-JD_aE5UPgOyHIuJZwWHTis1z6dlwOuNNoH4wndC5/pub?gid=754453702&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"// Cellule 2 — google_sheet (fetch CSV)\nasync function _google_sheet(google_sheet_url) {\n let temp = [];\n await d3\n .csv(google_sheet_url)\n .then((data) => data.forEach((d) => temp.push(d)));\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"google_sheet = _google_sheet(google_sheet_url)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"data_temp = _data_temp(google_sheet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"// Cellule 4 — data (trié par followers décroissant)\nfunction _data(data_temp) {\n return data_temp.sort((a, b) => b.followers - a.followers);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"data = _data(data_temp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"// Cellule 5 — ScrapingDate (formatée)\nfunction _ScrapingDate(data) {\n return d3.timeFormat(\"%B %d, %Y\")(data[1].ScrapingDate);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"scrapingDate = _ScrapingDate(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"// Cellule 6 — dataCategories (pour le select)\nfunction _dataCategories(data) {\n return [\n \"All\",\n ...Array.from(new Set(data.map(d => d.category.slice(2))))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"dataCategories = _dataCategories(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"// Cellule 7 — select (filtre catégorie)\nfunction _select(Inputs, dataCategories) {\n return Inputs.select(dataCategories, { label: \"Filtrer par catégorie\" });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"viewof select = Inputs.select(dataCategories, { label: \"Select category\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"// Cellule 8 — cardContents (données filtrées avec index original)\nfunction _cardContents(select, data) {\n const withIndex = data.map((item, index) => ({ index, ...item }));\n return select !== \"All\"\n ? withIndex.filter(item => item.category.slice(2) === select)\n : withIndex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"cardContents = _cardContents(select, data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"// Cellule 11 — out (réactif, index sélectionné dans data[])\nfunction _out(rapWidget) {\n return rapWidget;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"out = _out(rapWidget)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"