31:[{"id":"a06e64a36ab0dfe417d3f3ce47152f5ba25d40e8fff8a2bd91fc900eea8eafb8a27a3e6eab82e97400b9806d586ff8c1e4d83d185f08543ae9f21707ef566737","href":"https://static.observableusercontent.com/files/a06e64a36ab0dfe417d3f3ce47152f5ba25d40e8fff8a2bd91fc900eea8eafb8a27a3e6eab82e97400b9806d586ff8c1e4d83d185f08543ae9f21707ef566737","name":"top_france_200_spotify.csv","type":"text/csv","lastModified":1610715931033.27,"size":1688327},{"id":"5f8ca159cb78905305bfbffeaa9098f95a00810b4cef00de0046741beacf4f3039f8d71b80ce3f443826a3fe30c51943234d5da8e00f4c2811461892c92d4078","href":"https://static.observableusercontent.com/files/5f8ca159cb78905305bfbffeaa9098f95a00810b4cef00de0046741beacf4f3039f8d71b80ce3f443826a3fe30c51943234d5da8e00f4c2811461892c92d4078","name":"top_200_af_spotify.csv","type":"text/csv","lastModified":1610715535432.377,"size":3873002}] 2f:{"title":"[MOS 5.5] Exploration de données Spotify (1/3)","cells":[{"id":0,"value":"md`# [MOS 5.5] Exploration de données Spotify (1/3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`Ce notebook a été créé le Vendredi 15 Janvier lors du cours de Visualisation Interactive de Données. Il est prolongé dans [ce Notebook](https://observablehq.com/d/76f71b4f6113d5ee). Il fait suite à [ce notebook sur les tendances d'écoute Spotify](https://observablehq.com/@raphaelchalicarne/tendances-decoutes-spotify-en-2020).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Chargez les données dans Observable et afficher les 5 premières lignes dans une table (import { table } from \"@gampleman/table\")`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"html`\n\n${top_france_data.slice(0, 5).map(d => {\n return \"\"\n})}\n

\" + d + \"

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"html`\n\n${spotify_data.slice(0, 5).map(d => {\n return \"\"\n})}\n

\" + d.name + \"

\" + d.artists + \"

\" + d.id + \"

\" + d.valence + \"

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`Tidy data :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"html`\n\n${top_france.slice(0, 5).map(d => {\n return \"\"\n})}\n

\" + d.date + \"

\" + d[\"1\"][\"name\"] + \"

\" + d[\"1\"][\"artists\"] + \"

\" + d[\"1\"][\"valence\"] + \"

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`### Afficher le nombre de lignes et de colonnes : \n- ${top_france.length} lignes\n- ${Object.keys(top_france[0]).length} colonnes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`## Visualisation avec Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`Valence de la chanson la plus écoutée dans l'année en France`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"vl.markPoint()\n .data(top_1_france)\n .encode(\n vl.x().fieldT(\"date\"),\n vl.y().fieldQ(\"valence\"),\n vl.color().fieldN(\"name\").sort(\"valence\")\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"top_1_france = top_france.map(d => ({date: d.date, valence: d[1].valence, name: d[1].name}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`## Visualisation avec D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`height : ${height}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"chart_danceability_france = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(year_2020Axis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n const track_carac = [\"danceability\", \"energy\", \"mode\", \"speechiness\", \"acousticness\", \"instrumentalness\", \"liveness\", \"valence\"];\n track_carac.forEach((carac, i) => addPath(svg, d3.schemeCategory10[i], carac));\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"year_2020 = d3.scaleTime()\n .domain(d3.extent(top_france.map(d => d.date))).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"y = d3.scaleLinear()\n .domain([0, 1]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"year_2020Axis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(year_2020).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(getData(\"valence\").y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"getCaracMean = ((day_data, carac) => d3.mean(position_keys.map(i => day_data[i] == null ? 0 : day_data[i][carac])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"getData = (carac => top_france.map(day_data => ({date: day_data.date, mean_val:getCaracMean(day_data, carac)})))","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"function addPath(svg, color, carac) {\n let data = getData(carac);\n let line = d3.line()\n .curve(d3.curveStep)\n .defined(d => !isNaN(d.mean_val))\n .x(d => year_2020(d.date))\n .y(d => y(d.mean_val));\n return (svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", color)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"margin = ({top: 30, right: 60, bottom: 30, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`## Données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"top_france_data = d3.transpose(d3.csvParseRows(await FileAttachment(\"top_france_200_spotify.csv\").text(), d3.autoType))","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"spotify_data = d3.csvParse(await FileAttachment(\"top_200_af_spotify.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"spotifyMap = d3.group(spotify_data, d => d.id)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`Conversion des données au format [tidy](https://cran.r-project.org/web/packages/tidyr/vignettes/tidy-data.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"top_france = top_france_data.slice(1).map(row => {\n let obj = {};\n let date_row = row[0];\n obj[\"date\"] = date_row;\n for (let position = 1; position < 201; position++) {\n let track_id = row[position];\n let track_data = spotifyMap.get(track_id);\n obj[position] = track_data == undefined ? null : track_data[0];\n }\n return obj;\n}).sort((a,b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"position_keys = Array.from({length:200}, (_,i) => i+1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"import {select} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}