2f:T6f5,alternativeChart = { var selectNetwork = new Object(); selectNetwork.nodes = network.nodes.filter(d => d.value >= minGenres); selectNetwork.links = network.links.filter(d => d.source.value >= minGenres && d.target.value >= minGenres); const nodes = selectNetwork.nodes, links = selectNetwork.links; const svg = d3 .create("svg") .attr("id", "graph") .attr("viewBox", [0, 0, width, height]); const lines = svg .selectAll("line") .data(links) .join("line") .style("stroke", "#333") .style("pointer-events", "none") .style("stroke-opacity", l => opacity(l.value)); const circles = svg .selectAll("circle") .data(nodes) .join("circle") .attr("r", 3) .style("stroke", d => color(d.cluster)) // set the line color .style("fill", "none"); const text = svg .selectAll("text") .data(nodes) .join("text") .attr("fill", "#333") .style("font-size", d => size(d.value) + "pt") .style("fill", d => color(d.cluster)) .text(d => d.id); const ticked = () => { lines .attr("x1", l => l.source.x) .attr("y1", l => l.source.y) .attr("x2", l => l.target.x) .attr("y2", l => l.target.y); circles .attr("cx", d => d.x) .attr("cy", d => d.y); text .attr("x", d => d.x) .attr("y", d => d.y); }; const simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-90)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("link", d3.forceLink(links).id(d => d.id)) .force("boundary", forceBoundary(3, 3, width, height)) .on("tick", ticked); text.call(drag(simulation)); ticked(); invalidation.then(() => simulation.stop()); return svg.node(); }30:T7bd,{ const target = html`

Song Attributes of Popular Songs per Country

`; // Return the div first so the following code can find it yield target; var divElement = document.getElementById("viz1634861288957"); var vizElement = divElement.getElementsByTagName("object")[0]; if (divElement.offsetWidth > 800) { vizElement.style.width = "100%"; vizElement.style.height = divElement.offsetWidth * 0.75 + "px"; } else if (divElement.offsetWidth > 500) { vizElement.style.width = "100%"; vizElement.style.height = divElement.offsetWidth * 0.75 + "px"; } else { vizElement.style.width = "100%"; vizElement.style.height = "991px"; } var scriptElement = document.createElement("script"); scriptElement.src = "https://public.tableau.com/javascripts/api/viz_v1.js"; vizElement.parentNode.insertBefore(scriptElement, vizElement); yield target; }31:T9c2,{ const target = html`

`; // Return the div first so the following code can find it yield target; var divElement = document.getElementById('viz1635104688691'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.minWidth='420px';vizElement.style.maxWidth='650px';vizElement.style.width='100%';vizElement.style.minHeight='587px';vizElement.style.maxHeight='887px';vizElement.style.height=(divElement.offsetWidth*0.75)+'px'; } else if ( divElement.offsetWidth > 500 ) { vizElement.style.minWidth='420px';vizElement.style.maxWidth='650px';vizElement.style.width='100%';vizElement.style.minHeight='587px';vizElement.style.maxHeight='887px';vizElement.style.height=(divElement.offsetWidth*0.75)+'px'; } else { vizElement.style.width='100%';vizElement.style.height='1677px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); yield target; }32:T1271,function BrushableBarChart() { const margin = { left: 120, top: 20, bottom: 20, right: 20 }; let x = d3.scaleLinear().nice(), y = d3.scaleBand().padding(0.2), xAttr = "x", yAttr = "y", id = null, width = 600, height = 500, onBrush = () => {}; //******** Brush****** const brush = d3.brushY(); const updateBrush = (sel, data) => { function brushed(event) { const selection = event.selection; if (!event.sourceEvent) return; if (selection) { const [y0, y1] = selection; const isSelected = d => y(d[yAttr]) + y.bandwidth() >= y0 && y(d[yAttr]) <= y1; const filteredData = sel .selectAll(".item") .style("fill", "#ccc") .filter(isSelected) .style("fill", "#69b3a2") .data(); console.log("barchart", y1, y0, filteredData); onBrush(filteredData); } else { sel.selectAll(".item").style("fill", "#69b3a2"); onBrush(null); } } brush .extent([ [0, 0], [ width - margin.left - margin.right, height - margin.top - margin.bottom ] ]) .on("start brush end", brushed); sel.select(".brush").call(brush); }; // A good rule of thumb is that your appends should go here const onEnter = enter => { const svgEnter = enter.append("svg"); const g = svgEnter.append("g").attr("class", "gDrawing"); g.append("g") .attr("class", "x-axis") .append("text") .attr("class", "axisLabel"); g.append("g") .attr("class", "y-axis") .append("text") .attr("class", "axisLabel"); g.append("g").attr("class", "marks"); g.append("g").attr("class", "brush"); return svgEnter; }; const onUpdate = update => update; const onExit = exit => exit.remove(); function chart(sel) { sel.each(data => { const iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const svg = sel .selectAll("svg") .data([data]) .join(onEnter, onUpdate, onExit) .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); const g = svg .select("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); x.domain([0, d3.max(data, d => d[xAttr])]).range([0, iwidth]); y.domain(data.map(d => d[yAttr])).range([0, iheight]); updateBrush(sel, data); // *** Transition *** const t = g.transition().duration(750); // Observable only, stop the animation if it isn't done and the cell is disposed invalidation.then(() => svg.interrupt(t)); g.select(".brush").call(brush); // ***** Axis ****** g.select(".x-axis") .attr("transform", `translate(0, ${iheight})`) .transition(t) .call(d3.axisBottom(x).ticks(3)); g.select(".x-axis") .select(".axisLabel") .style("fill", "black") .attr("transform", `translate(${iwidth}, -10)`) .style("text-anchor", "end") .text(xAttr); g.select(".y-axis") .transition(t) .call(d3.axisLeft(y).ticks(3)); g.select(".y-axis") .select(".axisLabel") .style("fill", "black") .style("text-anchor", "middle") .attr("transform", `translate(0, -10)`) .text(yAttr); // ****** Marks ****** const moveItems = item => item .attr("x", 0) .attr("width", d => x(d[xAttr])) .attr("y", d => y(d[yAttr])); g.select(".marks") .selectAll(".item") .data(data, (d, i) => (id !== null ? d[id] : i)) .join( enter => enter .append("rect") .attr("class", "item") .call(moveItems), update => update.call(update => update.transition(t).call(moveItems)) ) .attr("height", y.bandwidth()) .style("fill", "#69b3a2"); }); } chart.x = function(_) { if (!arguments.length) return xAttr; xAttr = _; return chart; }; chart.y = function(_) { if (!arguments.length) return yAttr; yAttr = _; return chart; }; chart.width = function(_) { if (!arguments.length) return width; width = _; return chart; }; chart.height = function(_) { if (!arguments.length) return height; height = _; return chart; }; chart.onBrush = function(_) { if (!arguments.length) return onBrush; onBrush = _; return chart; }; chart.id = function(_) { if (!arguments.length) return id; id = _; return chart; }; return chart; }33:[{"id":"5486979b8eecc62b04d84c7ec749ec0bd1f30e91d6790d9777df57043af05377ce693c33635e32d8267bbb6e44eb70d4d438ba01ea791c791eaed9e70c2f38c2","href":"https://static.observableusercontent.com/files/5486979b8eecc62b04d84c7ec749ec0bd1f30e91d6790d9777df57043af05377ce693c33635e32d8267bbb6e44eb70d4d438ba01ea791c791eaed9e70c2f38c2","name":"top200_current_artists.json","type":"application/json","lastModified":1634618530022.786,"size":150758},{"id":"c8fd8fe3b25e45c54f2269e69b359c06107f61facc8ef24c8f490afbab41c2ef0c75a7eba10a7597613f426c0bdb9ecb39732dd62a981711c03b0c041f215820","href":"https://static.observableusercontent.com/files/c8fd8fe3b25e45c54f2269e69b359c06107f61facc8ef24c8f490afbab41c2ef0c75a7eba10a7597613f426c0bdb9ecb39732dd62a981711c03b0c041f215820","name":"chart_df_full_genre.csv","type":"text/csv","lastModified":1635201754530.965,"size":112106},{"id":"3e621b0d0bc07f309b8f7997d62e4571647e1577366c15870fcb8c5f0fee7b50ae22e1845249292cbf40d7fc33c84295e426b3bfbfb51f77833f8ba3bec762f6","href":"https://static.observableusercontent.com/files/3e621b0d0bc07f309b8f7997d62e4571647e1577366c15870fcb8c5f0fee7b50ae22e1845249292cbf40d7fc33c84295e426b3bfbfb51f77833f8ba3bec762f6","name":"image (1).png","type":"image/png","lastModified":1635202372348.731,"size":150307},{"id":"1016aae5d8f1e7b9b8e08d226c6d56747d5d8de5c80e282eb3cc5215ca49626a8852a3672ad4409a36e19f4ae97fae92d012156ccdfec206bf434f0fff74936d","href":"https://static.observableusercontent.com/files/1016aae5d8f1e7b9b8e08d226c6d56747d5d8de5c80e282eb3cc5215ca49626a8852a3672ad4409a36e19f4ae97fae92d012156ccdfec206bf434f0fff74936d","name":"image-1.png","type":"image/png","lastModified":1635202376532.396,"size":58344}] 2d:{"title":"What makes a song popular on Spotify?","cells":[{"id":0,"value":"md`# What makes a song popular on Spotify?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`## 1. By Genre`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`**Genre Network** - The task this viz seeks to address is to discover relationships between popular songs' genres.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`The genre shared by the most songs in today's Global Top 200 list of popular music, is unsurpringly \"pop\". However, how sub-genres serve as a bridge to other disparate genres like hip-hop, rock, and indie is an interesting insight highlighted by the network below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof minGenres = Scrubber(numbers, {\n delay: 1200,\n loopDelay: 30000,\n autoplay: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`Now viewing genres with at least ${minGenres} number of links.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md ` A larger font size indicates that a genre is tagged to more songs in Spotify's top 200. Color hue is used to group similar genres.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md` **Genre Crossfilter** - The Crossfilter viz is well suited for tasks involving exploration and comparison.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`Here we can brush by genre, allowing users to explore the distribution in popularity scores of songs in each genre. Hip-hop has the widest range with one song even scoring a perfect 100, while Pop has more songs above 90.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"{\n const div = html`

`;\n\n const charts = new Map();\n for (let a of attribs) {\n const chart = BrushableBarChart()\n .x(\"value\")\n .y(\"key\")\n .width(width / attribs.length)\n .height(500)\n .onBrush(selection => {\n const keys = selection.map(d => d.key);\n cs.dims.get(a).filter(keys.length === 0 ? null : d => keys.includes(d));\n update();\n });\n charts.set(a, chart);\n }\n\n function update() {\n d3.select(div)\n .selectAll(\".charts\")\n .data(attribs)\n .join(\"div\")\n .attr(\"class\", \"charts\")\n .style(\"width\", width / attribs.length)\n .each(function(a) {\n const data =\n a === \"Artist\" || a === \"core_genre\" \n ? cs.groups.get(a).top(10)\n : cs.groups.get(a).all();\n d3.select(this)\n .datum(data)\n .call(charts.get(a));\n });\n }\n\n update();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`## 2. By Country`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"md`Choropleth Tasks:\n- Explore the importance of a particular attribute and how it differ across geographical and cultural regions.\n- Understand the attributes that persist across language barriers and are be similar across the globe.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`**Popular Song Churn by Country and Artist** - The task this visualization seeks to address is to better understand the volume or churn of songs that reach the Top 200 Popular Song charts. \n\n- Which countries have the highest volume of songs that make it to the Top 200 lists?\n- Which artists have the highest volume of songs on popular lists?\n\nThese questions are explored in the visualizations below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"FileAttachment(\"image-1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"FileAttachment(\"image (1).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`## 3. By Song Attributes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"md `**Song Attributes** - The task this viz seeks to address is to better understand relationships amongst popular songs and their attributes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"md `Heatmap Tasks:\n- Understand what attributes are correlated with popularity.\n- Explore if a combination of attributes that could contribute to the \"secret formula\" of a hit song.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md` **Distribution by Channel**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof Channel = Inputs.select(\n columns,\n { label: \"Channel\" , value : \"danceability\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"Plot.rectY(data, \n Plot.binX({y: \"count\"}, {x: Channel, thresholds: 20, fill: color1}))\n .plot({height: 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof yChannel = Inputs.select(\n columns, {label: \"yChannel\", value : \"popularity\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"Plot.rect(data, Plot.bin({fillOpacity: \"count\"}, {x: Channel, y: yChannel, fill: color1}))\n .plot({height : 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"Plot.plot({\n facet: {data, x:\"core_genre\"},\n marks: [Plot.dot(data, {x:Channel, y:yChannel, fill:color1, fillOpacity:1, r:2})], \n height : 200, x: {axis:null}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`# Takeaways and Next Steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`- Implementation: Scroll-based website\n- Challenges: Spotify API limits \n- Improvements/Changes: Cohesive Filtering, Consistent CSS styleset, labeling titles/axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md` ### Crossfilter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"attribs = [\"core_genre\", \"Artist\", \"popularity\"]\n// , myAttrib]","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"cs = {\n const cs = crossfilter(data);\n\n cs.dims = new Map();\n cs.groups = new Map();\n \n for (let a of attribs) {\n const dim = cs.dimension(d => d[a]);\n \n cs.dims.set(a, dim);\n cs.groups.set(a, dim.group());\n }\n \n return cs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"data = d3.csvParse(await FileAttachment(\"chart_df_full_genre.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"columns = [\"danceability\", \"energy\", \"speechiness\", \"acousticness\", \"instrumentalness\", \"valence\", \"popularity\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"crossfilter = require(\"crossfilter2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"color1 = \"#69b3a2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md` ### Network`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"drag = simulation => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"color = d3.scaleOrdinal(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"opacity = d3\n .scaleLinear()\n .domain(d3.extent(network.links, d => d.value))\n .range([0.2, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"size = d3\n .scaleLinear()\n .domain(d3.extent(network.nodes, d => d.value))\n .range([6, 24])","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"network = {\n const dLinks = new Map();\n\n for (let t of artists) {\n for (let i = 0; i < t.genres.length; i += 1) {\n for (let j = i + 1; j < t.genres.length; j += 1) {\n const key = getKey(\n t.genres[i],\n t.genres[j]\n );\n if (!dLinks.has(key)) dLinks.set(key, 0);\n\n dLinks.set(key, dLinks.get(key) + 1);\n }\n }\n }\n\n const dNodes = new Map();\n let links = [];\n for (let [l, v] of dLinks) {\n const [source, target] = l.split(\"~\");\n\n const s = findOrAdd(dNodes, source);\n const t = findOrAdd(dNodes, target);\n\n dNodes.set(source, ((s.value += 1), s));\n dNodes.set(target, ((t.value += 1), t));\n links.push({ source: s, target: t, value: v });\n }\n\n const network = { nodes: Array.from(dNodes.values()), links };\n netClustering.cluster(network.nodes, network.links);\n // return dNodes;\n return network;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"style = html`