31:T6b4,treemapChart2 = { const root = treemap2(countPerSong); const svg = d3.create("svg") .attr("viewBox", [0, 0, widthTM, heightTM]) .style("overflow", "visible") .style("font", "10px sans-serif"); const shadow = DOM.uid("shadow"); svg.append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("stdDeviation", 3); const node = svg.selectAll("g") .data(d3.group(root, d => d.height)) .join("g") .attr("filter", shadow) .selectAll("g") .data(d => d[1]) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); node.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`); node.append("rect") .attr("id", d => (d.nodeUid = DOM.uid("node")).id) .attr("fill", d => colorTreemap2(d.height)) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.nodeUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value))) .join("tspan") .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); node.filter(d => d.children).selectAll("tspan") .attr("dx", 3) .attr("y", 13); node.filter(d => !d.children).selectAll("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`); return svg.node(); }32:T51d,treemapChart = { const root = treemap(countPerSong); const svg = d3.create("svg") .attr("viewBox", [0, 0, widthTM, heightTM]) .style("font", "10px sans-serif"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return colorTreemap(d.data.name); }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); return svg.node(); }33:T532,chartSt = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .selectAll("g") .data(timeAndCountPerDay) .join("g") .attr("transform", d => `translate(${x0St(d[groupKey])},0)`) .selectAll("rect") .data(d => [{key:"count", value: d["count"]}])//keys.map(key => ({key, value: d[key]}))) .join("rect") .attr("x", d => x1St(d.key)) .attr("y", d => ySt(d.value)) .attr("width", x1St.bandwidth()) .attr("height", d => ySt(0) - ySt(d.value)) .attr("fill", d => colorSt(d.key)); svg.append("g") .selectAll("g") .data(timeAndCountPerDay) .join("g") .attr("transform", d => `translate(${x0St(d[groupKey])},0)`) .selectAll("rect") .data(d => [{key:"time", value: d["time"]}]) .join("rect") .attr("x", d => x1St(d.key)) // .attr("y", d => ySt(d.value)) .attr("y", d => yStR(d.value)) .attr("width", x1St.bandwidth()) .attr("height", d => yStR(0) - yStR(d.value)) .attr("fill", d => colorSt(d.key)); svg.append("g") .call(xAxisSt) .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "start"); svg.append("g") .call(yAxisSt); svg.append("g") .call(yAxisStR); svg.append("g") .call(legend); return svg.node(); }34:T412,piechart = { const arcs = pie(countPerArtistMod); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => piecolor(d.data.name)) .attr("d", arc) .append("title") .text((d,i) => `${d.data.name}: ${d.data.value}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value)); return svg.node(); }35:T5bb,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background-color", "#FFFFFF") .html("

a simple tooltip

"); svg.append("g") .attr("fill", color) .selectAll("rect") .data(Object.values(countPerDay)) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", (d,i) => y(d)) .attr("height", (d,i) => y(0) - y(d)) .attr("width", x.bandwidth()) .attr("datum",(d,i)=>Object.keys(countPerDay)[i]) .attr("count",d=>d) .on("mouseover", function(d){tooltip.html("Nombre d'écoutes : " + d3.select(this)._groups[0][0].getAttribute("datum") + "
Date : "+ d3.select(this)._groups[0][0].getAttribute("count") + ""); return tooltip.style("visibility", "visible");}) // .on("mouseover", function(d){return tooltip.style("visibility", "visible");}) .on("mousemove", function(event){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); svg.append("g") .call(xAxis) .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "start"); svg.append("g") .call(yAxis); return svg.node(); }36:T4ae,function data2countPerSong(data){ let countPerArtistAndSound = {}; data.forEach(datum=>{ if (countPerArtistAndSound[datum.artist]){ if (countPerArtistAndSound[datum.artist][datum.track]) { countPerArtistAndSound[datum.artist][datum.track] += 1; } else { countPerArtistAndSound[datum.artist][datum.track] = 1; } } else { countPerArtistAndSound[datum.artist] = {}; countPerArtistAndSound[datum.artist][datum.track]=1; } }); let countPerSong = {"name":"spotify","children":[]}; Object.keys(countPerArtistAndSound).forEach(artist=>{ let children = [], count = 0, autre = 0; Object.keys(countPerArtistAndSound[artist]).forEach(song => { if (countPerArtistAndSound[artist][song] < minAutre) { autre += countPerArtistAndSound[artist][song]; } else { children.push({"name":song, "value" : countPerArtistAndSound[artist][song]}); } count += countPerArtistAndSound[artist][song]; }); children.push({"name":"Autre", "value" : autre}); if (count > minEcoutes) { countPerSong["children"].push({"name":artist,"children":children}); } }); return countPerSong; }37:[{"id":"23bf54bd6bcf8a332917d36fa93ad5820c77217449d6303e4b4fb6b32624b7b001d481dd96938433e69a16edbd13ae2dd9d8cd16ad3e32589b123293a21f1206","href":"https://static.observableusercontent.com/files/23bf54bd6bcf8a332917d36fa93ad5820c77217449d6303e4b4fb6b32624b7b001d481dd96938433e69a16edbd13ae2dd9d8cd16ad3e32589b123293a21f1206","name":"StreamingHistory1.json","type":"application/json","lastModified":1611001543983.949,"size":277554}] 2f:{"title":"My Spotify data with Observable","cells":[{"id":0,"value":"md`# My Spotify data with Observable\n\nI asked Spotify for my personal data. I received my **Streaming History**, a json file which includes all the songs I listened. Below is an extract of those data, from ${firstDate} to ${lastDate} and some visualisations (bar chart and pie chart) to analyse my music tastes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"firstDate = Object.keys(timePerDay)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"lastDate = Object.keys(timePerDay)[Object.keys(timePerDay).length-1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"\"Oldest date : \" + oldestD","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"\"Number of data : \" + data.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"oldestDate = new Date(oldestD);","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"viewof oldestD = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof minEcoutes = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"viewof minAutre = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"\"Minimal number of stream : \" + minEcoutes + \" - minimal number for 'autre' category : \" + minAutre;","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"treemap2 = data => cascade(\n d3.treemap()\n .size([widthTM, heightTM])\n .paddingOuter(3)\n .paddingTop(19)\n .paddingInner(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)),\n 3 // treemap.paddingOuter\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"function cascade(root, offset) {\n const x = new Map;\n const y = new Map;\n return root.eachAfter(d => {\n if (d.children) {\n x.set(d, 1 + d3.max(d.children, c => c.x1 === d.x1 - offset ? x.get(c) : NaN));\n y.set(d, 1 + d3.max(d.children, c => c.y1 === d.y1 - offset ? y.get(c) : NaN));\n } else {\n x.set(d, 0);\n y.set(d, 0);\n }\n }).eachBefore(d => {\n d.x1 -= 2 * offset * x.get(d);\n d.y1 -= 2 * offset * y.get(d);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"colorTreemap2 = d3.scaleSequential([8, 0], d3.interpolateMagma)","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"widthTM = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"heightTM = 1060","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"colorTreemap = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"treemap = data => d3.treemap()\n .size([widthTM, heightTM])\n .paddingOuter(3)\n .paddingTop(19)\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width-margin.right/3},0)`)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(colorSt.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 15)\n .attr(\"height\", 15)\n .attr(\"fill\", colorSt);\n\n g.append(\"text\")\n .attr(\"x\",-2)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"x0St = d3.scaleBand()\n .domain(timeAndCountPerDay.map(d => d[groupKey]))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"x1St = d3.scaleBand()\n .domain(keys)\n .rangeRound([0, x0St.bandwidth()])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"// ySt = d3.scaleLinear()\n// .domain([0, d3.max(timeAndCountPerDay, d => d3.max(keys, key => d[key]))]).nice()//keys\n// .rangeRound([height - margin.bottom, margin.top])\n\nySt = d3.scaleLinear()\n .domain([0, d3.max(timeAndCountPerDay, d => d3.max([\"count\"], key => d[key]))]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"yStR = d3.scaleLinear()\n .domain([0, d3.max(timeAndCountPerDay, d => d3.max([\"time\"], key => d[key]))]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"colorSt = d3.scaleOrdinal()\n .range([ \"#a05d56\", \"#ff8c00\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"xAxisSt = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x0St).tickFormat((d,i)=>{return i%2 == 0 ? d : \"\"}))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"yAxisSt = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(ySt).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Nombre écoutes\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"yAxisStR = g => g\n .attr(\"transform\", `translate(${width-margin.right-10},0)`)\n .call(d3.axisRight(yStR).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Temps écoute (en heure)\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"groupKey = \"date\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"keys = [\"count\",\"time\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"piecolor = d3.scaleOrdinal()\n .domain(countPerArtistMod.map(d=>d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), countPerArtistMod.length).reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"pa = pie(countPerArtistMod);","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"countPerArtistMod = Object.keys(countPerArtist).map(artist =>{\n return {\"name\" : artist, \"value\": countPerArtist[artist]};\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => Object.keys(countPerDay)[i]).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"x = d3.scaleBand()\n .domain(d3.range(Object.keys(countPerDay).length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null))//, countPerDay.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(countPerDay.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(Object.values(countPerDay))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"color = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"margin = ({top: 30, right: 65, bottom: 50, left:30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"countPerSong = data2countPerSong(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"countPerArtist = data2countPerArtist(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"function data2countPerArtist(data){\n let countPerArtist = {};\n data.forEach(datum=>{\n if (countPerArtist[datum.artist]){\n countPerArtist[datum.artist] += 1;\n } else {\n countPerArtist[datum.artist] = 1;\n }\n });\n Object.keys(countPerArtist).forEach(artist=>{\n if (countPerArtist[artist] < minEcoutes){\n delete countPerArtist[artist];\n }\n });\n return countPerArtist;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"timeAndCountPerDay = data2timeAndCountPerDay(timePerDay,countPerDay);","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"function data2timeAndCountPerDay(timePerDay,countPerDay){\n return Object.keys(timePerDay).map(datum=>{\n return {\"date\":datum, \"time\":timePerDay[datum], \"count\":countPerDay[datum]};\n }); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"timePerDay = data2timePerDay(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"function formatTime(time){\n time = time/1000;\n return (parseInt(time/3600).toString().length === 1 ? \"0\"+parseInt(time/3600) : parseInt(time/3600) ) + \":\" + (parseInt(time % 3600 / 60).toString().length === 1 ? \"0\" + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60) ) + \":\" + (parseInt(time%60).toString().length === 1 ? \"0\" + parseInt(time%60) : parseInt(time%60) );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"function data2timePerDay(data){\n let timePerDay = {};\n data.forEach(datum=>{\n if (timePerDay[getDMY(datum.endTime)]){\n timePerDay[getDMY(datum.endTime)] += datum.time;\n } else {\n timePerDay[getDMY(datum.endTime)] = datum.time;\n }\n });\n Object.keys(timePerDay).forEach(datum=>{timePerDay[datum] = timePerDay[datum]/(3600 * 1000);}); //formatTime(timePerDay[datum]);});\n return timePerDay;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"countPerDay = data2countPerDay(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"function getDMY(time){\n return time.getDate() + \"/\" + (time.getMonth()+1) + \"/\" + time.getUTCFullYear().toString().slice(2,4);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function data2countPerDay(data){\n let countPerDay = {};\n data.forEach(datum=>{\n // if (new Date(datum.endTime) >= oldestDate){\n if (countPerDay[getDMY(datum.endTime)]){\n countPerDay[getDMY(datum.endTime)] += 1;\n } else {\n countPerDay[getDMY(datum.endTime)] = 1;\n }\n // }\n });\n return countPerDay;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"table(data);","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import { table } from \"@gampleman/table\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"data = brutData.slice(0,brutData.length).map(datum=>{\n return (new Date(datum.endTime) >= oldestDate ? {\n 'endTime' : new Date(datum.endTime),\n 'artist':datum.artistName,\n 'track':datum.trackName,\n 'time':parseInt(datum.msPlayed)\n} : null)}).filter(value=>value!==null);","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"brutData = FileAttachment(\"StreamingHistory1.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}