31:Te3a,caracCircularChart = { const svg = d3.select(DOM.svg(width, height_circle)) .attr("viewBox", `${-width / 2 -margin.left} ${-height_circle / 2 -margin.top} ${width + margin.left + margin.right} ${height_circle + margin.top + margin.bottom}`) .style("width", "100%") .style("height", "auto") .style("font", "10px sans-serif"); const x = d3.scaleBand() .domain(caracs) .range([0, 2 * Math.PI]) const xAxis = g => g .attr("text-anchor", "middle") .call(g => g.selectAll("g") .data(caracs) .join("g") .attr("transform", d => ` rotate(${((x(d) + x.bandwidth() / 2) * 180 / Math.PI - 90 )}) translate(${innerRadius},0) `) .call(g => g.append("line") .attr("x2", -5) .attr("stroke", "#000")) .call(g => g.append("text") .attr("transform", d => (x(d[0]) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI ? "rotate(90)translate(0,16)" : "rotate(-90)translate(0,-9)") .attr("stroke", "#fff") .attr("stroke-width", "5") .text(carac => formatCaracFrench.get(carac)) .clone(true) .attr("fill", "#000") .attr("stroke", "none"))) const radius = d3.scaleLinear() .domain([0,1]) .range([innerRadius, outerRadius]) const yAxis = g => g .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .call(g => g.selectAll("g") .data(radius.ticks().reverse()) .join("g") .attr("fill", "none") .call(g => g.append("circle") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("r", radius)) .call(g => g.append("text") .attr("y", d => -radius(d)) .attr("dy", "0.35em") .attr("stroke", "#fff") .attr("stroke-width", 5) .text(x => x) .clone(true) .attr("y", d => radius(d)) .selectAll(function() { return [this, this.previousSibling]; }) .clone(true) .attr("fill", "currentColor") .attr("stroke", "none"))) const line = d3.lineRadial() .angle(d => x(d[0]) + x.bandwidth() / 2) .radius(d => radius(d[1])) .curve(d3.curveCardinalClosed) const selected_data = countries_array_carac_mean.map( country => ({ country : country, values : caracYearlyMeanMap(country) }) ); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(selected_data) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", d => colorContinent(continentMap.get(d.country))) .attr("d", d => line(d.values)); const dot = svg.append("g") .selectAll("g") .data(selected_data) .join("g") .attr("fill", d => colorContinent(continentMap.get(d.country))) .selectAll("circle") .data(d => d.values) .join("circle") .attr("r", d => "3.5") .attr("cx", d => radius(d[1]) * Math.cos(x(d[0]) + x.bandwidth() / 2 - Math.PI/2)) .attr("cy", d => radius(d[1]) * Math.sin(x(d[0]) + x.bandwidth() / 2 - Math.PI/2)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }32:Te55,chart_carac_time = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleTime() .domain([new Date("2020-01-01"), new Date("2020-12-31")]).nice() .range([margin.left, width - margin.right]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(multiTimeFormat)); const y = d3.scaleLinear() .domain([0, 1]).nice() .range([height - margin.bottom, margin.top]) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.selectAll(".tick line").clone().attr("stroke-opacity", 0.1).attr("x2", width - margin.left - margin.right)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(formatCaracFrench.get(selectedCarac))) const line = d3.line() .curve(d3.curveStep) .defined(d => !isNaN(d[selectedCarac])) .x(d => x(customISOParser(d.date))) .y(d => y(d[selectedCarac])); const selected_data = countries_array.map( country => ({ country : country, values : caracMeanMap(country) }) ); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(selected_data) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", d => colorContinent(continentMap.get(d.country))) .attr("d", d => line(d.values)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Fonction pour le survol, adapté de https://observablehq.com/@d3/multi-line-chart function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none") .attr("fill", "none"); dot.append("circle") .attr("r", 2.5) .attr("fill", "#000"); dot.append("text") .attr("stroke", "#fff") .attr("stroke-width", "5") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); dot.select("text") .clone() .attr("fill", "#000") .attr("stroke", "none"); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(dates, xm); const s = d3.least(selected_data, d => Math.abs(d.values[i][selectedCarac] - ym)); path.attr("opacity", d => d === s ? 1 : 0.3).filter(d => d === s).raise(); dot.attr("transform", `translate(${x(dates[i])},${y(s.values[i][selectedCarac])})`); dot.selectAll("text").text(formatCountry.get(s.country) + " : " + formatNumberFrench(s.values[i][selectedCarac])); } function entered() { path.style("mix-blend-mode", null).attr("opacity", 0.3); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("opacity", 1); dot.attr("display", "none"); } } svg.call(hover, path); return svg.node(); }33:Te41,chart_distance_eculidienne = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleTime() .domain([new Date("2020-01-01"), new Date("2020-12-31")]).nice() .range([margin.left, width - margin.right]) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(multiTimeFormat)); const y = d3.scaleLinear() .domain([0, 0.4]).nice() .range([height - margin.bottom, margin.top]) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.selectAll(".tick line").clone().attr("stroke-opacity", 0.1).attr("x2", width - margin.left - margin.right)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Distance euclidienne de l'écart journalier des caractéristiques à la moyenne")) const line = d3.line() .curve(d3.curveStep) .defined(d => !isNaN(d.sumDistanceToMean)) .x(d => x(customISOParser(d.date))) .y(d => y(d.sumDistanceToMean)); const selected_data = countries_array_particular_events.map( country => ({ country : country, values : sumCaracDistanceToMean(country) }) ); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(selected_data) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", d => colorContinent(continentMap.get(d.country))) .attr("d", d => line(d.values)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Fonction pour le survol, adapté de https://observablehq.com/@d3/multi-line-chart function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("stroke", "#fff") .attr("stroke-width", "5") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); dot.select("text") .clone() .attr("fill", "#000") .attr("stroke", "none"); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(dates, xm); const s = d3.least(selected_data, d => Math.abs(d.values[i].sumDistanceToMean - ym)); path.attr("opacity", d => d === s ? 1 : 0.3).filter(d => d === s).raise(); dot.attr("transform", `translate(${x(dates[i])},${y(s.values[i].sumDistanceToMean)})`); dot.selectAll("text").text(formatCountry.get(s.country)); } function entered() { path.style("mix-blend-mode", null).attr("opacity", 0.3); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("opacity", 1); dot.attr("display", "none"); } } svg.call(hover, path); return svg.node(); }34:T593,md`Puisqu'on observe des similarités d'écoutes selon les continents, on peut se demander si les pays d'un même continent écoutent les mêmes musiques. Si on regarde le nombre de musiques en commun dans le top 200 quotidien de chaque pays, on remarque que les pays d'un même continent ont tendance à écouter les mêmes musiques. Cependant, la langue parlée dans les pays joue un rôle qui peut expliquer cette tendance. Par exemple, la Suisse 🇨🇭, l'Allemagne 🇩🇪 et l'Autriche 🇦🇹 semblent partager plus de la moitié des musiques de leur top 200. De même, les Français 🇫🇷 vont écouter des musiques proches de celles écoutées en Belgique 🇧🇪 ou en Suisse 🇨🇭. En Espagne 🇪🇸, les tendances d'écoutent se rapprochent bien plus des pays d'Amérique du Sud que des pays d'Europe, et les musiques écoutées au Brésil 🇧🇷 sont complètement différentes du reste de l'Amérique du Sud, et se rapprochent plus de celles écoutées au Portugal 🇵🇹.`35:T74b,heatmap_chart = { const height_heatmap = 500; const marginHeatmap = ({top: 30, right: 60, bottom: 70, left: 120}) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height_heatmap]); const x = d3.scaleBand() .domain(countries_common_tracks) .range([marginHeatmap.left, width - marginHeatmap.right]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${height_heatmap - marginHeatmap.bottom})`) .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0)) .call(g => g.append("text") .attr("x", width - marginHeatmap.right) .attr("y", -4) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end")); const y = d3.scaleBand() .domain([...countries_common_tracks].reverse()) .rangeRound([height_heatmap - marginHeatmap.bottom, marginHeatmap.top]); const yAxis = g => g .attr("transform", `translate(${marginHeatmap.left},0)`) .call(d3.axisLeft(y).tickSize(0)) .call(g => g.select(".domain").remove()); var data_nested_common_tracks_day = data_nested_common_tracks[dates.indexOf(dateHeatmap)]; svg.append("g") .call(xAxis) .selectAll("text") .style("text-anchor", "start") .attr("transform", "rotate(30)"); svg.append("g") .call(yAxis); svg.append("g") .selectAll("g") .data(data_nested_common_tracks_day) .join("g") .attr("transform", country_1 => `translate(0,${y(formatCountry.get(country_1[0]))})`) .selectAll("rect") .data(d => d[1]) .join("rect") .attr("x", country_2 => x(formatCountry.get(country_2[0])) + 1) .attr("width", (d, i) => x.bandwidth() + 3) .attr("height", y.bandwidth() - 1) .attr("fill", d => isNaN(d[1]) ? "#eee" : d[1] === 0 ? "#fff" : colorHeatmap(d[1])); return svg.node(); }36:T63c,md`[Une étude](https://research.atspotify.com/publications/local-trends-in-global-music-streaming/) menée par des chercheurs de Spotify et publiée en Juin 2020 s'intéresse aux tendances locales d'écoute parmi les musiques streamées dans le monde. Après avoir analysé l'évolution des tendances d'écoutes entre 2014 et 2019, ils en ont conclu que les préférences évoluaient vers l'écoute d'artistes "locaux". Les auditeurs semblent écouter de plus en plus des artistes dont ils partagent la langue, et dont ils sont proches géographiquement, ce qui rejoint ce que nous pouvons observer dans notre dernière visualisation.

Les chercheurs ont calculé un [coefficient de corrélation de Spearman](https://fr.wikipedia.org/wiki/Corr%C3%A9lation_de_Spearman) entre les distributions d'exportations normalisées des pays en 2019, puis un [regroupement hiérarchique](https://fr.wikipedia.org/wiki/Regroupement_hi%C3%A9rarchique) non supervisé pour visualiser les proximités d'écoute entre les différents pays. Cette classification vient confirmer la proximité des habitudes d'écoutes de l'Espagne 🇪🇸 au reste de l'Amérique du Sud. Du fait que de nombreux pays Européens ont plusieurs langues officielles, les musiques exportées seront plus hétérogènes et on retrouvera des habitudes d'écoutes partagées avec de nombreux autres pays d'Europe.`37:T5a1,function multiTimeFormat(date) { var locale = d3.timeFormatDefaultLocale({ "dateTime": "%A %e %B %Y à %X", "date": "%d/%m/%Y", "time": "%H:%M:%S", "periods": ["AM", "PM"], "days": ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"], "shortDays": ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"], "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], "shortMonths": ["janv", "févr", "mars", "avr", "mai", "juin", "juil", "août", "sept", "oct", "nov", "déc"] }); var formatMillisecond = locale.format(".%L"), formatSecond = locale.format(":%S"), formatMinute = locale.format("%I:%M"), formatHour = locale.format("%I %p"), formatDay = locale.format("%a %d"), formatWeek = locale.format("%b %d"), formatMonth = locale.format("%B"), formatYear = locale.format("%Y"); return (d3.timeSecond(date) < date ? formatMillisecond : d3.timeMinute(date) < date ? formatSecond : d3.timeHour(date) < date ? formatMinute : d3.timeDay(date) < date ? formatHour : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek) : d3.timeYear(date) < date ? formatMonth : formatYear)(date); }38:T15af,descriptionCaracMap = new Map([ ["danceability", md` **La dansabilité** décrit à quel point un morceau convient à la danse en se basant sur une combinaison d'éléments musicaux, notamment le tempo, la stabilité du rythme, la force du battement et la régularité générale. Une valeur de 0,0 est la moins dansable et 1,0 est la plus dansante. "${raw_spotify_audio_features_data[195]["name"]}" a une dansabilité de ${formatNumberFrench(raw_spotify_audio_features_data[195]["danceability"])} tandis que "${raw_spotify_audio_features_data[7754]["name"]}" a une dansabilité de ${formatNumberFrench(raw_spotify_audio_features_data[7754]["danceability"])}. `], ["energy", md`**L'énergie** est une mesure de 0,0 à 1,0 et représente une mesure perceptive de l'intensité et de l'activité. En général, les pistes énergiques sont rapides, bruyantes et bruyantes. Par exemple, le death metal a une énergie élevée, tandis qu'un prélude de Bach obtient un score bas sur l'échelle. Les caractéristiques perceptives contribuant à cet attribut comprennent la plage dynamique, le volume sonore perçu, le timbre, la fréquence d'apparition et l'entropie générale. "${raw_spotify_audio_features_data[9143]["name"]}" a une énergie de ${formatNumberFrench(raw_spotify_audio_features_data[9143]["energy"])} tandis que "${raw_spotify_audio_features_data[5565]["name"]}" a une énergie de ${formatNumberFrench(raw_spotify_audio_features_data[5565]["energy"])}. `], ["mode", md`**Le mode** indique la modalité (majeure ou mineure) d'une piste, le type de gamme dont est dérivé son contenu mélodique. La majeure est représenté par 1 et la mineure est 0. "${raw_spotify_audio_features_data[1]["name"]}" a une modalité de ${formatNumberFrench(raw_spotify_audio_features_data[1]["mode"])} tandis que "${raw_spotify_audio_features_data[0]["name"]}" a une modalité de ${formatNumberFrench(raw_spotify_audio_features_data[0]["mode"])}.`], ["speechiness", md`**La parole** détecte la présence de mots prononcés dans une piste. Plus l'enregistrement est exclusivement de type vocal (par exemple, talk-show, livre audio, poésie), plus la valeur d'attribut est proche de 1,0. Les valeurs supérieures à 0,66 décrivent des pistes qui sont probablement entièrement constituées de mots prononcés. Les valeurs comprises entre 0,33 et 0,66 décrivent des pistes qui peuvent contenir à la fois de la musique et de la parole, en sections ou en couches, y compris des cas tels que la musique rap. Les valeurs inférieures à 0,33 représentent très probablement de la musique et d'autres pistes non vocales. "${raw_spotify_audio_features_data[612]["name"]}" a un coefficient de parole de ${formatNumberFrench(raw_spotify_audio_features_data[612]["speechiness"])} tandis que "${raw_spotify_audio_features_data[12187]["name"]}" a un coefficient de parole de ${formatNumberFrench(raw_spotify_audio_features_data[12187]["speechiness"])}.`], ["acousticness", md`**L'acousticité** est une mesure de confiance de 0,0 à 1,0 indiquant si la piste est acoustique. 1,0 représente une confiance élevée que la piste est acoustique. "${raw_spotify_audio_features_data[5465]["name"]}" a une acousticité de ${formatNumberFrench(raw_spotify_audio_features_data[5465]["acousticness"])} tandis que "${raw_spotify_audio_features_data[11517]["name"]}" a une acousticité de ${formatNumberFrench(raw_spotify_audio_features_data[11517]["acousticness"])}.`], ["instrumentalness", md`**L'instrumentalité** prédit si une piste ne contient pas de voix. Les sons "Ooh" et "aah" sont traités comme instrumentaux dans ce contexte. Les morceaux de rap ou de mots parlés sont clairement "vocaux". Plus la valeur de l'instrument est proche de 1,0, plus la piste est susceptible de ne contenir aucun contenu vocal. Les valeurs supérieures à 0,5 sont destinées à représenter des pistes instrumentales, mais la confiance est plus élevée lorsque la valeur s'approche de 1,0. "${raw_spotify_audio_features_data[5974]["name"]}" a une instrumentalité de ${formatNumberFrench(raw_spotify_audio_features_data[5974]["instrumentalness"])} tandis que "${raw_spotify_audio_features_data[78]["name"]}" a une instrumentalité de ${formatNumberFrench(raw_spotify_audio_features_data[78]["instrumentalness"])}.`], ["liveness", md`**La vivacité** détecte la présence d'un public dans l'enregistrement. Des valeurs de vivacité plus élevées représentent une probabilité accrue que la piste ait été jouée en direct. Une valeur supérieure à 0,8 offre une forte probabilité que la piste soit en direct. "${raw_spotify_audio_features_data[13214]["name"]}" a une vivacité de ${formatNumberFrench(raw_spotify_audio_features_data[13214]["liveness"])} tandis que "${raw_spotify_audio_features_data[611]["name"]}" a une vivacité de ${formatNumberFrench(raw_spotify_audio_features_data[611]["liveness"])}.`], ["valence", md`**La valence** est une mesure de 0,0 à 1,0 décrivant la positivité musicale véhiculée par une piste. Les pistes avec une valence élevée semblent plus positives (par exemple, joyeuses, joyeuses, euphoriques), tandis que les pistes avec une faible valence semblent plus négatives (par exemple, tristes, déprimées, en colère). "${raw_spotify_audio_features_data[6590]["name"]}" a une valence de ${formatNumberFrench(raw_spotify_audio_features_data[6590]["valence"])} tandis que "${raw_spotify_audio_features_data[5543]["name"]}" a une valence de ${formatNumberFrench(raw_spotify_audio_features_data[5543]["valence"])}.`]])39:[{"id":"635feed2db6157fc99fdfb17e72e5f24b168be703b0dc8a027a945f91118a625ba85eedbb9ac700ff62b093d3c4505b2b3fb318fb897fd75af92af756d298650","href":"https://static.observableusercontent.com/files/635feed2db6157fc99fdfb17e72e5f24b168be703b0dc8a027a945f91118a625ba85eedbb9ac700ff62b093d3c4505b2b3fb318fb897fd75af92af756d298650","name":"study_correlation_coefficient_export_distributions.png","type":"image/png","lastModified":1614347520841.386,"size":161705}] 2f:{"title":"[MOS 5.5] Musicharts","cells":[{"id":0,"value":"md`# [MOS 5.5] Musicharts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`\n## Introduction\nDans ce notebook, nous, [Raphaël Chalicarne](https://github.com/raphaelchalicarne), [Pierre Grimal](https://github.com/PierreGrimal) et [Daniel Mer](https://github.com/manielder), proposons d'étudier les habitudes d'écoutes sur Spotify lors de l'année 2020 entre l'Europe et l'Amérique du Sud.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`\n### Données Spotify\nLes données viennent du site [Spotify Charts](https://spotifycharts.com/) et sont basées sur les 200 titres les plus écoutés chaque jour dans différents pays en 2020.\n\nSpotify fournit une [API](https://developer.spotify.com/documentation/web-api/reference/#object-audiofeaturesobject) permettant d'accéder aux caractéristiques audio de chaque titre.\n\nLe menu déroulant ci-dessous permet de comprendre à quoi correspond chacune de ces caractéristiques.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof descriptionCarac = Inputs.select(\n new Map([\n [\"Dansabilité 🕺\", \"danceability\"],\n [\"Énergie 🔥\", \"energy\"],\n [\"Mode 🎚️\", \"mode\"],\n [\"Parole 💬\", \"speechiness\"],\n [\"Acousticité 🎻\", \"acousticness\"],\n [\"Instrumentalité 🤫\", \"instrumentalness\"],\n [\"Vivacité 👨‍👩‍👧‍👦\", \"liveness\"],\n [\"Valence 😁\", \"valence\"]\n ]),\n {\n label: \"Caractéristique audio\",\n //description: \"Choisissez la caractéristique dont vous souhaitez connaître la description\",\n value: \"valence\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"descriptionCaracMap.get(descriptionCarac)","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"md`## Un profil d'écoute différent selon le pays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"md`Pour commencer, on peut afficher un profil des caractéristiques d'écoute de chaque pays moyenné sur l'année.\n\nDes tendances semblent émerger selon les continents : les pays d'Amérique du Sud écoutent des musiques plus **joyeuses**, plus **énergiques** et un peu plus **dansantes** qu'en Europe.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"viewof countries_array_carac_mean = Inputs.checkbox(\n countries,\n {\n value: [\"france\", \"bresil\"],\n label: \"Pays\",\n format: x => html`${formatCountry.get(x)}`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`## Des habitudes d'écoute différentes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`On peut remarquer qu'en fonction du continent (Europe ou Amérique du Sud), les variations journalières moyennées sur le top 200 peuvent varier.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"md`Par exemple, à l'exception de l'Espagne 🇪🇸, les pays d'Europe écoutent en moyenne des musiques moins **joyeuses** qu'en Amérique du Sud.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"md`Le Brésil 🇧🇷 se distingue des autres pays Sud Américains par une écoute de musiques nettement plus **acoustiques**, et d'extraits de concerts (une **vivacité** plus élevée).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"md`Certains pays Sud Américains tels que l'Argentine 🇦🇷, le Brésil 🇧🇷, la Colombie 🇨🇴 ou encore le Paraguay 🇵🇾 semblent avoir des habitudes d'écoute qui varient selon un rythme hebdomadaire. Cela peut se voir notamment sur l'évolution de la **valence**, ou dans une moindre mesure de l'**énergie** des musiques écoutées qui semble plus élevée le week-end.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof selectedCarac = Inputs.select(\n new Map([\n [\"Dansabilité 🕺\", \"danceability\"],\n [\"Énergie 🔥\", \"energy\"],\n [\"Mode 🎚️\", \"mode\"],\n [\"Parole 💬\", \"speechiness\"],\n [\"Acousticité 🎻\", \"acousticness\"],\n [\"Instrumentalité 🤫\", \"instrumentalness\"],\n [\"Vivacité 👨‍👩‍👧‍👦\", \"liveness\"],\n [\"Valence 😁\", \"valence\"]\n ]),\n {\n label: \"Caractéristique audio\",\n value: \"valence\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"viewof countries_array = Inputs.checkbox(\n countries,\n {\n value: [\"france\", \"bresil\"],\n label: \"Pays\",\n format: x => html`${formatCountry.get(x)}`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`## L'influence d'évènements particuliers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`On remarque que les habitudes d'écoute changent particulièrement en Europe autour de Noël, par exemple en Allemagne 🇩🇪, en Suisse 🇨🇭, en Autriche 🇦🇹 ou en République Tchèque 🇨🇿, alors qu'elles restent plus stables en Amérique du Sud au cours de l'année.\n\nCela peut s'expliquer par l'organisation de marchés de Noël durant les week-ends du mois de Décembre.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`Dans certains pays, des évènements spécifiques comme la fête nationale au Chili 🇨🇱 le 18 Septembre, le carnaval en Allemagne 🇩🇪 en Février ou les commémorations de la fin de la Seconde Guerre Mondiale le 8 Mai au Royaume-Uni 🇬🇧 peuvent expliquer des changements d'écoute inhabituels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"md`Il faut noter que certains évènements n'apparaissent probablement pas en raison de la pandémie de Covid-19 car ils ont été annulés lors de l'année 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"viewof countries_array_particular_events = Inputs.checkbox(\n countries,\n {\n value: [\"allemagne\", \"chili\", \"royaume-uni\"],\n label: \"Pays\",\n format: x => html`${formatCountry.get(x)}`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"md`## Nombre de musiques en commun dans le top 200`","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"viewof dateHeatmap = Scrubber(dates, {\n autoplay: false,\n loop: false,\n delay: 50,\n format: date => date.toLocaleString(\"fr\", {month: \"long\", day: \"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"legend({\n color: colorHeatmap,\n title: \"Nombre de musiques en commun dans le Top 200 quotidien\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"md`## Pour aller plus loin...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`## Paramètres de mise en forme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`### Texte`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"formatNumberFrench = number => new Intl.NumberFormat('fr-FR', { style: 'decimal' }).format(number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"formatCaracFrench = new Map([\n [\"danceability\", \"Dansabilité\"],\n [\"energy\", \"Énergie\"],\n [\"mode\", \"Mode\"],\n [\"speechiness\", \"Parole\"],\n [\"acousticness\", \"Acousticité\"],\n [\"instrumentalness\", \"Instrumentalité\"],\n [\"liveness\", \"Vivacité\"],\n [\"valence\", \"Valence\"]\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"formatCountry = new Map([\n [\"france\", \"France 🇫🇷\"],\n [\"belgique\", \"Belgique 🇧🇪\"],\n [\"suisse\", \"Suisse 🇨🇭\"],\n [\"autriche\", \"Autriche 🇦🇹\"],\n [\"allemagne\", \"Allemagne 🇩🇪\"],\n [\"danemark\", \"Danemark 🇩🇰\"],\n [\"republique_tcheque\", \"République Tchèque 🇨🇿\"],\n [\"royaume-uni\", \"Royaume-Uni 🇬🇧\"], \n [\"portugal\", \"Portugal 🇵🇹\"],\n [\"italie\", \"Italie 🇮🇹\"],\n [\"espagne\", \"Espagne 🇪🇸\"],\n [\"bresil\", \"Brésil 🇧🇷\"],\n [\"argentine\", \"Argentine 🇦🇷\"],\n [\"bolivie\", \"Bolivie 🇧🇴\"],\n [\"chili\", \"Chili 🇨🇱\"],\n [\"colombie\", \"Colombie 🇨🇴\"],\n [\"equateur\", \"Équateur 🇪🇨\"],\n [\"paraguay\", \"Paraguay 🇵🇾\"]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"md`### Temps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"customISOFormat = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"customISOParser = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"md`### Couleur`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"colorContinent = d3.scaleOrdinal()\n .domain([\"europe\", \"america\"])\n .range([\"#0079C2\", \"#E61B44\"])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"continentMap = new Map([\n [\"france\", \"europe\"], \n [\"allemagne\", \"europe\"],\n [\"argentine\", \"america\"], \n [\"autriche\", \"europe\"],\n [\"belgique\", \"europe\"], \n [\"bolivie\", \"america\"],\n [\"bresil\", \"america\"], \n [\"chili\", \"america\"],\n [\"colombie\", \"america\"], \n [\"danemark\", \"europe\"],\n [\"equateur\", \"america\"], \n [\"espagne\", \"europe\"],\n [\"italie\", \"europe\"],\n [\"paraguay\", \"america\"],\n [\"portugal\", \"europe\"],\n [\"republique_tcheque\", \"europe\"],\n [\"royaume-uni\", \"europe\"], \n [\"suisse\", \"europe\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"colorHeatmap = d3.scaleSequential([0, 200], d3.interpolateYlGn);","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"md`### Dimensions des graphes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"height_circle = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"margin = ({top: 30, right: 60, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"innerRadius = width / 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"outerRadius = width / 2 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`## Fonctions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`### Affichage de la description des caractéristiques`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"embedCaracMap = new Map([[\"danceability\", \"029b14P3Vgug7rorzvM208\"], \n [\"energy\", \"4rNVAJrVkFRFEHwelHcV5R\"], \n [\"mode\", \"5CJ5UDJa3VAJHrdjIqs1zB\"], \n [\"speechiness\", \"60ueppG4njoKnKTNrD9MtY\"], \n [\"acousticness\", \"63jTy33OFqkbhuz1EfGhU8\"], \n [\"instrumentalness\", \"4elvjNruv927Aj3YlngRfj\"], \n [\"liveness\", \"6kFV2wcRggyZWDPEolZ9Vl\"], \n [\"valence\", \"0cu5DreSitXDOdkrWsePmL\"]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"md`### Affichage du profil caractéristique par pays moyenné sur l'année`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"caracYearlyMeanMap = country => {\n let dailyMeanData = caracMeanMap(country);\n \n let yearlyMean = [];\n caracs.forEach(carac => yearlyMean.push([\n carac, \n d3.mean(dailyMeanData, d => d == null ? 0 : d[carac])\n ]));\n \n return yearlyMean;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`### Affichage de l'évolution annuelle de chaque caractéristique par pays (line chart)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"caracMeanMap = country => tidyDataMap.get(country).map(\n (dailyTop, i) => ({\n \"date\": customISOFormat(dates[i]),\n \"danceability\": d3.mean(dailyTop, d => d == null ? 0 : d[\"danceability\"]),\n \"energy\": d3.mean(dailyTop, d => d == null ? 0 : d[\"energy\"]),\n \"mode\": d3.mean(dailyTop, d => d == null ? 0 : d[\"mode\"]),\n \"speechiness\": d3.mean(dailyTop, d => d == null ? 0 : d[\"speechiness\"]),\n \"acousticness\": d3.mean(dailyTop, d => d == null ? 0 : d[\"acousticness\"]),\n \"instrumentalness\": d3.mean(dailyTop, d => d == null ? 0 : d[\"instrumentalness\"]),\n \"liveness\": d3.mean(dailyTop, d => d == null ? 0 : d[\"liveness\"]),\n \"valence\": d3.mean(dailyTop, d => d == null ? 0 : d[\"valence\"])\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`### Affichage de l'influence d'évènements particuliers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"caracDistanceToMean = country => {\n let dailyMeanData = caracMeanMap(country);\n \n let yearlyMean = {};\n caracs.forEach(carac => yearlyMean[carac] = d3.mean(dailyMeanData, d => d == null ? 0 : d[carac]));\n \n let distanceToMean = dailyMeanData.map(dailyMean => {\n let dailyDistanceToMean = {};\n dailyDistanceToMean[\"date\"] = dailyMean[\"date\"];\n caracs.forEach(carac => dailyDistanceToMean[carac] = (dailyMean[carac] - yearlyMean[carac])**2);\n return dailyDistanceToMean;\n });\n \n return distanceToMean;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"sumCaracDistanceToMean = country => {\n let distanceToMean = caracDistanceToMean(country);\n let sumDistanceToMean = distanceToMean.map(dailyDistanceToMean => ({\n \"date\": dailyDistanceToMean[\"date\"],\n \"sumDistanceToMean\": d3.sum(caracs.map(carac => dailyDistanceToMean[carac]))\n }));\n return sumDistanceToMean;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"md`### Affichage du nombre de musiques en commun`","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"nb_common_tracks_array = raw_nb_common_tracks.split(\"\\n\").slice(0,366).map(row => row.split(\",\").map(number => Number(number)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"data_nested_common_tracks = nb_common_tracks_array.map(row =>\n {\n let country_list = [\"france\", \"belgique\", \"suisse\", \"autriche\", \"allemagne\", \"danemark\", \"republique_tcheque\", \"royaume-uni\", \"italie\", \"portugal\", \"espagne\", \"bresil\", \"argentine\", \"bolivie\", \"chili\", \"colombie\", \"equateur\", \"paraguay\"];\n let nb_countries = country_list.length;\n var common_tracks_day = [];\n for (let i=0; i < nb_countries; i++) {\n let country_1 = country_list[i];\n var country_obj = [];\n for (let j=0; j < nb_countries; j++) {\n var country_2 = country_list[j];\n country_obj.push([country_2, row[nb_countries*i + j]]);\n }\n common_tracks_day.push([country_1, country_obj]);\n }\n return common_tracks_day;\n }\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"countries_common_tracks = [\"France 🇫🇷\", \"Belgique 🇧🇪\", \"Suisse 🇨🇭\", \"Autriche 🇦🇹\", \"Allemagne 🇩🇪\", \"Danemark 🇩🇰\", \"République Tchèque 🇨🇿\", \"Royaume-Uni 🇬🇧\", \"Portugal 🇵🇹\", \"Italie 🇮🇹\", \"Espagne 🇪🇸\", \"Brésil 🇧🇷\", \"Argentine 🇦🇷\", \"Bolivie 🇧🇴\", \"Chili 🇨🇱\", \"Colombie 🇨🇴\", \"Équateur 🇪🇨\", \"Paraguay 🇵🇾\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`### Mise en forme des données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"tidyDataMap = new Map([\n [\"france\", raw_france_data], \n [\"allemagne\", raw_allemagne_data],\n [\"argentine\", raw_argentine_data], \n [\"autriche\", raw_autriche_data],\n [\"belgique\", raw_belgique_data], \n [\"bolivie\", raw_bolivie_data],\n [\"bresil\", raw_bresil_data], \n [\"chili\", raw_chili_data],\n [\"colombie\", raw_colombie_data], \n [\"danemark\", raw_danemark_data],\n [\"equateur\", raw_equateur_data], \n [\"espagne\", raw_espagne_data],\n [\"italie\", raw_italie_data],\n [\"paraguay\", raw_paraguay_data],\n [\"portugal\", raw_portugal_data],\n [\"republique_tcheque\", raw_republique_tcheque_data],\n [\"royaume-uni\", raw_royaume_uni_data], \n [\"suisse\", raw_suisse_data]\n].map(c => [\n c[0],\n tidyData(c[1])\n])\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"tidyData = raw_country_data => dates.map(\n date => raw_country_data.map(\n position => getCaracFromId( position[customISOFormat(date)] )\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"getCaracFromId = id => {\n let track_data = spotifyMap.get(id);\n if (track_data == undefined) {\n console.log(id);\n }\n return track_data == undefined ? null : track_data[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"spotifyMap = d3.group(raw_spotify_audio_features_data, d => d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`### Import des données depuis le repo [Github](https://github.com/raphaelchalicarne/MOS5.5-dataviz)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"raw_allemagne_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_allemagne_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"raw_argentine_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_argentine_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"raw_autriche_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_autriche_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"raw_belgique_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_belgique_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"raw_bolivie_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_bolivie_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"raw_bresil_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_bresil_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"raw_chili_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_chili_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"raw_colombie_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_colombie_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"raw_danemark_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_danemark_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"raw_equateur_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_equateur_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"raw_espagne_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_espagne_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"raw_france_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_france_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"raw_italie_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_italie_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"raw_paraguay_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_paraguay_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"raw_portugal_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_portugal_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"raw_republique_tcheque_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_republique_tcheque_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"raw_royaume_uni_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_royaume-uni_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"raw_suisse_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_suisse_200_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"raw_spotify_audio_features_data = d3.csv(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/top_200_af_spotify.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"raw_nb_common_tracks = d3.text(\"https://raw.githubusercontent.com/raphaelchalicarne/MOS5.5-dataviz/main/nb_common_tracks.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`### Paramètres`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"dates = Array.from({length: 366}, (_, i) => {\n const date = new Date(2020, 0, 1);\n date.setDate(i + 1);\n return date;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"caracs = [\"danceability\", \"energy\", \"mode\", \"speechiness\", \"acousticness\", \"instrumentalness\", \"liveness\", \"valence\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"countries = [\"france\", \"allemagne\", \"argentine\", \"autriche\", \"belgique\", \"bolivie\", \"bresil\", \"chili\", \"colombie\", \"danemark\", \"equateur\", \"espagne\", \"italie\", \"paraguay\", \"portugal\", \"republique_tcheque\", \"royaume-uni\", \"suisse\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}