29:null 2a:["$","title",null,{"children":"Untitled | Columbia Dataviz | Observable"}] 2f:T130e,chart2_stephen = () => { const width = 900, height = 600, margin = { top: 80, right: 50, bottom: 120, left: 50 }; // if the showAllYears is toggled on, just show all years. Otherwise, filter by the selected year from the slider const filteredData = showAllYears ? spotify_data : spotify_data.filter(d => new Date(d.track_album_release_date).getFullYear() === selectedYear); const sortedData = [...filteredData].sort((a, b) => a.danceability - b.danceability); const svg = d3.create("svg") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // fixed x axis to max danceability & fixed y axis max popularity const xScale = d3.scaleLinear() .domain([0, d3.max(spotify_data, d => d.danceability)]) .range([0, width - margin.left - margin.right - 30]); const yScale = d3.scaleLinear() .domain([0, d3.max(spotify_data, d => d.track_popularity)]) .range([height - margin.top - margin.bottom, 0]); const rScale = d3.scaleSqrt() .domain(d3.extent(sortedData, d => d.valence)) .range([5, 20]); const colorScale = d3.scaleOrdinal() .domain([...spotify_data].map(d => d.playlist_genre)) .range([ "#ff6f4b", "#F06292", "#D81B60", "#FFB343", "#9C1C6C", "#6A1B9A", "#4A148C", "#290E7D", ]); g.append("g") .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(d3.axisBottom(xScale)); g.append("g") .call(d3.axisLeft(yScale)); g.selectAll("circle") .data(sortedData) .enter().append("circle") .attr("cx", d => xScale(d.danceability) + 8) .attr("cy", d => yScale(d.track_popularity) - 18) .attr("r", d => rScale(d.valence)) .attr("fill", d => colorScale(d.playlist_genre)) .attr("opacity", 0.8) .on("mouseover", (event, d) => { d3.select("#tooltip") .style("left", `${tooltipX(xScale(d.danceability) + 8)}px`) .style("top", `${tooltipY(yScale(d.track_popularity) - 18, event.pageY)}px`) .style("width", '300px') .style("height",'350px') .style("display", "block") .html(` ${d.track_name} by ${d.track_artist}
Genre: ${d.playlist_genre}
Danceability: ${d.danceability.toFixed(2)}
Energy: ${d.energy.toFixed(2)}
Popularity: ${d.track_popularity.toFixed(2)}
Valence: ${d.valence.toFixed(2)}
Tempo: ${d.tempo.toFixed(2)}
$${d.track_name}$ `); }) .on("mouseout", () => d3.select("#tooltip").style("display", "none")); if (d3.select("#tooltip").empty()) { d3.select("body").append("div") .attr("id", "tooltip") .style("position", "absolute") .style("background", "white") .style("padding", "5px") .style("border", "1px solid black") .style("display", "none"); } svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2.5) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "bold") // show the currently selected Year at the top of the graph for clarity, feel free to remove if too much .text(`Mapping Danceability and Popularity by Genre of Spotify Tracks ${ showAllYears ? " - 1965 to 2020" : " - "+selectedYear}`); svg.append("text") .attr("x", width / 2) .attr("y", height - margin.bottom + 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Danceability"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", margin.left - 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Popularity"); // adding the legend to the right hand side const legend = svg.append("g") .attr("transform", `translate(${width - margin.right - 15}, ${margin.top})`); // grab the unique genres const genres = [...new Set(spotify_data.map(d => d.playlist_genre))]; // create the item to store the colored rectangle and genre text const legendItem = legend.selectAll(".legend-item") .data(genres) .enter().append("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 25})`); legendItem.append("rect") .attr("width", 20) .attr("height", 20) .attr("fill", d => colorScale(d)); legendItem.append("text") .attr("x", 30) .attr("y", 15) .attr("font-size", "14px") .text(d => d); return svg.node(); } 30:Tafd,**400 words Write-Up:** We started our project by exploring ways to show the relationship between Spotify track popularity and audio features. First, we tried a bar chart mapping popularity and a scatter plot showing acousticness. These early designs were interesting but lacked depth and interactivity. We improved our visualization and chose **Mapping Danceability and Popularity by Genre of Spotify Tracks (1965 to 2020)** as our final visualization. ### 👥 Team Contributions - **Srinidhi** created the early versions, including the bar chart, the scatter plot with acousticness, and the first version of the final design. She added tooltips that display artist, genre, popularity, valence, album cover, and a Spotify link. - **Diego** added the year slider and a **“Show All Years”** button, which helped users filter tracks by release date and reduced visual clutter. - **Stephen and Diego** worked on final edits, improving the layout and interactivity. - **Molly** led user testing, recorded feedback, and prepared the write up and the final Observable notebook. ### ⚙️ Technical and Design Challenges One of our biggest challenges was finding which features best explained track popularity. We tested many variables from the Spotify dataset, including Genre, Danceability, Energy, Key, Loudness, Speechiness, Acousticness, Liveness, Valence, and Tempo. Most of them did not show clear patterns. We chose to focus on Genre, Danceability, and Valence because they gave us the most interesting results. Another challenge was making sure users understood the visual encodings. It was not always clear that color represented genre and size represented valence. We added tooltips to explain this, but we also realized a size legend would help. Finally, it was difficult to read individual points in crowded areas. We added the year filter to solve this, and in the future, a genre filter would also be helpful. ### 🧪 User Testing and Future Improvements During user testing, we worked with six friends. They liked the use of color and enjoyed interacting with the tooltips, especially the Spotify preview and album covers. However, most of them did not understand the meaning of the size of the points at first. Several users also said it was hard to focus on one genre at a time and suggested adding a filter. If we had another week, we would focus on improving clarity and user control. We would add a dropdown menu to filter by genre, which would reduce clutter and help users focus. We would also include a small legend to explain what size means in relation to valence. Lastly, we would explore adding trendlines or grouping data by genre to show overall patterns more clearly. These changes would make the visualization more intuitive, informative, and enjoyable for our users. 31:T126c,chart2_diego = () => { const width = 1100, height = 800, margin = { top: 80, right: 50, bottom: 120, left: 50 }; // if the showAllYears is toggled on, just show all years. Otherwise, filter by the selected year from the slider const filteredData = showAllYearsTest ? spotify_data : spotify_data.filter(d => new Date(d.track_album_release_date).getFullYear() === selectedYearTest); const sortedData = [...filteredData].sort((a, b) => a.danceability - b.danceability); const svg = d3.create("svg") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // fixed x axis to max danceability & fixed y axis max popularity const xScale = d3.scaleLinear() .domain([0, d3.max(spotify_data, d => d.danceability)]) .range([0, width - margin.left - margin.right - 30]); const yScale = d3.scaleLinear() .domain([0, d3.max(spotify_data, d => d.track_popularity)]) .range([height - margin.top - margin.bottom, 0]); const rScale = d3.scaleSqrt() .domain(d3.extent(sortedData, d => d.valence)) .range([5, 20]); const colorScale = d3.scaleOrdinal() .domain([...spotify_data].map(d => d.playlist_genre)) .range([ "#ff6f4b", "#F06292", "#D81B60", "#FFB343", "#9C1C6C", "#6A1B9A", "#4A148C", "#290E7D", ]); g.append("g") .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(d3.axisBottom(xScale)); g.append("g") .call(d3.axisLeft(yScale)); g.selectAll("circle") .data(sortedData) .enter().append("circle") .attr("cx", d => xScale(d.danceability) + 8) .attr("cy", d => yScale(d.track_popularity) - 18) .attr("r", d => rScale(d.valence)) .attr("fill", d => colorScale(d.playlist_genre)) .attr("opacity", 0.75) .on("mouseover", (event, d) => { d3.select("#tooltip") .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 20}px`) .style("display", "block") .html(` ${d.track_name} by ${d.track_artist}
Genre: ${d.playlist_genre}
Danceability: ${d.danceability}
Energy: ${d.energy}
Popularity: ${d.track_popularity}
Valence: ${d.valence}
Tempo: ${d.tempo}
$${d.track_name}$ `); }) .on("mouseout", () => d3.select("#tooltip").style("display", "none")); if (d3.select("#tooltip").empty()) { d3.select("body").append("div") .attr("id", "tooltip") .style("position", "absolute") .style("background", "white") .style("padding", "5px") .style("border", "1px solid black") .style("display", "none"); } svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2.5) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "bold") // show the currently selected Year at the top of the graph for clarity, feel free to remove if too much .text(`Mapping Danceability and Popularity by Genre of Spotify Tracks ${ showAllYearsTest ? " - 1965 to 2020" : " - "+selectedYearTest}`); svg.append("text") .attr("x", width / 2) .attr("y", height - margin.bottom + 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Danceability"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", margin.left - 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Popularity"); // adding the legend to the right hand side const legend = svg.append("g") .attr("transform", `translate(${width - margin.right - 15}, ${margin.top})`); // grab the unique genres const genres = [...new Set(spotify_data.map(d => d.playlist_genre))]; // create the item to store the colored rectangle and genre text const legendItem = legend.selectAll(".legend-item") .data(genres) .enter().append("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 25})`); legendItem.append("rect") .attr("width", 20) .attr("height", 20) .attr("fill", d => colorScale(d)); legendItem.append("text") .attr("x", 30) .attr("y", 15) .attr("font-size", "14px") .text(d => d); return svg.node(); } 32:Td51,chart2 = () => { const width = 1100, height = 800, margin = { top: 80, right: 50, bottom: 120, left: 50 }; const sortedData = [...spotify_data].sort((a, b) => a.danceability - b.danceability); const svg = d3.create("svg") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xScale = d3.scaleLinear() .domain(d3.extent(sortedData, d => d.danceability)).nice() .range([0, width - margin.left - margin.right]); const yScale = d3.scaleLinear() .domain(d3.extent(sortedData, d => d.track_popularity)).nice() .range([height - margin.top - margin.bottom, 0]); const rScale = d3.scaleSqrt() .domain(d3.extent(sortedData, d => d.valence)) .range([5, 20]); const colorScale = d3.scaleOrdinal() .domain(sortedData.map(d => d.playlist_genre)) .range([ "#ff6f4b", "#F06292", "#D81B60", "#FFB343", "#9C1C6C", "#6A1B9A", "#4A148C", "#290E7D", ]); g.append("g") .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(d3.axisBottom(xScale)); g.append("g") .call(d3.axisLeft(yScale)); g.selectAll("circle") .data(sortedData) .enter().append("circle") .attr("cx", d => xScale(d.danceability) + 8) .attr("cy", d => yScale(d.track_popularity) - 18) .attr("r", d => rScale(d.valence)) .attr("fill", d => colorScale(d.playlist_genre)) .attr("opacity", 0.8) .on("mouseover", (event, d) => { d3.select("#tooltip") .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 20}px`) .style("display", "block") .html(` ${d.track_name} by ${d.track_artist}
Genre: ${d.playlist_genre}
Danceability: ${d.danceability}
Energy: ${d.energy}
Popularity: ${d.track_popularity}
Valence: ${d.valence}
Tempo: ${d.tempo}
$${d.track_name}$ `); }) .on("mouseout", () => d3.select("#tooltip").style("display", "none")); if (d3.select("#tooltip").empty()) { d3.select("body").append("div") .attr("id", "tooltip") .style("position", "absolute") .style("background", "white") .style("padding", "5px") .style("border", "1px solid black") .style("display", "none"); } svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "bold") .text(`Mapping Danceability and Popularity by Genre of Spotify Tracks`); svg.append("text") .attr("x", width / 2) .attr("y", height - margin.bottom + 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Danceability"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", margin.left - 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Popularity"); return svg.node(); } 33:Tad4,chart1 = () => { const width = 1100, height = 600, margin = { top: 70, right: 50, bottom: 70, left: 50 }; const sortedData = [...spotify_data].sort((a, b) => a.acousticness - b.acousticness); const svg = d3.create("svg") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xScale = d3.scaleLinear() .domain(d3.extent(sortedData, d => d.acousticness)).nice() .range([0, width - margin.left - margin.right]); const yScale = d3.scaleLinear() .domain(d3.extent(sortedData, d => d.track_popularity)).nice() .range([height - margin.top - margin.bottom, 0]); const rScale = d3.scaleSqrt() .domain(d3.extent(sortedData, d => d.danceability)) .range([5, 20]); const colorScale = d3.scaleSequential(d3.interpolatePlasma) .domain(d3.extent(sortedData, d => d.danceability)); g.append("g") .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(d3.axisBottom(xScale)); g.append("g") .call(d3.axisLeft(yScale)); g.selectAll("circle") .data(sortedData) .enter().append("circle") .attr("cx", d => xScale(d.acousticness) + 20) .attr("cy", d => yScale(d.track_popularity) - 20) .attr("r", d => rScale(d.danceability)) .attr("fill", d => colorScale(d.danceability)) .attr("opacity", 0.8) .on("mouseover", (event, d) => { d3.select("#tooltip") .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 20}px`) .style("display", "block") .html(`${d.track_name} by ${d.track_artist}
Danceability: ${d.danceability}
Popularity: ${d.track_popularity}`); }) .on("mouseout", () => d3.select("#tooltip").style("display", "none")); if (d3.select("#tooltip").empty()) { d3.select("body").append("div") .attr("id", "tooltip") .style("position", "absolute") .style("background", "white") .style("padding", "5px") .style("border", "1px solid black") .style("display", "none"); } svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "bold") .text("Acousticness vs Popularity: Spotify Tracks"); svg.append("text") .attr("x", width / 2) .attr("y", height - margin.bottom + 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Acousticness"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", margin.left - 40) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Popularity"); return svg.node(); } 34:T870,chart3 = { //Filter this by genre //Be able to play the song when you click on it //See how different factors correlate with popularity const width = 640; const height = 400; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; spotify_data.forEach(d => { d.track_popularity = +d.track_popularity; d.danceability = +d.danceability; }); const x = d3.scaleLinear() .domain(d3.extent(spotify_data, d => d.track_popularity)).nice() .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(d3.extent(spotify_data, d => d.danceability)).nice() .range([height - marginBottom, marginTop]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add the x-axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)); // Add the y-axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)); svg.append("g") .selectAll("circle") .data(spotify_data) .join("circle") .filter(d => d.track_popularity && d.danceability) .attr("cx", d => x(d.track_popularity)) .attr("cy", d => y(d.danceability)) .attr("r", 3) .attr("fill", "pink") .style("cursor", "pointer") .on("click", function(event, d) { const info = `Track: ${d.track_name}\nArtist: ${d.track_artist}\nPopularity: ${d.track_popularity}\nDanceability: ${d.danceability}`; alert(info); }); // Add x-axis label svg.append("text") .attr("x", width / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Track Popularity"); // Add y-axis label svg.append("text") .attr("x", -height / 2) .attr("y", 10) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Danceability"); return svg.node(); }35:Tb25,chart4 = { spotify_data.forEach(d => { d.track_popularity = +d.track_popularity; }); const genreAvgPopularity = d3.rollup( spotify_data, v => d3.mean(v, d => d.track_popularity), d => d.playlist_genre ); const genreData = Array.from(genreAvgPopularity, ([genre, avgPopularity]) => ({ genre, avgPopularity })); genreData.sort((a, b) => b.avgPopularity - a.avgPopularity); const width = 640; const height = 400; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; const x = d3.scaleBand() .domain(genreData.map(d => d.genre)) .range([marginLeft, width - marginRight]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(genreData, d => d.avgPopularity)]) .nice() .range([height - marginBottom, marginTop]); const color = d3.scaleOrdinal() .domain(genreData.map(d => d.genre)) .range([ "#D84B9B", // Light Pink "#C54B9B", // Medium Pink "#6A0DAD", // Violet "#8A2BE2", // Blue Violet "#D5A6D2", // Light Lilac "#9B30FF", // Purple "#E9A3D1", // Soft Pink "#C71585", // Medium Violet Red "#DA70D6" // Orchid ]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("text") .attr("x", width / 2) .attr("y", marginTop - 10) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Average Track Popularity by Genre"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "middle") .style("font-size", "10px") .attr("dx", "-.8em") .attr("dy", ".15em"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)); // Append bars for each genre with pretty colors svg.append("g") .selectAll("rect") .data(genreData) .join("rect") .attr("x", d => x(d.genre)) // Set the x-position based on the genre .attr("y", d => y(d.avgPopularity)) // Set the y-position based on the average popularity .attr("width", x.bandwidth()) // Set the bar width .attr("height", d => height - marginBottom - y(d.avgPopularity)) // Set the bar height .attr("fill", (d, i) => color(i)); // Use the custom color scale // Add x-axis label svg.append("text") .attr("x", width / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Playlist Genre"); // Add y-axis label svg.append("text") .attr("x", -height / 2) .attr("y", 8) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Average Track Popularity"); return svg.node(); }36:[{"id":"051db24871feef24b27919f74de0c25667ac1dd765db53006942b05af60e8d4eb53b843ba51ea8aa065c66c2265fdb94ca59ebbd6a7b9a88ffc2aa041a964aa4","href":"https://static.observableusercontent.com/files/051db24871feef24b27919f74de0c25667ac1dd765db53006942b05af60e8d4eb53b843ba51ea8aa065c66c2265fdb94ca59ebbd6a7b9a88ffc2aa041a964aa4","name":"spotify_data.csv","type":"text/csv","lastModified":1740684266696.218,"size":20726426}] 2d:{"id":"b01eb889c8f922f0","slug":null,"title":"","thumbnail":"6e37b2e387445689826513dcc8619b9a7688966c542a62c2c724c032e1593d3b","access_level":"public","create_time":"$D2025-02-27T19:23:30.172Z","update_time":"$D2025-03-27T22:33:59.382Z","view_time":null,"first_public_time":"$D2025-02-27T22:37:29.079Z","fork":{"id":"6d7c773a6d3673b0","slug":"d3-scatterplot","title":"D3 scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":493,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c30d10424320efab","login":"srinidhi2","name":"Srinidhi","avatar_url":"https://avatars-next.observableusercontent.com/73a9c1765523b0d7a85d34e57a503f2fa25ddf66d5aff92586fc2a377b327109","tier":null}],"members":[{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"editor"},{"type":"individual","id":"4c7bd80b2b245efd","login":"diego-rivas-lazala","name":"Diego Rivas Lazala","avatar_url":"https://avatars-next.observableusercontent.com/88907c78df3ef5e898a42c31309f31745179fd942f1e108829a3bfa2e3e8548a","tier":null,"role":"editor"},{"type":"individual","id":"41767b968c9f1a74","login":"molly-fei","name":"Molly Fei","avatar_url":"https://avatars-next.observableusercontent.com/205f5b298f1791b4a73547f2c43cadd06103681c67994d04ffd80f09cf390c9f","tier":null,"role":"editor"},{"type":"individual","id":"c30d10424320efab","login":"srinidhi2","name":"Srinidhi","avatar_url":"https://avatars-next.observableusercontent.com/73a9c1765523b0d7a85d34e57a503f2fa25ddf66d5aff92586fc2a377b327109","tier":null,"role":"editor"},{"type":"individual","id":"9d67b1da02a9ff64","login":"stephen-park","name":"Stephen Park","avatar_url":"https://avatars-next.observableusercontent.com/023d4a49ffe878af9b1bdf8fe9116302b410360b6a154e8e78dc46d3cd7d87dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":0,"value":"A4: Srinidhi, Molly, Diego, Stephen\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":376,"value":"chart2_stephen();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"// indicator for showing all album release years on the graph \nviewof showAllYears = Inputs.Toggle({label:\"Show All Years\", value: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"// logic for selecting the year we want to view \nviewof selectedYear = Inputs.Range([d3.min(years),d3.max(years)],\n {\n step: 1,\n label: \"Pick a year: \",\n disabled: showAllYears // disable the slider when we want to see all years\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"**Narrative Elements for Presentations:**\n\nWe used a Spotify dataset with 900 songs, each including audio features, release dates, genres, and popularity scores. Each point in our interactive scatter plot (1965–2020) represents a single track.\n\n- **X-axis:** Danceability \n- **Y-axis:** Popularity \n- **Color:** Genre \n- **Size:** Valence (musical positivity/mood)\n\nUsers can hover over points to see the artist, genre, valence, album cover, and a Spotify link. A **year slider** filters by release date, while a **\"Show All Years\"** toggle displays the full dataset.\n\nThis visualization combines data-rich insights with playful interactivity, encouraging exploration across five decades of music.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":419,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":443,"value":"*Some helper functions for our final visualization are listed below:*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":379,"value":"//calculates a suitable X value for tooltip left position\nfunction tooltipX(eventX) {\n if(eventX > 500){\n return eventX - 270;\n }else{\n return eventX + 70;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"//calculates a suitable Y value for tooltip top position\nfunction tooltipY(scaledY, eventY){\n if(scaledY > 350){\n return eventY - 320;\n }else{\n return eventY - 20;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"years = spotify_data.map(d => new Date(d.track_album_release_date).getFullYear()); // make an array of the years ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"### 📚 Resources\n\n- [Using built-in min and max functions (d3-extent)](https://observablehq.com/@d3/d3-extent) \n- [Lab 3: Interactivity for toggling and range sliders](https://observablehq.com/@columbiaviz-s22/lab-3-interactivity) \n- [Ternary Operator – MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":454,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":449,"value":"### Abandoned Iterations Below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":461,"value":"To control the filtering for the below iterations, utilize the below ShowAllYearsTest toggle and selectedYearTest range selector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":473,"value":"// indicator for showing all album release years on the graph \nviewof showAllYearsTest = Inputs.Toggle({label:\"Show All Years (Test)\", value: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"// logic for selecting the year we want to view \nviewof selectedYearTest = Inputs.Range([d3.min(years),d3.max(years)],\n {\n step: 1,\n label: \"Pick a year: (Test)\",\n disabled: showAllYearsTest // disable the slider when we want to see all years\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"chart2_diego();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"chart2(); // use for grabbing date range, look into filtering by genre maybe a checkbox to the right hand side?, fix tooltip overlapping on the right, fix scores to 2 decimal points in the tooltip ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"chart1();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"Inputs = require(\"@observablehq/inputs@0.7.8/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"spotify_data = await FileAttachment(\"spotify_data.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"