3f:null 40:["$","title",null,{"children":"Final Project IAT355 On the analysis of Music within 2019 and 2020 | JONATHAN LEE | Observable"}] 46:T4e8,md`This project is broken down into 3 parts to help users understand the information presented. The first part shows the relationship between the data seihts independently. Specifically showing how the 2 datasets independently compare to each other. In visualization #1 I wanted to look at how the trends of the top 5 songs per month compared in metrics to the danceability and emotiveness of the music. In part 2 I wanted to present the data differently allowing overlap between the 2 data sets, by comparing and contrasting the data sets I was hoping to find a visual pattern in the bubble graph, specifically with what music was more popular overtime, and having that show through a layered scatterplot. In part 3 I wanted to present the data as a brushable dataset, looking specifically at how songs listened too over 2020 ( top 5) looked at the emotions and danceability of songs overall compared to binned histograms. In order to create the visualizations we will be using 2 sets of Spotify streaming data from SPOTIFY charts, and 1 set of data from health Canada. The audience of my project is primarily music listeners, we want to provide easy perceived visuals that users can parse without having any know of the data sets and how they relate.`47:T679,md`Danceability correlation with Energy during the 2020 year (top 5 tracks only). This is important for determining the spread of music released during the pandemic, it is also interesting to choose a scatter plot so we can measure abject energy over spotify's "danciness metric". ### Identifying Traits I am using the a subset from the 2020 dataset comparing energy levels and danceability of songs. I chose this metric because it was easy to comprehend. It answers my question of whether people during the pandemic were more inclined to listen to happier music over all. Also it gives a good metric of what was released during the year to make inferences based on that. ### Visual Idiom I am using the danceability faceted with Valence key and Speechiness variables to show the average landscape of songs over both years. The visualization here illustrates the overall dominant key, emotiveness of the music and "musicality" of each year. In terms of contrasting with other views I found this one to be the most helpful as you can see that while there is a big spread of songs over a lange valence range in 2019, many many songs felt more "speechy" that in 2020. ### Analysis As noted above a good deal of songs were more musical in 2020 than 2019 and also seemingly more sad. If you are familiar with the 12 tone scale in music you can also see that many songs in 2020 are clustered around more minor keys giving them a "sadder" quality to them. In the final visualization you can see that there is a big (0.05!!) shift in songs that are more music in 2020, I guess we needed more music in our lives as we entered the first year of the pandemic. ` 48:T475,viewof charts2019= { const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); const chart2020 = vl.markCircle() .data(top5danceabilitydate) .params(panzoom,brush) .encode( vl.x().fieldQ(vl.repeat('column')), vl.y().fieldQ("Danceability").axis({minExtend:30}), vl.color().fieldQ("Valence").scale({range:["lightblue","orange"]}), vl.tooltip().fieldN("Track Name",) ) return vl.markCircle() .data(top5danceabilitydate2019) .params(panzoom,brush) .encode( vl.x().fieldQ(vl.repeat('column')), vl.y().fieldQ("Danceability").axis({minExtent:25}), vl.color().fieldQ("Valence").scale({ range:["blue","purple","red"]}), vl.tooltip().fieldN("Track Name") ) .width(200) .height(200) .repeat({column:['Valence','Key','Speechiness']}) .render() }49:T829,viewof charts20191concat= { const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); // const brushable = vl.selectInterval().encodings('x').resolve('intersect'); const ValenceDance = vl .data(top5danceabilitydate) .encode( vl.x().fieldQ("Valence"), vl.y().fieldQ("Danceability"), vl.color().fieldN("Year").scale({ range:["blue","orange"]}), vl.shape().fieldN("Year"), vl.tooltip().fieldN("Track Name") ) .layer( vl.markPoint().data(top5danceabilitydate2019) .params(panzoom,brush) .encode( vl.x().fieldQ("Valence"), vl.y().fieldQ("Danceability"), vl.tooltip().fieldN("Track Name")), vl.markPoint().data(top5danceabilitydate) .encode( vl.x().fieldQ("Valence"), vl.y().fieldQ("Danceability"), vl.tooltip().fieldN("Track Name") // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) ) const scatter = vl .data(top5danceabilitydate) .encode( vl.x().fieldQ("Speechiness"), vl.y().fieldQ("Danceability"), vl.color().fieldN("Year").scale({ range:["blue","orange"]}), vl.shape().fieldN("Year"), vl.tooltip().fieldN("Track Name"), vl.tooltip().fieldN("Year") ) .layer( vl.markPoint().data(top5danceabilitydate2019) .params(panzoom,brush) .encode( vl.x().fieldQ("Speechiness"), vl.y().fieldQ("Danceability"), vl.tooltip().fieldN("Track Name") ), vl.markPoint().data(top5danceabilitydate) .encode( vl.x().fieldQ("Speechiness"), vl.y().fieldQ("Danceability"), vl.tooltip().fieldN("Track Name") // vl.color().if(brush,vl.fieldN('cluster')).value('grey'), // vl.opacity().if(brush,vl.value(0.8)).value(0.1) ) ) return vl.hconcat(ValenceDance,scatter).render() }4a:T5c8, This plot measures energy over period of the month the song was doing well in, hopefully I can create a brush-able interface with this versus the timeline in visualization one. The more dance-y the track the higher it appears in the graph. ### Identifying Traits I am using the a subset from the 2020 dataset comparing energy levels and danceability of songs versus the month it was popular. I chose this metric because it was easy to comprehend. It answers my question of whether people during the pandemic were more inclined to listen to happier music over all. ### Visual Idiom I am using the danceability and month visualization to show how many times a song was streamed in relation to its danceability by year. This visualization also shows you the valence (emotion) of the songs corresponding to color. This is all contrasted by the valence danceability chart which visually shows the song and emotion category its in in comparison to year. ### Analysis A big trend I noticed in compiling this alternative view of the data set was a super noticeable upward trend in the danceability of songs in 2020, especially during the summer months. What else is interesting is that a majority of the songs that were danceable in summer were also sad. To put in context, summer of 2020 was reasonable in terms of covid as most restrictions were slowly being lifted. I posit that the data in the set kind of captures the mood of the songs during that subset of months perfectly. 4b:Taf6,viewof charts2020= { const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); const brushable = vl.selectInterval().encodings('x').resolve('interesect'); // const bubble_layer2 = vl.layer( // ) const dancy2020 = vl.markCircle() .data(top5danceabilitydate) .params(panzoom) .encode( vl.x().fieldO("Month") .sort("January","Febuary","March","April","May","June","July","August","September","October","November","December"), vl.y().fieldQ("Danceability").title("Danceability(2020)"), vl.color().fieldQ("Valence").scale({ range:["blue","purple","red"]}), vl.size().sum("Streams"), vl.tooltip().fieldN("Track Name"), // vl.filter("oneOf"['Month','ch']) // vl.tooltip().fieldN("Energy") ) const bubble_layer = vl.layer( dancy2020.select(brushable).encode(vl.color().value('lightgrey')), dancy2020.transform(vl.filter(brushable))); const dancy2019 = vl.markCircle() .data(top5danceabilitydate2019) .params(panzoom) .encode( vl.x().fieldO("Month") .sort("January","Febuary","March","April","May","June","July","August","September","October","November","December"), vl.y().fieldQ("Danceability").title("Danceability(2019)"), vl.size().sum("Streams"), vl.color().fieldQ("Valence").scale({ range:["blue","purple","red"]}), vl.tooltip().fieldN("Track Name") //this doesnt work idk why // vl.filter("oneOf"['ch']) ) const bubble_layer2 = vl.layer( dancy2019.select(brushable).encode(vl.color().value('lightgrey')), dancy2019.transform(vl.filter(brushable))); const scatter = vl .data(top5danceabilitydate) .encode( vl.x().fieldQ("Valence"), vl.y().fieldQ("Danceability"), vl.color().fieldQ("Valence").scale({ range:["blue","purple","red"]}), vl.shape().fieldN("Year"), vl.tooltip().fieldN("Track Name") ) .layer( vl.markPoint().data(top5danceabilitydate2019) .params(panzoom,brush) .encode( vl.x().fieldQ("Valence"), vl.y().fieldQ("Danceability"), vl.tooltip().fieldN("Track Name"), vl.color().if(brushable,vl.fieldN('Year')).value('grey'), vl.opacity().if(brush,vl.value(0.8)).value(0.0)), vl.markPoint().data(top5danceabilitydate) .encode( vl.x().fieldQ("Valence"), vl.y().fieldQ("Danceability"), vl.tooltip().fieldN("Track Name"), vl.color().if(brushable,vl.fieldN('Year')).value('grey'), vl.opacity().if(brush,vl.value(0.8)).value(0.0) ) ) return vl.hconcat(bubble_layer2,bubble_layer,scatter).render() }4c:T4ab, ### Visual Idiom This brush-able visualization is because I wanted to illustrate how on average the songs were able to be categorized by binning, and illustrated by a scatter plot. With this visualization we can clearly see that even though songs had good rhythm and beat, most songs during 2020 were not very happy. While having histograms and scatterplots side by side also take into account the number of songs per bin and the average emotive value of each bin. This allows users to have greater accessibility in terms of how a user can choose to view the visualizations, it also allows for easier modular comparisons between each quantitative measure ### Analysis By toggling different keywords on the X axis and Y axis, you can visually see the emotive, and danceability impact on songs released during the pandemic. As noted above, a great deal of songs were extremely danceable but not very happy ( low valence scores). When compared to one another valence scores of top 5 songs in 2020 hovered around 0.3 to 0.4. While most songs hovered around C C#. Its interesting to see the relationship between the key and their respective energy levels throughout playing with the parameters. 4d:T4d4,viewof charts2020vsgraph = { kmeans(top5danceabilitydate); const scatter_sq = width * 0.50; const hist_width = width * 0.30; const num_hist = hist_columns.length; const brush = vl.selectInterval().encodings('x').resolve('interesect'); const histogram = vl.markBar() .encode( vl.x().fieldQ(vl.repeat('row')) .bin({maxbin:10, minstep:.01}) .axis({titleAnchor:'start'}), vl.y().count().title(null), vl.color().fieldN('Month') .sort("January","Febuary","March","April","May","June","July","August","September","October","November","December")); const histogram_layer = vl.layer( histogram.select(brush).encode(vl.color().value('lightgrey')), histogram.transform(vl.filter(brush))) .width(hist_width) .repeat({row: hist_columns}); const scatter = vl.markPoint() //this is to make it a square .height(scatter_sq).width(scatter_sq) .encode( vl.x().fieldQ(x), vl.y().fieldQ(y), vl.opacity().if(brush,vl.value(0.8)).value(0.1), vl.color().fieldQ("Valence").scale({ range:["blue","purple","red"]}), vl.tooltip(quant_columns.concat(['Track Name','Artist'])) ) return vl.hconcat(histogram_layer,scatter) .data(top5danceabilitydate) .render(); }4e:Tb22,multiTrackEventTimeline = { const height = width * 5/8, startX = 100, marginRight= 100; const uniqueRowLabels = filterbyTravel.map(Entry_ID=>Entry_ID.Intervention_category) .filter((value, index, self)=> self.indexOf(value)===index) .sort(); const svg = d3.select(DOM.svg(width, 300)) .attr("viewbox","0 0 1000 600") .style("width","100%") .style("height","auto"); const xScale = d3.scaleTime() .domain([ moment("2020-01-01").startOf("day"), moment("2021-02-28").endOf("day") ]) .range([startX,width - marginRight]); const yScale = d3.scaleBand() .domain(uniqueRowLabels) .range([60, (uniqueRowLabels.length + 1)*60]); let g = svg.append("g"); let channelLines = g.append("g").attr("id", "backgrounds"); let marks = g.append("g").attr("id", "PublicInfo"); let markst = g.append("g").attr("id","Travel"); let publicInfo = marks .selectAll("g") .data(filterbyTravel) .enter() .append("circle") .transition() .duration(500) .attr("class", "PublicInforMarks") .attr("cx", d => xScale(moment(d.Date))) .attr("cy", d => yScale(d.Intervention_category)) .attr("r", d => 6) .attr("stroke", d => d.Intervention_category === "Public information" ? "#bf0000": "#00AA00") .attr("fill", d => d.Intervention_category === "Public information" ? "#bf0000": "#00AA00") svg .selectAll("circle") .on("mouseover",function(d){ d3.select(this).attr('fill-opacity','1'); tooltip.style("visibility","visible").html(`

Order: ${d.target.__data__.Description}

Date: ${d.target.__data__.Date}

`); d3.select(this).attr('fill','#ee42d0'); }) .on("mousemove", function(e) { tooltip .style("top", e.pageY - 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout",function(){ tooltip.style("visibility","hidden"); d3.select(this) .transition() .attr('fill','#ffffff'); }); //x axis let xAxis = d3.axisTop(xScale).ticks(12); let xAxisGroup = g .append("g") .attr("class", "xAxis axis") .attr("transform", "translate(0, 30)") .call(xAxis); // y axis let yAxis = d3.axisLeft(yScale); let yAxisGroup = g .append("g") .attr("class", "axis axis--y") .attr("transform", "translate(" + startX + ",-20)") .call(yAxis); let backgroundLines = channelLines .selectAll("g") .data(uniqueRowLabels) .enter() .append("rect") .attr("x", startX) .attr("y", d => yScale(d)-20) .attr("width", width-startX-marginRight) .attr("height", 40) .attr("fill", "#f6f6f6"); return svg.node(); }4f:Te8d,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/histogram function Histogram(data, { value = d => d, // convenience alias for x domain, // convenience alias for xDomain label, // convenience alias for xLabel format, // convenience alias for xFormat type = d3.scaleLinear, // convenience alias for xType x = value, // given d in data, returns the (quantitative) x-value y = () => 1, // given d in data, returns the (quantitative) weight thresholds = 50, // approximate number of bins to generate, or threshold function marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width of chart, in pixels height = 400, // outer height of chart, in pixels insetLeft = 0.5, // inset left edge of bar insetRight = 0.5, // inset right edge of bar xType = type, // type of x-scale xDomain = domain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] xLabel = label, // a label for the x-axis xFormat = format, // a format specifier string for the x-axis yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yLabel = "↑ Amount of times...", // a label for the y-axis yFormat, // a format specifier string for the y-axis color = "currentColor" // bar fill color } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); // Compute bins. const bins = d3.bin().thresholds(thresholds).value(i => X[i])(I); // Compute default domains. if (xDomain === undefined) xDomain = [bins[0].x0, bins[bins.length - 1].x1]; if (yDomain === undefined) yDomain = [0, d3.max(bins, I => d3.sum(I, i => Y[i]))]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80, xFormat).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); yFormat = yScale.tickFormat(100, yFormat); 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;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .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)); svg.append("g") .attr("fill", color) .selectAll("rect") .data(bins) .join("rect") .attr("x", d => xScale(d.x0) + insetLeft) .attr("width", d => Math.max(0, xScale(d.x1) - xScale(d.x0) - insetLeft - insetLeft)) .attr("y", d => yScale(d3.sum(d, i => Y[i]))) .attr("height", d => yScale(0) - yScale(d3.sum(d, i => Y[i]))) .append("title") .text((d, i) => [`${d.x0} ≤ x < ${d.x1}`, yFormat(d3.sum(d, i => Y[i]))].join("\n")); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width - marginRight) .attr("y", 27) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); return svg.node(); }50:Tb31,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/area-chart function AreaChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value defined, // given d in data, returns true if defined (for gaps) curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "currentColor" // fill color of area } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); // Compute which data points are considered defined. if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; // Construct scales and axes. 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 / 40, yFormat); // Construct an area generator. const area = d3.area() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y0(yScale(0)) .y1(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;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .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)); svg.append("path") .attr("fill", color) .attr("d", area(I)); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); return svg.node(); }51:T1092,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/scatterplot function Scatterplot(data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value r = 3, // (fixed) radius of dots, in pixels title, // given d in data, returns the title marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels inset = r * 2, // inset the default range, in pixels insetTop = inset, // inset the default y-range insetRight = inset, // inset the default x-range insetBottom = inset, // inset the default y-range insetLeft = inset, // inset the default x-range width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft + insetLeft, width - marginRight - insetRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom - insetBottom, marginTop + insetTop], // [bottom, top] xLabel, // a label for the x-axis yLabel, // a label for the y-axis xFormat, // a format specifier string for the x-axis yFormat, // a format specifier string for the y-axis fill = "none", // fill color for dots stroke = "currentColor", // stroke color for the dots strokeWidth = 1.5, // stroke width for dots halo = "#fff", // color of label halo haloWidth = 6 // padding around the labels } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const T = title == null ? null : d3.map(data, title); const I = d3.range(X.length).filter(i => !isNaN(X[i]) && !isNaN(Y[i])); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = d3.extent(Y); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 20, xFormat); const yAxis = d3.axisLeft(yScale).ticks(height / 50, yFormat); 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;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", marginTop + marginBottom - height) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .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)); svg.append("g") .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .selectAll("circle") .data(I) .join("circle") .attr("cx", i => xScale(X[i])) .attr("cy", i => yScale(Y[i])) .attr("r", r); if (T) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("text") .data(I) .join("text") .attr("dx", 7) .attr("dy", "0.35em") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .text(i => T[i]) .call(text => text.clone(true)) .attr("fill", "none") .attr("stroke", halo) .attr("stroke-width", haloWidth); return svg.node(); }52:T108a, ### Overview My visualization addresses the state of music during the first year of the COVID 19 pandemic. It is targeted towards musicologists and people that are interested in the trends between music and current events, and the people that study music and ethnography through a world lens. I hope that this tool allows historians and ethnographers see how COVID19 impacted music's trends and behaviors during 2019 and 2020. ### Dataset choices, and Dimensions For these data visualizations datasets from
https://github.com/gucaselo/spotify-project/tree/main/resources
https://open.canada.ca/data/en/dataset/261c32ab-4cfd-4f81-9dea-7b64065690dc were instrumental in helping me analyze the data, I looked at Canadian pandemic state of emergency calls and trending worldwide hits to gather the appropriate amount of data from the datasets. I translated the data into CSV tables and manipulated the tables to get TOP 5 songs per month. In the Canadian pandemic dataset I only looked at distributed messages for workforce, travel and Public Health Information. ### Interactions Across all three sets of visualizations I used pan and zoom as well as brushing for the 2020 year in music visualization. I did some preliminary filter in the dataset with basic data manipulation outside of rewriting the CSV. Details on demand have been implemented for a majority of my visualizations as well by appear on hover. Linking and faceting have also been employed in visualizations 2 and 3, with layering of the 2 Spotify data sets in visualization 2. ### Design Choices and Analytical Questions - Which year on average had sadder songs?
- Did type of songs streamed correspond to Canadian pandemic events? If so how?
- How can we look at emotive (valence) songs and danceability? Is there a correlation in 2020?
- What is the relationship between top 5 songs and emotion?
- Do song emotive (valence) numbers have anything to do with streaming over the year 2020?
#### Visualization 1 For visualizations in part 1 I used a scatter plot that was faceted to compare the attributes of each year visually. I added color in order to add an extra dimension of data ( for emotion). I chose to use a scatter plot here because for me it was the quickest way to see potential trends in the datasets. #### Visualization 2 For visualizations in part 2 I used a bubble plot that to compare between the years. Visually it made sense to look at the amount of streams vs the danceability of each set. With this visualization you could see the upwards and downwards trends in both valence and danceability. #### Visualization 3 For visualizations in part 3 I used histograms and a brush-able scatterplot to look at when certain songs were at there most popular correlated with there main attributes. I found that the brushability of the histograms allowed me to pick out certain songs easier. ### Design Choices + Feasibility Pilot The correct visualization idioms have been used in order to answer my research questions on the datasets provided. The scatterplots in V2 and V3 allowed us to have a granular look at popular songs while the histograms and bubble plots allowed us to look at the popularity of songs and the emotiveness of each song ( at least according to Spotify). I used details on demand, pan/zoom and brushability to provide additional dimensions to the data. Additionally I linked the filtered scatterplots and bubble plots and then faceted the 2020 data set in V3. During testing for feasibility, users mentioned that they didnt understand many of the attributes Spotify provides, as well as making it more clear that interactions were enabled. User 1 and user 2 both wished for shift scroll interactions that allowed for greater detail. Maybe I should implement a full screen button... ### Unimplemented I had a timeline I wanted to implement but I couldn't figure out how to make Vega lite and JavaScript play nicely with each other. I wanted to make the timeline brush able to highlight when certain songs were popular as well as allowing selection by month for comparison. I also wanted to include multiple linking tooltips, but I could not find an example that spanned multiple graphs :(53:[{"id":"86eb8cd912a1075f5b6e0dbd9677a8c44ea9e3b5cd094fd8e9bd10e3eab1620db70d3fa9e2bbb21978b940f33612cccae4a0fb07ba3eefd79d7a635cb9016cee","href":"https://static.observableusercontent.com/files/86eb8cd912a1075f5b6e0dbd9677a8c44ea9e3b5cd094fd8e9bd10e3eab1620db70d3fa9e2bbb21978b940f33612cccae4a0fb07ba3eefd79d7a635cb9016cee","name":"interventions_modified.csv","type":"text/csv","lastModified":1638658854620.131,"size":24466},{"id":"27bf35f48d9ceda289977e7b63635bbd84cec35365119aebf973d778c63fe95cdb44f43661132a1df8f0733ba3fb186ba9b4d881776822e468e0391c91b4af2f","href":"https://static.observableusercontent.com/files/27bf35f48d9ceda289977e7b63635bbd84cec35365119aebf973d778c63fe95cdb44f43661132a1df8f0733ba3fb186ba9b4d881776822e468e0391c91b4af2f","name":"Original_Spotify2019_Updated_2-20-21_1.csv","type":"text/csv","lastModified":1638658854620.131,"size":1770910},{"id":"29e56656da79a0f8783a33b020f3975698031d9d743c4b3491aeb5dfb27a8e902cee3a145cba0ff1a630bfd7cc6f5b762e7b9af6de35b8cfaee51df79929aaa3","href":"https://static.observableusercontent.com/files/29e56656da79a0f8783a33b020f3975698031d9d743c4b3491aeb5dfb27a8e902cee3a145cba0ff1a630bfd7cc6f5b762e7b9af6de35b8cfaee51df79929aaa3","name":"Original_Spotify2020_Updated_2-20-21_1.csv","type":"text/csv","lastModified":1638658854620.131,"size":1745493}] 44:{"id":"e1c8bab634e64edb","slug":"final-project","title":"Final Project IAT355 On the analysis of Music within 2019 and 2020","thumbnail":"20c14074697a3ba98681862aa1276a0e0356a1e8bb06578d312f06e2011c803b","access_level":"public","create_time":"$D2021-12-04T23:00:54.620Z","update_time":"$D2024-07-12T17:50:37.687Z","view_time":null,"first_public_time":"$D2021-12-04T23:37:31.649Z","has_unpublished_edits":null,"fork":{"id":"a3ef6337b5dca4a2","slug":"assignment-5","title":"Assignment 5","owner":{"id":"5279745599ecab8c","login":"xjonathanlee","name":"JONATHAN LEE"}},"stars":2,"starred":false,"owner":{"type":"team","id":"5279745599ecab8c","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":"starter_2024","bio":"","following":false},"version":1323,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"33167a7598de2d43","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"33167a7598de2d43","login":"xjonathanlee","name":"JONATHAN LEE","avatar_url":"https://avatars-next.observableusercontent.com/c07355a839eb605bc0bf3dbd93b3c1939d2d1c6ad9b634cfa3d18b5ca5093c50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Project IAT355 On the analysis of Music within 2019 and 2020","cells":[{"id":0,"value":"md`# Final Project IAT355 On the analysis of Music within 2019 and 2020\nJonathan Lee ---301319133\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"md`\n

[Overview](#n1)

[Introduction](#n2)

[Visualization 1](#n3)

[Visualization 2](#n4)

[Visualization 3](#n5)

[Things that didnt work](#n6)

[Data Manipulation](#n7)

[Final Summary](#n8)

[Citations](#n9)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"# Report","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":804,"value":"n1= md`## Overview`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"\nmd`This project is based on Spotify data sets and the keystone moments in the COVID 19 pandemic of 2020. Hoping to answer the analytical question of whether music listened to in 2020 was either more happy or sad depending on the pandemic conditions. My project aims to look into the inter-relationships between music and notable key events in the pandemic, not limited to valence (emotion), \"speechiness\" of the music and overall danceability of the top music during 2019-2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"n2 = md`# Introduction`\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"# Main Research Questions","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"md`\n- Which year on average had sadder songs?\n
\n- Did type of songs streamed correspond to canadian pandemic events? If so how?\n
\n- How can we look at emotive (valence) songs and danceability? Is there a correlation in 2020?\n
\n- What is the relationship between top 5 songs and emotion?\n
\n- Do song emotive (valence) numbers have anything to do with streaming over the year 2020?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"n3 = md`# Visualization #1 --- Is there a difference between top 5 songs for 2019 and 2020?`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"md` # 2019 Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md` # 2020 Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"viewof charts2020_markcir= {\n\n const panzoom = vl.selectInterval().bind('scales')\n .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!')\n .zoom('wheel!');\n \n const brush = vl.selectInterval().resolve('global')\n .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!')\n .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!')\n .zoom(null);\n \nreturn vl.markCircle()\n .data(top5danceabilitydate)\n .params(panzoom,brush)\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(\"Danceability\"),\n vl.color().fieldQ(\"Valence\").scale({ range:[\"blue\",\"purple\",\"red\"]}),\n vl.tooltip().fieldN(\"Track Name\")\n )\n .width(200)\n .height(200)\n .repeat({column:['Valence','Key','Speechiness']})\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"### Combined Graphs showing trends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1215,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"n4= md`# Visualization 2 --- Is there any identifiable trends between a songs popularity (airplay) and the emotiveness of the song per year?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"n5= md`# Visualization 3 --- Given what we know about COVID19 and its impact on the world, is there a match in valence for songs released during the pandemic year?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"### Parameter Selection of music (top 5) strictly during 2020","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":697,"value":"viewof x = Select(quant_columns,{label:\"x\", value: \"Danceability\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"viewof y = Select(quant_columns,{label:\"y\", value:\"Valence\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"n6= md`# Things that didn't work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"### This is a Filter box\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"viewof ch= checkbox({\n title: \"Filter by Month (Doesnt work yet)\",\n options:[\n {value: \"2019\", label:\"2019\"},\n {value: \"2020\", label:\"2020\"},\n {value: \"January\", label:\"January\"},\n {value: \"Febuary\", label:\"Febuary\"},\n {value: \"March\", label:\"March\"},\n {value: \"April\", label:\"April\"},\n {value: \"May\", label:\"May\"},\n {value: \"June\", label:\"June\"},\n {value: \"July\", label:\"July\"},\n {value: \"August\", label:\"August\"},\n {value: \"September\", label:\"September\"},\n {value: \"October\", label:\"October\"},\n {value: \"November\", label:\"November\"},\n {value: \"December\", label:\"December\"}\n ],\n value:[\"2019\",\"2020\"],\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"### This is a Timeline\n It is potentially an unused visualization that I worked really hard on, but I dont think it is going to work with my current data set. In a perfect world I could attach this to Vega-lite.\n\n ### Dataset for timeline visualization\nThis data set is for the \"brushable\" timeline present on my visualization board. It has tool tips enabled in order to view the specific date and order that was highlighted at the time. This is to compare and contrast with a histogram of music pulled from the spotify API.\n\n### Timeline\nI choose a multi timeline to express when different health orders came into effect at different times. The Health orders are plotted versus the date it was released. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"### The filtered dataset\nFilter dataset is to limit the about of digestible data, first by isolating categories I think are landmark moments in the pandemic, and placing them on 3 separate timelines. You can see how each piece of data correlated with one another.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"n7= md`# Data Manipulation`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"### Dataset Cleaning and Manipulation\n\nAcross all 3 visualizations the dimensions of emotion (valence), danceability, speechiness ( how much of the song is in a talking candence) and year of issue are used. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"\nSome functions for helping categorize and organize data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1149,"value":"monthsarr = [\"January\",\"Febuary\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"monthsvalencealgo ={\nlet monthsarr = [\"January\",\"Febuary\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"];\nlet i=0;\n for(let i=0;i {if(d!=x && d!=y) temp.push(d);})\n return temp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"spotify2019complete = FileAttachment(\"Original_Spotify2019_Updated_2-20-21_1.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"spotify2019complete_data = spotify2019complete.text();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"spotify2019complete_data_autoType = d3.csvParse(spotify2019complete_data,d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"top5danceabilitydate2019 = spotify2019complete_data_autoType.filter(function isolatedancedate(d){\n return d.Position<=\"5\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"spotify2020complete = FileAttachment(\"Original_Spotify2020_Updated_2-20-21_1.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"spotify2020complete_data = spotify2020complete.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"top5danceabilitydate2020_average = spotify2020complete_data_autoType.filter(function isolatedancedate(d){\n return d.Month === \"January\" && d.Position<=\"5\"\n return \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"spotify2020complete_data_autoType = d3.csvParse(spotify2020complete_data,d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"Notable_Canada_Covid_text = Notable_Canada_Covid.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"filterbyTravel= Notable_Canada_Covid_text_autotype.filter(function(d){\n return d.Intervention_category == \"Travel\" || d.Intervention_category == \"Public information\" || d.Intervention_category == \"Health workforce\" \n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Notable_Canada_Covid_text_autotype = d3.csvParse(Notable_Canada_Covid_text,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"top5danceabilitydate = spotify2020complete_data_autoType.filter(function isolatedancedate(d){\n return d.Position<=\"5\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Notable_Canada_Covid=FileAttachment(\"interventions_modified.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('a simple tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"# Imported things","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"import {Range, Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"moment = require(\"moment\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"import{radio,slider,select,checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"import{kmeans} from \"@spond/k-means-clustering-algorithm\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"import { thumbnail, tryIt, weatherColors } from \"a9a4b43c00769b31\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"import{uniqueValid} from \"@uwdata/data-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"# Video Link\nVideo link can be found here \n**https://youtu.be/FBRi8Q4qmus**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"n8= md`# Final Summation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1139,"value":"n9= md`# Citations`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"### Citations\nhttps://www.d3-graph-gallery.com\n
\nhttps://observablehq.com/d/3844b70fc5ae9c94\n
\nhttps://observablehq.com/@observablehq/vega-lite\n
\nhttps://observablehq.com/@uwdata/interaction?collection=@uwdata/visualization-curriculum\n
\nhttps://observablehq.com/@weiglemc/brushing-and-linking-example-with-vega-lite\n
\nhttps://observablehq.com/@uwdata/multi-view-composition\n
\nhttps://observablehq.com/@vega/vega-lite-composing-selections?collection=@vega/vega-lite-api","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 45:"$44:body"