2d:null 2e:["$","title",null,{"children":"CSC-485 Final Project Report | Faiza Niazi | Observable"}] 33:T448,

Goal of this Project?

Users can first see the overall trend of the music genre over time. (1950~2020)
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
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 the evolution of music genre trends in the last century
Users can evaluate the evolution of various music genres by looking at the number of streams for a particular genre over the past century
Users can see trends for each genre and subgenre with year slider feature
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.
The main goal of the project is to help users connect music trends with specific cultural events through this visualization.

34: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}); } 35: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}}); }36:[{"id":"f2d55ba3d3cffee324809f408bd4c450013f06aee1fe63024cd6892e281667f23f65352b2b4ce9f7f32389a832ec74b8265b99374aee25007f52124bfaf6010c","href":"https://static.observableusercontent.com/files/f2d55ba3d3cffee324809f408bd4c450013f06aee1fe63024cd6892e281667f23f65352b2b4ce9f7f32389a832ec74b8265b99374aee25007f52124bfaf6010c","name":"mean_value_music_data.csv","type":"text/csv","lastModified":1651440397309.421,"size":43406},{"id":"b1e4eba350ff5a007b5e7c8fed1a53ba35dbf0da93f12397e5940583979bdd7eb5dc2afd9b81ea57f54335349ff63d9290935c9e7a544db1398f71a838ee1a82","href":"https://static.observableusercontent.com/files/b1e4eba350ff5a007b5e7c8fed1a53ba35dbf0da93f12397e5940583979bdd7eb5dc2afd9b81ea57f54335349ff63d9290935c9e7a544db1398f71a838ee1a82","name":"subgenre_music.csv","type":"text/csv","lastModified":1651492791288.452,"size":38983},{"id":"e7ec458cbf05ec887f78243b8a5662f272b2d8829f9107cb8d5b94fb3d1edc80f7963fe639c1dcbc7c9f6af2b640bcef0296c98d73e968125a9dbdaa86eafc66","href":"https://static.observableusercontent.com/files/e7ec458cbf05ec887f78243b8a5662f272b2d8829f9107cb8d5b94fb3d1edc80f7963fe639c1dcbc7c9f6af2b640bcef0296c98d73e968125a9dbdaa86eafc66","name":"Spotify_Music.csv","type":"text/csv","lastModified":1651440393765.532,"size":5520001},{"id":"116cb11a7d8ca1168a3366d1907ece8d22d4379e8d7887a89ef13a163a30d51b31a186003642b87881bb6d3aa2c72eaf1c36f537d183d670160d2121bf24c14f","href":"https://static.observableusercontent.com/files/116cb11a7d8ca1168a3366d1907ece8d22d4379e8d7887a89ef13a163a30d51b31a186003642b87881bb6d3aa2c72eaf1c36f537d183d670160d2121bf24c14f","name":"histogram_data.csv","type":"text/csv","lastModified":1651544131260.949,"size":2272204}] 31:{"id":"a8569218667f39ff","slug":"csc-485-final-project-report","title":"CSC-485 Final Project Report","thumbnail":"06741410b52a0bfcee7a0f07fcbc9822c958a952bf2441469836f32870434818","access_level":"public","create_time":"$D2022-05-01T21:19:54.747Z","update_time":"$D2022-05-20T21:08:12.845Z","view_time":null,"first_public_time":"$D2022-05-01T21:38:42.938Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"862a99d00b35417d","login":"5e20d16b31d22488","name":"Faiza Niazi","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":"starter_2024"},"version":1481,"publish_version":1481,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e20d16b31d22488","login":"5e20d16b31d22488","name":"Faiza Niazi","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":null}],"members":[{"type":"individual","id":"5e20d16b31d22488","login":"5e20d16b31d22488","name":"Faiza Niazi","avatar_url":"https://avatars-next.observableusercontent.com/8d27f22f9b3d80861b73d9bde9bbb0ebef99c1b4d0ab16822abb8f32d125a1e3","tier":null,"role":"editor"},{"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"},{"type":"individual","id":"c358e471741b6bbc","login":"nathanpayson","name":"Nathaniel Payson","avatar_url":"https://avatars-next.observableusercontent.com/2ab36c37a321f1b8dd9511fb63d7be1c2095337e0ad1f9e15939b5f7d75dce4b","tier":null,"role":"editor"},{"type":"individual","id":"577a72e3ee3f436f","login":"slukichev23","name":"Sem","avatar_url":"https://avatars-next.observableusercontent.com/4fe89cd9738db3e344f0f34a63c0c0a5702db33f29c60db7eb803594a977839d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"CSC-485 Final Project Report","cells":[{"id":0,"value":"# CSC-485 Final Project Report","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1285,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1017,"value":"

Part 1: Exploratory Data Analysis

Stacked Histogram Over Different Genres

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":1050,"value":"

Part 2: Multiple Line Charts with Interactivity

\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1399,"value":"

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.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"viewof Channel = Inputs.select(mean_data.columns.slice(3), {label: \"\", value: \"m_popularity\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"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","output":"$undefined","database":"$undefined"},{"id":303,"value":"// Jaehee\nline_chart = LineChart(mean_data, {\n x: d => d.year,\n y: d => getCurrentChannel(d),\n z: d => d.genre,\n yLabel: Channel,\n width : 900,\n height: 500,\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 `Genre is ${d.genre} and mean value is ${getCurrentChannel(d)} \\n in year ${d.year}`, //tooltip added by Sem\n xType: d3.scaleSequential\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"

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.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1059,"value":"

Part 3: Bubble Charts

With year filtering

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"key2 = Swatches(chart.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":1459,"value":"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. ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"

Part 4: Presets

Historical Music Events

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"// Nathan\nLineChart(rbFilter, {\n x: d => d.year,\n y: d => d.m_popularity,\n yLabel: \"R&B 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: [1957, 2020],\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","output":"$undefined","database":"$undefined"},{"id":809,"value":"

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.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"// Nathan\nLineChart(rockFilter, {\n x: d => d.year,\n y: d => d.m_popularity,\n yLabel: \"Rock's 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: [1957, 2020],\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","output":"$undefined","database":"$undefined"},{"id":817,"value":"

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","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","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","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","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","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","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.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":913,"value":"// Nathan\nLineChart(valenceFilter, {\n x: d => d.year,\n y: d => d.m_valence,\n z: d => d.genre,\n yLabel: \"valence\",\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: [1990, 2020],\n mixBlendMode : \"multiply\", \n title: (d) =>\n `Mean valence 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","output":"$undefined","database":"$undefined"},{"id":929,"value":"

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.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":933,"value":"

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.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1465,"value":"

Link to the Youtube Video

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1092,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1098,"value":"

1. Data Cleaning

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

https://github.com/jaehee99/CSC_485_Music_Project/tree/main/data

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

2. Import Data

3. Imports & Utilities

4. References

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
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