2a:T5ee,viewof countries_array = Checkbox( new Map([ [html`France 🇫🇷`, "france"], [html`Allemagne 🇩🇪`, "allemagne"], [html`Argentine 🇦🇷`, "argentine"], [html`Autriche 🇦🇹`, "autriche"], [html`Belgique 🇧🇪`, "belgique"], [html`Bolivie 🇧🇴`, "bolivie"], [html`Brésil 🇧🇷`, "bresil"], [html`Chili 🇨🇱`, "chili"], [html`Colombie 🇨🇴`, "colombie"], [html`Danemark 🇩🇰`, "danemark"], [html`Équateur 🇪🇨`, "equateur"], [html`Espagne 🇪🇸`, "espagne"], [html`Italie 🇮🇹`, "italie"], [html`Paraguay 🇵🇾`, "paraguay"], [html`Portugal 🇵🇹`, "portugal"], [html`République Tchèque 🇨🇿`, "republique_tcheque"], [html`Royaume-Uni 🇬🇧`, "royaume-uni"], [html`Suisse 🇨🇭`, "suisse"] ]), { label: "Pays", value: ["france", "bresil"], })2b:Te76,hebdoCircularChart = { const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", `${-width / 2 -margin.left} ${-height / 2 -margin.top} ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`) .style("width", "100%") .style("height", "auto") .style("font", "10px sans-serif"); const x = d3.scaleBand() .domain(week_dates) .range([0, 2 * Math.PI]) const xAxis = g => g .attr("text-anchor", "middle") .call(g => g.selectAll("g") .data(week_dates) .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) + 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(d => frenchTimeFormat(d)) .clone(true) .attr("fill", "#000") .attr("stroke", "none"))) const angle = d3.scaleBand() .domain([1,2,3,4,5,6,0]) .range([0, 2 * Math.PI]) 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(toDay(d[0]))+ x.bandwidth() / 2) .radius(d => radius(d[1][selectedCarac])) .curve(d3.curveCardinalClosed) const addPath = (svg, country) => { let data = caracMeanWeekdayMap(country); return (svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", colorContinent(continentMap.get(country))) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line)); } const addDot = (svg, country) => { let data = caracMeanWeekdayMap(country); return (svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => radius(d[1][selectedCarac]) * Math.cos(x(toDay(d[0])) + x.bandwidth() / 2 - Math.PI/2)) .attr("cy", d => radius(d[1][selectedCarac]) * Math.sin(x(toDay(d[0])) + x.bandwidth() / 2 - Math.PI/2)) .attr("fill", d => colorContinent(continentMap.get(country))) .attr("r", d => "3.5") ); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); countries_array.forEach(country => addPath(svg, country)); countries_array.forEach(country => addDot(svg, country)); return svg.node(); }2c:T5f9,viewof countries_array_carac_mean = Checkbox( new Map([ [html`France 🇫🇷`, "france"], [html`Allemagne 🇩🇪`, "allemagne"], [html`Argentine 🇦🇷`, "argentine"], [html`Autriche 🇦🇹`, "autriche"], [html`Belgique 🇧🇪`, "belgique"], [html`Bolivie 🇧🇴`, "bolivie"], [html`Brésil 🇧🇷`, "bresil"], [html`Chili 🇨🇱`, "chili"], [html`Colombie 🇨🇴`, "colombie"], [html`Danemark 🇩🇰`, "danemark"], [html`Équateur 🇪🇨`, "equateur"], [html`Espagne 🇪🇸`, "espagne"], [html`Italie 🇮🇹`, "italie"], [html`Paraguay 🇵🇾`, "paraguay"], [html`Portugal 🇵🇹`, "portugal"], [html`République Tchèque 🇨🇿`, "republique_tcheque"], [html`Royaume-Uni 🇬🇧`, "royaume-uni"], [html`Suisse 🇨🇭`, "suisse"] ]), { label: "Pays", value: ["france", "bresil"], })2d:Tdd9,caracCircularChart = { const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", `${-width / 2 -margin.left} ${-height / 2 -margin.top} ${width + margin.left + margin.right} ${height + 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 addPath = (svg, country) => { let data = caracYearlyMeanMap(country); return (svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", colorContinent(continentMap.get(country))) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line)); } const addDot = (svg, country) => { let data = caracYearlyMeanMap(country); return (svg.append("g") .selectAll("circle") .data(data) .join("circle") .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)) .attr("fill", d => colorContinent(continentMap.get(country))) .attr("r", d => "3.5") ); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); countries_array_carac_mean.forEach(country => addPath(svg, country)); countries_array_carac_mean.forEach(country => addDot(svg, country)); return svg.node(); }2e:[] 29:{"title":"[MOS 5.5] Exploration de données Spotify (3/3)","cells":[{"id":0,"value":"md`# [MOS 5.5] Exploration de données Spotify (3/3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`## Caractéristiques moyennes selon le jour de la semaine`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof selectedCarac = 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":145,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"md`## Caractéristiques moyennes par pays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`## Paramètres de mise en forme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`### Temps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"customISOFormat = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"customISOParser = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"function frenchTimeFormat(date) {\n var locale = d3.timeFormatDefaultLocale({\n \"dateTime\": \"%A %e %B %Y à %X\",\n \"date\": \"%d/%m/%Y\",\n \"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Dimanche\", \"Lundi\", \"Mardi\", \"Mercredi\", \"Jeudi\", \"Vendredi\", \"Samedi\"],\n \"shortDays\": [\"dim\", \"lun\", \"mar\", \"mer\", \"jeu\", \"ven\", \"sam\"],\n \"months\": [\"Janvier\", \"Février\", \"Mars\", \"Avril\", \"Mai\", \"Juin\", \"Juillet\", \"Août\", \"Septembre\", \"Octobre\", \"Novembre\", \"Décembre\"],\n \"shortMonths\": [\"janv\", \"févr\", \"mars\", \"avr\", \"mai\", \"juin\", \"juil\", \"août\", \"sept\", \"oct\", \"nov\", \"déc\"]\n });\n var formatWeekDay = locale.format(\"%A\");\n\n return formatWeekDay(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"week_dates = Array.from({length: 7}, (_, i) => {\n const date = new Date(2000, 0, 3);\n date.setDate(date.getDate() + i);\n return date;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"toDay = d3.scaleOrdinal()\n .domain([1,2,3,4,5,6,0])\n .range(week_dates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"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":129,"value":"md`### Couleur`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"colorContinent = d3.scaleOrdinal()\n .domain([\"europe\", \"america\"])\n .range([\"#0079C2\", \"#E61B44\"])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"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":113,"value":"md`### Dimensions des graphes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"height = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"margin = ({top: 30, right: 60, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"innerRadius = width / 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"outerRadius = width / 2 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`## Fonctions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"md`### Affichage des caractéristiques moyennes selon le jour de la semaine`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"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":264,"value":"// Permet de trier les données moyennes d'une journée selon le jour de la semaine\ncaracWeekdayMap = country => {\n const caracMeanData = caracMeanMap(country);\n const caracMeanWeekdayData = d3.group(caracMeanData, d => customISOParser(d.date).getDay());\n return caracMeanWeekdayData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"// Permet de moyenner les caractéristiques pour un pays selon le jour de la semaine\ncaracMeanWeekdayMap = country => {\n const caracMeanData = caracMeanMap(country);\n const caracMeanWeekdayData = d3.rollups(\n caracMeanData, \n v => ({\n \"danceability\": d3.mean(v, d => d == null ? 0 : d[\"danceability\"]),\n \"energy\": d3.mean(v, d => d == null ? 0 : d[\"energy\"]),\n \"mode\": d3.mean(v, d => d == null ? 0 : d[\"mode\"]),\n \"speechiness\": d3.mean(v, d => d == null ? 0 : d[\"speechiness\"]),\n \"acousticness\": d3.mean(v, d => d == null ? 0 : d[\"acousticness\"]),\n \"instrumentalness\": d3.mean(v, d => d == null ? 0 : d[\"instrumentalness\"]),\n \"liveness\": d3.mean(v, d => d == null ? 0 : d[\"liveness\"]),\n \"valence\": d3.mean(v, d => d == null ? 0 : d[\"valence\"])\n }),\n d => customISOParser(d.date).getDay()\n );\n return caracMeanWeekdayData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`### Affichage des caractéristiques moyennes par pays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"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":74,"value":"md`### Mise en forme des données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"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":80,"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":82,"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":84,"value":"spotifyMap = d3.group(raw_spotify_audio_features_data, d => d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`### Import des données depuis le repo [Github](https://github.com/raphaelchalicarne/MOS5.5-dataviz)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"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":23,"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":24,"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":29,"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":34,"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":32,"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":38,"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":41,"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":44,"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":47,"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":50,"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":53,"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":56,"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":59,"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":62,"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":65,"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":68,"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":71,"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":460,"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":91,"value":"md`### Paramètres`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"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":94,"value":"caracs = [\"danceability\", \"energy\", \"mode\", \"speechiness\", \"acousticness\", \"instrumentalness\", \"liveness\", \"valence\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"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":8,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"import {Checkbox, Radio, Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2e","stdlib":"1","titling":"auto"}