md`
<li>[Overview](#n1)</li>
<li>[Introduction](#n2)</li>
<li>[Visualization 1](#n3)</li>
<li>[Visualization 2](#n4)</li>
<li>[Visualization 3](#n5)</li>
<li>[Things that didnt work](#n6)</li>
<li>[Data Manipulation](#n7)</li>
<li>[Citations](#n7)</li>`
md`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`
Main Research Questions
md`
- Which year on average had sadder songs?
<br>
- Did type of songs streamed correspond to world events? If so how?
<br>
- How can we look at emotive songs and danceability? Is there a correlation in 2020?
<br>
- What is the relationship between top 5 songs and emotion?
<br>
- Do song valence numbers have anything to do with streaming over the year 2020?
`
import {vl} from '@vega/vega-lite-api-v5'
import {Range, Select} from "@observablehq/inputs"
Visualization 3
viewof x = Select(quant_columns,{label:"x", value: "Danceability"})
viewof y = Select(quant_columns,{label:"y", value:"Valence"})
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');
// why doesnt this work I am upset
const histogram = vl.markBar()
.encode(
vl.x().fieldQ(vl.repeat('row'))
.bin({maxbin:10, minstep:.01})
.axis({titleAnchor:'start'}),
vl.y().count().title(null));
//this controls the brushing of the histograms
const histogram_layer = vl.layer(
histogram.select(brush).encode(vl.color().value('lightgrey')),
histogram.transform(vl.filter(brush)))
.height((scatter_sq/num_hist)-(10*num_hist))
.width(hist_width)
.repeat({row: hist_columns});
const scatter = vl.markPoint()
.height(scatter_sq).width(scatter_sq)
.encode(
vl.x().fieldQ(x),
vl.y().fieldQ(y),
vl.color().value('purple'),
vl.opacity().if(brush,vl.value(0.8)).value(0.1),
vl.tooltip(quant_columns.concat(['Track Name','Artist']))
)
return vl.hconcat(histogram_layer,scatter)
.data(top5danceabilitydate)
.render();
}
Data Manipulation
Some functions for helping categorize and organize data.
//ask if theres a way to give a loop
top5danceabilitydate2020_average_valence = d3.mean(top5danceabilitydate2020_average,function(d){
return d.Danceability
})
{
try
{
{
for (let i = 0; i<top5danceabilitydate2019.length;i++)
{
console.log(top5danceabilitydate2019.length);
console.log(top5danceabilitydate2019[i]["Valence"]);
}
}
}
catch(e)
{
console.log(top5danceabilitydate2019.length,e);
}
}
console.log(top5danceabilitydate2019.length)
quant_columns = ["Danceability","Valence","Key","Energy","Streams"]
hist_columns = {
let temp = []
quant_columns.forEach(d=> {if(d!=x && d!=y) temp.push(d);})
return temp;
}
filterbyTravel= Notable_Canada_Covid_text_autotype.filter(function(d){
return d.Intervention_category == "Travel" || d.Intervention_category == "Public information" || d.Intervention_category == "Health workforce"
})
Notable_Canada_Covid_text_autotype = d3.csvParse(Notable_Canada_Covid_text,d3.autoType)
Imported things
import{radio,slider,select,checkbox} from "@jashkenas/inputs"
import{kmeans} from "@spond/k-means-clustering-algorithm"
import { thumbnail, tryIt, weatherColors } from "a9a4b43c00769b31"
import{uniqueValid} from "@uwdata/data-utilities"
Citations
https://www.d3-graph-gallery.com
<br>
https://observablehq.com/d/3844b70fc5ae9c94
<br>
https://observablehq.com/@observablehq/vega-lite
<br>
https://observablehq.com/@weiglemc/brushing-and-linking-example-with-vega-lite
<br>
https://observablehq.com/@vega/vega-lite-composing-selections?collection=@vega/vega-lite-api
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
