3f:null 40:["$","title",null,{"children":"Assignment 5 | JONATHAN LEE | Observable"}] 46:T4e9,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 our 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:T81f,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 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"), vl.color().fieldQ("Valence"), vl.size().sum("Streams"), vl.tooltip().fieldN("Track Name"), // vl.tooltip().fieldN("Energy") ) 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"), vl.size().sum("Streams"), vl.color().fieldQ("Valence"), vl.tooltip().fieldN("Track Name"), //this doesnt work idk why vl.filter("oneOf"['ch']) ) 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.markPoint().data(top5danceabilitydate) .encode( vl.x().fieldQ("Valence"), 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(dancy2019,dancy2020,scatter).render() }48:T479,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(); }49:Td6b,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'); }); // let travelMarks = markst // .selectAll("g") // .data(filterbyTravel) // .enter() // .append("circle") // .attr("class", "travel") // .attr("cx", d => xScale(moment(d.Date))) // .attr("cy", d => yScale(d.Intervention_category)) // .attr("r", d => 4) // .attr("stroke", d => d.Intervention_category === "Travel" ? "#000000": "#00AA00") // .attr("fill", d => d.Intervention_category === "Travel" ? "#000000": "#00FF00") // .on("click", d => { // // Click logic here // }); //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(); }4a: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(); }4b: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(); }4c: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(); }4d:[{"id":"86eb8cd912a1075f5b6e0dbd9677a8c44ea9e3b5cd094fd8e9bd10e3eab1620db70d3fa9e2bbb21978b940f33612cccae4a0fb07ba3eefd79d7a635cb9016cee","href":"https://static.observableusercontent.com/files/86eb8cd912a1075f5b6e0dbd9677a8c44ea9e3b5cd094fd8e9bd10e3eab1620db70d3fa9e2bbb21978b940f33612cccae4a0fb07ba3eefd79d7a635cb9016cee","name":"interventions_modified.csv","type":"text/csv","lastModified":1637706010782.039,"size":24466},{"id":"29e56656da79a0f8783a33b020f3975698031d9d743c4b3491aeb5dfb27a8e902cee3a145cba0ff1a630bfd7cc6f5b762e7b9af6de35b8cfaee51df79929aaa3","href":"https://static.observableusercontent.com/files/29e56656da79a0f8783a33b020f3975698031d9d743c4b3491aeb5dfb27a8e902cee3a145cba0ff1a630bfd7cc6f5b762e7b9af6de35b8cfaee51df79929aaa3","name":"Original_Spotify2020_Updated_2-20-21_1.csv","type":"text/csv","lastModified":1637706010782.039,"size":1745493},{"id":"27bf35f48d9ceda289977e7b63635bbd84cec35365119aebf973d778c63fe95cdb44f43661132a1df8f0733ba3fb186ba9b4d881776822e468e0391c91b4af2f","href":"https://static.observableusercontent.com/files/27bf35f48d9ceda289977e7b63635bbd84cec35365119aebf973d778c63fe95cdb44f43661132a1df8f0733ba3fb186ba9b4d881776822e468e0391c91b4af2f","name":"Original_Spotify2019_Updated_2-20-21_1.csv","type":"text/csv","lastModified":1637708450582.404,"size":1770910}] 44:{"id":"a3ef6337b5dca4a2","slug":"assignment-5","title":"Assignment 5","thumbnail":"05cd3f50fb2b7e271e08c83b82dc55e4f71218e6ea4e5c84feefac843d9b5cc7","access_level":"public","create_time":"$D2021-11-23T22:20:10.782Z","update_time":"$D2021-12-04T04:21:36.394Z","view_time":null,"first_public_time":"$D2021-11-24T02:19:07.499Z","has_unpublished_edits":null,"fork":{"id":"ec2781dfb2199eca","slug":"multi-track-event-timeline-chart","title":"Assignment 4","owner":{"id":"5279745599ecab8c","login":"xjonathanlee","name":"JONATHAN LEE"}},"stars":0,"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":986,"publish_version":986,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 5","cells":[{"id":0,"value":"md`# Assignment 5\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)

[Citations](#n7)

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":true,"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 world events? If so how?\n
\n- How can we look at emotive 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 valence numbers have anything to do with streaming over the year 2020?\n`","pinned":true,"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`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md`Danceability correlation with Energy during the 2020 year (top 5 tracks only).\nThis 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\".\n\n### Identifying Traits\nI 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.\n\n### Visual Idiom\nDisplayed Image`\n","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":"viewof charts2019= {\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('union')\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(top5danceabilitydate2019)\n .params(panzoom,brush)\n .encode(\n vl.x().fieldQ(vl.repeat('column')),\n vl.y().fieldQ(\"Danceability\").axis({minExtent:25}),\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":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('union')\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":314,"value":"# Visualization 2\n\nThis 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. \n\n### Identifying Traits\nI 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 teh pandemic were more inclined to listen to happier music over all.\n\n### Visual Idiom\nI 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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"viewof ch= checkbox({\n title: \"Filter by Month (Doesnt work yet)\",\n options:[\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:[\"January\",\"Febuary\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"],\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"# Visualization 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"\n### Visual Idiom\nThis 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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"# Things that Didnt Work","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"# Data Manipulation\nSome functions for helping categorize and organize data.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"//ask if theres a way to give a loop \ntop5danceabilitydate2020_average_valence = d3.mean(top5danceabilitydate2020_average,function(d){\n return d.Danceability\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"{\n try\n {\n {\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":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$4c","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":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/@weiglemc/brushing-and-linking-example-with-vega-lite\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":"$W4d","stdlib":"1"}} 45:"$44:body"