// indicator for showing all album release years on the graph
viewof showAllYearsTest = Inputs.Toggle({label:"Show All Years (Test)", value: true});
// logic for selecting the year we want to view
viewof selectedYearTest = Inputs.Range([d3.min(years),d3.max(years)],
{
step: 1,
label: "Pick a year: ",
disabled: showAllYearsTest // disable the slider when we want to see all years
}
);
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();
}
Inputs = require("@observablehq/inputs@0.7.8/dist/inputs.umd.min.js")
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.
