41:null 42:["$","title",null,{"children":"Interactive Info Visualization of Spotify Music Genre Overtime | Jaehee Lee | Observable"}] 48:T11f3,// Copyright 2021 Observable, Inc. // https://observablehq.com/@d3/multi-line-chart // Customized by Jaehee function LineChart(data, { x = ([x]) => x, y = ([, y]) => y, z = () => 1, title, defined, curve = d3.curveLinear, marginTop = 20, marginRight = 30, marginBottom = 30, marginLeft = 40, width = 640, height = 400, xType = d3.scaleUtc, xDomain, xRange = [marginLeft, width - marginRight], yType = d3.scaleLinear, yDomain, yRange = [height - marginBottom, marginTop], yFormat, yLabel, zDomain, colors = d3.schemeTableau10, // changed because genre is categorical strokeLinecap, strokeLinejoin, strokeWidth = 1.5, strokeOpacity, mixBlendMode = "multiply", } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, d => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [d3.min(Y), d3.max(Y)]; // changed the min and max if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 80, yFormat); const color = d3.scaleOrdinal(zDomain, colors); // added for different colors for each categorical genre const T = title === undefined ? Z : title === null ? null : d3.map(data, title); const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const path = svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 3.0); // change size dot.append("text") .attr("font-weight", "bold") // added bold .attr("font-family", "Karla") // changed the font family to Fantasy .attr("font-size", 18) // changed the font size .attr("text-anchor", "middle") .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point path.style("stroke", ([z]) => Z[i] === z ? null : "#ddd").filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); svg.property("value", O[i]).dispatch("input", {bubbles: true}); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } return Object.assign(svg.node(), {value: null}); } 49:Tb0b,// Copyright 2021 Observable, Inc. // Customized by Faiza and Jaehee function BubbleChart(data, { name = ([x]) => x, label = name, value = ([, y]) => y, group, title, link, linkTarget = "_blank", width = 640, height = width, padding = 3, margin = 1, marginTop = margin, marginRight = margin, marginBottom = margin, marginLeft = margin, groups, colors = d3.schemeTableau10, fill = "#ccc", fillOpacity = 0.7, stroke, strokeWidth, strokeOpacity, } = {}) { const D = d3.map(data, d => d); const V = d3.map(data, value); const G = group == null ? null : d3.map(data, group); const I = d3.range(V.length).filter(i => V[i] > 0); if (G && groups === undefined) groups = I.map(i => G[i]); groups = G && new d3.InternSet(groups); const color = G && d3.scaleOrdinal(groups, colors); const L = label == null ? null : d3.map(data, label); const T = title === undefined ? L : title == null ? null : d3.map(data, title); const root = d3.pack() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .padding(padding) (d3.hierarchy({children: I}) .sum(i => V[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("fill", "currentColor") .attr("font-size", 12) .attr("font-family", "Cairo") .attr("text-anchor", "middle"); const leaf = svg.selectAll("a") .data(root.leaves()) .join("a") .attr("xlink:href", link == null ? null : (d, i) => link(D[d.data], i, data)) .attr("target", link == null ? null : linkTarget) .attr("transform", d => `translate(${d.x},${d.y})`); leaf.append("circle") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("fill", G ? d => color(G[d.data]) : fill == null ? "none" : fill) .attr("fill-opacity", fillOpacity) .attr("r", d => d.r); if (T) leaf.append("title") .text(d => T[d.data]); if (L) { const uid = `O-${Math.random().toString(16).slice(2)}`; leaf.append("clipPath") .attr("id", d => `${uid}-clip-${d.data}`) .append("circle") .attr("r", d => d.r); leaf.append("text") .attr("clip-path", d => `url(${new URL(`#${uid}-clip-${d.data}`, location)})`) .selectAll("tspan") .data(d => `${L[d.data]}`.split(/\n/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, D) => `${i - D.length / 2 + 0.85}em`) .attr("fill-opacity", (d, i, D) => i === D.length - 1 ? 0.7 : null) .text(d => d); } return Object.assign(svg.node(), {scales: {color}}); }4a:T67b,

1. Data Cleaning

Data Cleaning procedure in Github (Used R to clean the data)

Firest dataset: Spotify_Music.csv

Removed unnecessary variables and renamed variables to appropriate name
Extract only 'year' from the release_date variable(originally "2019-06-14" or "2011" format) and then assign it to a new variable called "year"
Since release_date variable(originally "2019-06-14" or "2011" format) is non-consistent format, use if_else statement to make it consistent
The datatype of the year variable is chr so change the datatype to int

https://github.com/jaehee99/CSC_485_Music_Project/blob/main/data/Spotify_Music_Cleaning.R

Second dataset: histogram_data.csv

Select subset of variables to display histogram

https://github.com/jaehee99/CSC_485_Music_Project/blob/main/data/histogram_data.R

Third dataset: mean_value_music_data.csv

Group by genre and year, in order to find the mean values of the audio features. Use inner join to combine all of the datasets into one dataset. This is used for multiple line charts

https://github.com/jaehee99/CSC_485_Music_Project/blob/main/data/mean_value_music_data.R

Fourth dataset: subgenre_music.csv

Group by genre, subgenre, year in order to find the mean popularity value. This is for bubble chart

https://github.com/jaehee99/CSC_485_Music_Project/blob/main/data/subgenre_music.R

4b:[{"id":"116cb11a7d8ca1168a3366d1907ece8d22d4379e8d7887a89ef13a163a30d51b31a186003642b87881bb6d3aa2c72eaf1c36f537d183d670160d2121bf24c14f","href":"https://static.observableusercontent.com/files/116cb11a7d8ca1168a3366d1907ece8d22d4379e8d7887a89ef13a163a30d51b31a186003642b87881bb6d3aa2c72eaf1c36f537d183d670160d2121bf24c14f","name":"histogram_data.csv","type":"text/csv","lastModified":1651596422481.583,"size":2272204},{"id":"f2d55ba3d3cffee324809f408bd4c450013f06aee1fe63024cd6892e281667f23f65352b2b4ce9f7f32389a832ec74b8265b99374aee25007f52124bfaf6010c","href":"https://static.observableusercontent.com/files/f2d55ba3d3cffee324809f408bd4c450013f06aee1fe63024cd6892e281667f23f65352b2b4ce9f7f32389a832ec74b8265b99374aee25007f52124bfaf6010c","name":"mean_value_music_data.csv","type":"text/csv","lastModified":1651596422481.583,"size":43406},{"id":"e7ec458cbf05ec887f78243b8a5662f272b2d8829f9107cb8d5b94fb3d1edc80f7963fe639c1dcbc7c9f6af2b640bcef0296c98d73e968125a9dbdaa86eafc66","href":"https://static.observableusercontent.com/files/e7ec458cbf05ec887f78243b8a5662f272b2d8829f9107cb8d5b94fb3d1edc80f7963fe639c1dcbc7c9f6af2b640bcef0296c98d73e968125a9dbdaa86eafc66","name":"Spotify_Music.csv","type":"text/csv","lastModified":1651596422481.583,"size":5520001},{"id":"b1e4eba350ff5a007b5e7c8fed1a53ba35dbf0da93f12397e5940583979bdd7eb5dc2afd9b81ea57f54335349ff63d9290935c9e7a544db1398f71a838ee1a82","href":"https://static.observableusercontent.com/files/b1e4eba350ff5a007b5e7c8fed1a53ba35dbf0da93f12397e5940583979bdd7eb5dc2afd9b81ea57f54335349ff63d9290935c9e7a544db1398f71a838ee1a82","name":"subgenre_music.csv","type":"text/csv","lastModified":1651596422481.583,"size":38983}] 46:{"id":"5f3b7216adfbfe2b","slug":"csc-485-final-project-report","title":"Interactive Info Visualization of Spotify Music Genre Overtime","thumbnail":"06741410b52a0bfcee7a0f07fcbc9822c958a952bf2441469836f32870434818","access_level":"public","create_time":"$D2022-05-03T16:47:02.481Z","update_time":"$D2022-05-03T17:28:39.418Z","view_time":null,"first_public_time":"$D2022-05-03T16:48:30.500Z","has_unpublished_edits":null,"fork":{"id":"a8569218667f39ff","slug":"csc-485-final-project-report","title":"CSC-485 Final Project Report","owner":{"id":"862a99d00b35417d","login":"5e20d16b31d22488","name":"Faiza Niazi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"94413ed8e65ff7eb","login":"ca25d09366015836","name":"Jaehee Lee","avatar_url":"https://avatars-next.observableusercontent.com/5237b1a374bfa97500d3c567dc2a832142253d7b2505e1de13ddb5f95804e559","tier":"starter_2024","bio":"","following":false},"version":1565,"publish_version":1565,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca25d09366015836","login":"ca25d09366015836","name":"Jaehee Lee","avatar_url":"https://avatars-next.observableusercontent.com/5237b1a374bfa97500d3c567dc2a832142253d7b2505e1de13ddb5f95804e559","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1ddc2c8af101726d","login":"alex-godwin","name":"Alex Godwin","avatar_url":"https://avatars-next.observableusercontent.com/15bd380cc2ad622ebc3f16d9135967112ac43ac26ec41eac54b3dc0991345992","tier":null,"role":"editor"},{"type":"individual","id":"ca25d09366015836","login":"ca25d09366015836","name":"Jaehee Lee","avatar_url":"https://avatars-next.observableusercontent.com/5237b1a374bfa97500d3c567dc2a832142253d7b2505e1de13ddb5f95804e559","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive Info Visualization of Spotify Music Genre Overtime","cells":[{"id":0,"value":"# Interactive Info Visualization of Spotify Music Genre Overtime","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1285,"value":"

Goal of this Project?

The main goal of the project is to help users connect music trends with specific cultural events through this visualization.

Users can first see the overall trend of the music genre over time. (1950~2020)
Users can not only explore genres over time but also explore subgenres with an interactive bubble chart (the dataset we have consists of 6 genres and 24 subgenres)
Users can see trends for each genre and subgenre with year slider feature
There are presets in part4 that allow users to focus on a specific period of time or specific variables according to the historical music events
This project will make users grasp the flow of the music genre over time. This project can help users learn how music trends have changed with specific cultural events.

Part 1: Exploratory Data Analysis

Stacked Histogram Over Different Genres

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1026,"value":"viewof Channel_1 = Inputs.select(histogram_data.columns.slice(2), {label: \"\", value: \"popularity\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"// Sem and Jaehee\nPlot.plot({\n marks: [\n Plot.rectY(\n histogram_data,\n Plot.binX({ y: \"count\" }, { x: Channel_1, thresholds: 25})\n )\n ],\n height: 250,\n width: 650\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"// Sem and Jaehee\nPlot.plot({\n marks: [\n Plot.rectY(\n histogram_data,\n Plot.stackY(\n Plot.binX({ y: \"count\" }, { x: Channel_1, fill: \"genre\", thresholds: 10 })\n )\n )\n ],\n color: {\n legend: true\n },\n // facet: { data, x: \"genre\" },\n marginTop: 40,\n height: 300,\n width: 650,\n grid: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"

These histograms show the distribution of each genre audio feature in Spotify Music Dataset

Part 2: Multiple Line Charts with Interactivity

Interactivity Features

Dropdown for different audio features for different genres
StrokeOpacity effect to make specific genre stand out from other genres
Tooltip effect to indicate the values and years.

Display the overall trends of characteristics of music(popularity, danceability, energy,loudness, acousticness, tempo, duration_ms, valence, liveness) over time. Encoded color by genre(edm, latin, pop, r&b, rap, rock). The parameter that we used is 'average'. Grouping by year and genre, and then finding the average value of it will provide the representative of the value.

Part 3: Bubble Charts

With Year slider (1957 to 2020)

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"key2 = Swatches(chart.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"// Timescale visual\nviewof year = Scrubber(d3.ticks(1957, 2020, 63), {\n format: x => `Year = ${d3.format(\".0f\")(x)}`,\n autoplay: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"// Faiza and Jaehee \nchart = BubbleChart(files, {\n name: d => d.genre,\n label: d => [...d.subgenre.split(\".\").pop().split(/(?=[A-Z][a-z])/g), d.subgenre_mean.toLocaleString(\"en\")].join(\"\\n\"),\n value: d => d.subgenre_mean,\n group: d => d.genre,\n title: d => `${d.subgenre}\\n${d.subgenre_mean.toLocaleString(\"en\")}`,\n width: 1000, \n height: 500,\n fillOpacity: 0.7,\n margin: 5, \n marginTop: 1, \n marginRight: 1, \n marginBottom: 1, \n marginLeft: 1,\n padding: 2, \n colors: d3.schemeTableau10, \n stroke: 10 \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"

How to use this bubble chart?

User can move the slider to find the specific year that they want to look closely.
Same color encoding indicates the same group genre
Within the same color genre, there are several different bubbles indicating different subgenres
The size of the bubble is proportionate to the popularity

Disclaimer:\n The bubble color(i.e. the sub-genre) and key-labels(i.e. genre), may change depending on the specific year you're looking at.

Part 4: Presets

Historical Music Events

R&B saw a massive decline in the mid-2000s until recently. During that time frame, many artists who got famous from the genre would leave for EDM and Pop resulting in the decline. Artists like Drake, The Weeknd, and J. Cole led to a resurgence in the genre, and more recently, newer artists like H.E.R and Ari Lennox are leading the genre to a popularity not seen in a long time.

The 60s and 70s are often described as the heyday of rock's popularity, but according to the data, rock's decline has been gradual. Some studies seem to imply that the lack of diversity in the genre is a major factor in this downturn as the genre has continued to be primarily white and male. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":842,"value":"swatches({\n color: d3.scaleOrdinal([\"edm\", \"latin\", \"pop\", \"r&b\",\"rap\", \"rock\"], d3.schemeTableau10)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"// Nathan\nLineChart(recessionFilter, {\n x: d => d.year,\n y: d => d.m_popularity,\n z: d=> d.genre,\n yLabel: \"Mean Popularity\",\n width : 750,\n height: 350,\n colors: d3.schemeTableau10, \n strokeWidth: 1.8, \n marginTop: 30, \n marginRight: 80,\n marginBottom: 30, \n marginLeft: 80, \n curve: d3.curveLinear, \n xDomain: [2006, 2013],\n yDomain: [0, 55],\n mixBlendMode : \"multiply\", \n title: (d) =>\n `Mean: ${parseInt(d.m_popularity*100)/100.0} \\n in year ${d.year}`, \n xType: d3.scaleSequential\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"

With the exception of Latin Music, the 2008 recession resulted in a major decline in most genres' popularity according to this data, as Pop saw an 18 point drop over 2 years, r&b saw a 5 point drop, and rock and rap each saw a 9 point drop, in the same 2 years. r&b and rock were at thier least popular over the 50 years of content.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":867,"value":"// Nathan\nLineChart(mean_data, {\n x: d => d.year,\n y: d => d.m_tempo,\n z: d => d.genre,\n yLabel: \"Mean Tempo\",\n width : 750,\n height: 350,\n colors: d3.schemeTableau10, \n strokeWidth: 1.8, \n marginTop: 30, \n marginRight: 80,\n marginBottom: 30, \n marginLeft: 80, \n curve: d3.curveLinear, \n xDomain: [1957, 2020],\n mixBlendMode : \"multiply\", \n title: (d) =>\n `Mean Tempo Value is ${parseInt(d.m_tempo*100)/100.0} \\n year: ${d.year}`, \n xType: d3.scaleSequential\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"// Nathan\nLineChart(mean_data, {\n x: d => d.year,\n y: d => d.m_liveness,\n z: d => d.genre,\n yLabel: \"Mean Liveness\",\n width : 750,\n height: 350,\n colors: d3.schemeTableau10, \n strokeWidth: 1.8, \n marginTop: 30, \n marginRight: 80,\n marginBottom: 30, \n marginLeft: 80, \n curve: d3.curveLinear, \n xDomain: [1957, 2020],\n mixBlendMode : \"multiply\", \n title: (d) =>`Mean Liveness Value is ${parseInt(d.m_liveness*100)/100.0} \\n year: ${d.year}`,\n xType: d3.scaleSequential\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"

One major trend in music has been the narrowing of certian genre's to more similar stats especially tempo and liveness. The gap between the fastest and slowest genre's have diminished overtime. In 1990, the difference in average bpm between the fastest and slowest genres was 20 beats per minute. The most recent year to have a gap that large or larger was 2008 (interesting the same year as the recession began), since then the gap has been much smaller with the difference in the fastest and slowest genres being on 12 bpm in 2020. For context, a difference of 4 bpm is the smallest noticable difference in speed, so the difference is only essentially 3 noticable increments faster versus 5, 30 years ago. Liveness has similarly narrowed as over the last 15 years, the line graph has stayed relatively similar.

Valence, how happy music is, has also plummetted recently. Valence was relatively consistent from 1990 to 2008, but after the recession, the happiness of music began to noticably drop. It seems the recession may have caused our music to be less happy.

With the popularity of music dropping and the happiness of our music dropping as a result of the recession, we are reaching a time where music is becoming more standard in terms of liveness and tempo. Though music's popularity has resurged, the changes that began potentially as a result of the recession are still being felt.

Part5: Link to the Youtube Video

https://www.youtube.com/watch?v=93y_evpbqTM

Part6: Appendix

2. Import Data

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1344,"value":"histogram_data = d3.csvParse(\n await FileAttachment(\"histogram_data.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"data = d3.csvParse(\n await FileAttachment(\"Spotify_Music.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"subgenre_music = FileAttachment(\"subgenre_music.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"files = subgenre_music.filter(d=>d.year==year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"mean_data = d3.csvParse(\n await FileAttachment(\"mean_value_music_data.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"

3. Imports & Utilities

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1252,"value":"valenceFilter = mean_data.filter(d=> d.year>1990)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"recessionFilter = mean_data.filter(d=> d.year>2006 &&d.year < 2013)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"rockFilter = mean_data.filter(d=>d.genre == \"rock\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"rbFilter = mean_data.filter(d=>d.genre == \"r&b\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"// Sem\nfunction getCurrentChannel(d) {\n\n switch(Channel) {\n case \"m_popularity\":\n return roundToHundreths(d.m_popularity)\n break;\n case \"m_tempo\":\n return roundToHundreths(d.m_tempo)\n break;\n case \"m_danceability\":\n return roundToHundreths(d.m_danceability)\n break;\n case \"m_energy\":\n return roundToHundreths(d.m_energy)\n break;\n case \"m_loudness\":\n return roundToHundreths(d.m_loudness)\n break;\n case \"m_acousticness\":\n return roundToHundreths(d.m_acousticness)\n break;\n case \"m_duration_ms\":\n return roundToHundreths(d.m_duration_ms)\n break;\n case \"m_valence\":\n return roundToHundreths(d.m_valence)\n break;\n case \"m_liveness\":\n return roundToHundreths(d.m_liveness)\n break;\n default:\n \"something went wrong\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"// Sem\nfunction roundToHundreths(num){\n return Math.round((num + Number.EPSILON) * 100) / 100\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"d3Render = require('d3-render@v0.2.4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"format = value => {\n const newValue = d3.format(\"0.2s\")(value);\n\n if (newValue.indexOf('m') > -1) {\n return parseInt(newValue.replace('m', '')) / 1000;\n }\n\n return newValue;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"

4. References

Stacked Histogram Chart Reference: https://observablehq.com/@d3/stacked-bar-chart
Multiple Line Chart Reference 1: https://observablehq.com/@d3/multi-line-chart
Multiple Line Chart Reference 2: https://observablehq.com/@d3/index-chart?collection=@observablehq/visualization
Bubble Chart Reference 1: https://observablehq.com/@d3/bubble-chart
Bubble Chart Reference 2: https://observablehq.com/@934b57b2cc4ac577/top-500-baby-names-bubble-chart-1880-2020
Legends: https://observablehq.com/@didoesdigital/7-may-2020-d3-scatterplot
Music History Reference: https://www.theguardian.com/music/2015/jun/29/how-r-b-got-its-groove-back

5. CSC-485-001 Group members:

Faiza Niazi, fn8788a@student.american.edu
Sem Lukichev, sl8139a@student.american.edu
Jaehee Lee, jl8883a@student.american.edu
Nathan Payson, np104a@student.american.edu

6. Related Work Links to this project

Link to our project proposal:

https://github.com/jaehee99/CSC_485_Music_Project/blob/main/README.md

Link to our project prototype:

https://observablehq.com/d/5dcae2a9c558df29