tooltip = d3
.select('body')
.append('div')
.attr('class', 'd3-tooltip')
.style('position', 'absolute')
.style('z-index', '10')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff')
.text('a simple tooltip')
Notable_Canada_Covid_text_autotype = d3.csvParse(Notable_Canada_Covid_text,d3.autoType)
filterbyTravel= Notable_Canada_Covid_text_autotype.filter(function(d){
return d.Intervention_category == "Travel" || d.Intervention_category == "Public information" || d.Intervention_category == "Health workforce"
})
Visualization #2
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 teh 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
Displayed Image
chart = Scatterplot(top5danceabilitydate, {
x: d => d.Danceability,
y: d => d.Energy,
title:d=> d['Track Name'],
yLabel: "↑ Energy",
xLabel:"↑ DanceJammers",
width,
height: 500,
color: "steelblue"
})
ordinalMonthSort = d3.scaleBand()
.domain(["Janurary","Feburary","March","April"])
.range([0,100])
spotify2020complete = FileAttachment("Original_Spotify2020_Updated_2-20-21_1.csv")
spotify2020complete_data = spotify2020complete.text()
spotify2020complete_data_autoType = d3.csvParse(spotify2020complete_data,d3.autoType)
top5danceabilitydate = spotify2020complete_data_autoType.filter(function isolatedancedate(d){
return d.Position<="5"
})
import {vl} from "@vega/vega-lite-api"
vl.markCircle()
.data(top5danceabilitydate)
.encode(
vl.x().fieldO("Month")
.sort("January","Febuary","March","April","May","June","July","August","September","October","November","December"),
vl.y().fieldQ("Valence"),
vl.size().sum("Streams"),
vl.tooltip().fieldN("Track Name"),
// vl.tooltip().fieldN("Energy")
)
.render()
Citations
https://www.d3-graph-gallery.com
<br>
https://observablehq.com/d/3844b70fc5ae9c94
<br>
https://observablehq.com/@observablehq/vega-lite
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.
