{ // 1. DYNAMIC DATA LOADING const rawData = await FileAttachment("ListeningHistory@6.csv").csv({ typed: true }); // Format the data and ensure numbers are treated as numbers const formattedData = rawData.map(d => ({ artist: d["Artist"], genre: d["Genre"] || "Unknown", total_listens: +d["Listen Count"], unique_songs_count: +d["Unique Songs"] })); const totalUniqueArtistsInHistory = formattedData.length; // Slice out the TOP 100 artists based on total listen count const top100Data = formattedData .sort((a, b) => b.total_listens - a.total_listens) .slice(0, 100); // Now, sort those top 100 lowest-to-highest by unique songs for clockwise progression const artistSortBySongs = top100Data.sort((a, b) => a.unique_songs_count - b.unique_songs_count); const totalArtistsDisplayed = artistSortBySongs.length; // Central circle percentage: Top 100 vs Total Artist Population const top100Percentage = Math.round((totalArtistsDisplayed / totalUniqueArtistsInHistory) * 100); const pctRatio = top100Percentage / 100; // 2. Dimensions & Centers const width = 1150; const height = 1100; // Shift record leftwards to make room for the right sidebar const centerX = 400; const centerY = 520; const greyCircleRadius = 120; const maxLineLength = 220; // Dynamic Spindle Hole (Area-proportional) const spindleHoleRadius = Math.round(greyCircleRadius * Math.sqrt(pctRatio)); // 3. Scales const threshold = 300; // Break point for outliers const maxListens = d3.max(artistSortBySongs, d => d.total_listens); const lengthScale = d3.scaleLinear() .domain([0, threshold]) .range([0, maxLineLength - 30]); const genres = [...new Set(artistSortBySongs.map(d => d.genre))].sort(); // Modern, vibrant custom palette (no brown!) const modernPalette = [ "#1e90ff", // Dodger Blue "#ff4757", // Coral Red "#2ed573", // Mint Green "#9b5de5", // Bright Purple "#ffaa00", // Warm Gold "#00f5d4", // Teal/Cyan "#f15bb5", // Hot Pink "#3a86c8", // Steel Blue "#ff70a6", // Soft Pink "#70d6ff" // Sky Blue ]; const genreColorScale = d3.scaleOrdinal() .domain(genres) .range(modernPalette); // ========================================== // UPDATED: Wrap SVG in an Interactive Container // ========================================== const container = d3.create("div") .style("position", "relative") .style("width", `${width}px`) .style("height", `${height}px`); const svg = container.append("svg") .attr("width", width) .attr("height", height) .style("background", "#ffffff") .style("font-family", "sans-serif"); // Floating Rich Tooltip Element const tooltip = container.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(17, 17, 17, 0.95)") .style("color", "#ffffff") .style("padding", "10px 14px") .style("border-radius", "8px") .style("box-shadow", "0 10px 25px rgba(0,0,0,0.3)") .style("border", "1px solid rgba(255,255,255,0.15)") .style("font-family", "sans-serif") .style("pointer-events", "none") .style("z-index", "10000"); const defs = svg.append("defs"); // Curved path definition for the text label const curvedLabelRadius = greyCircleRadius - 28; defs.append("path") .attr("id", "textPathCircle") .attr("d", `M ${-curvedLabelRadius - 10},10 A ${curvedLabelRadius},${curvedLabelRadius} 0 1,1 ${curvedLabelRadius + 10},10`); // Poster Title & Subtitle const titleGroup = svg.append("g") .attr("transform", "translate(40, 60)"); titleGroup.append("text") .attr("fill", "#111111") .attr("font-size", "28px") .attr("font-weight", "800") .attr("letter-spacing", "-0.5px") .text("Stats on Wax - My Top 100 Youtube Music Artists"); titleGroup.append("text") .attr("y", 24) .attr("fill", "#666666") .attr("font-size", "14px") .attr("font-weight", "400") .text(`A radial visualization of 6 months of listening history, showing my top ${totalArtistsDisplayed} artists out of ${totalUniqueArtistsInHistory} total unique artists.`); // Main container group for the record itself const recordGroup = svg.append("g") .attr("transform", `translate(${centerX}, ${centerY})`); // 5. Draw Vinyl Canvas & Underlying Grooves const physicalOuterEdge = greyCircleRadius + maxLineLength + 20; // Outer vinyl body recordGroup.append("circle") .attr("r", physicalOuterEdge) .attr("fill", "#111111") .attr("stroke", "#eee") .attr("stroke-width", 1) .style("filter", "drop-shadow(0px 10px 20px rgba(0,0,0,0.1))"); // Vinyl Grooves for (let r = greyCircleRadius + 2; r < physicalOuterEdge - 10; r += 5) { recordGroup.append("circle") .attr("r", r) .attr("fill", "none") .attr("stroke", "#222222") .attr("stroke-width", 0.7) .attr("opacity", 0.6); } // Draw Central Record Label (Light Grey Ring) recordGroup.append("circle") .attr("r", greyCircleRadius) .attr("fill", "#282828"); // Central Spindle Hole (White center circle) recordGroup.append("circle") .attr("r", spindleHoleRadius) .attr("fill", "#ffffff") .attr("stroke", "#dddddd") .attr("stroke-width", 1); // Central Percentage & Subtext Callout const centerMetricGroup = recordGroup.append("g"); const baseFontSize = spindleHoleRadius < 40 ? 12 : (spindleHoleRadius < 55 ? 13 : 15); centerMetricGroup.append("text") .attr("x", 0) .attr("y", -8) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "#111111") .attr("font-size", `${baseFontSize}px`) .attr("font-weight", "bold") .text(`${top100Percentage}%`); centerMetricGroup.append("text") .attr("x", 0) .attr("y", 6) .attr("text-anchor", "middle") .attr("fill", "#777777") .attr("font-size", `${baseFontSize * 0.55}px`) .attr("font-weight", "bold") .text("OF TOTAL"); centerMetricGroup.append("text") .attr("x", 0) .attr("y", 15) .attr("text-anchor", "middle") .attr("fill", "#777777") .attr("font-size", `${baseFontSize * 0.55}px`) .attr("font-weight", "bold") .text("ARTISTS"); // Curved Header Label recordGroup.append("text") .attr("font-size", "7.5px") .attr("font-weight", "bold") .attr("letter-spacing", "1.5px") .attr("fill", "#555555") .append("textPath") .attr("xlink:href", "#textPathCircle") .attr("startOffset", "50%") .attr("text-anchor", "middle") .text("NUMBER OF UNIQUE SONGS"); // 6. Draw 8 Rotational Labels const tickIndices = Array.from({length: 8}, (_, i) => Math.floor(totalArtistsDisplayed * (i / 8))); tickIndices.forEach((idx) => { const artist = artistSortBySongs[idx]; if (!artist) return; const angle = (idx / totalArtistsDisplayed) * 2 * Math.PI; const angleDegrees = angle * 180 / Math.PI; recordGroup.append("line") .attr("x1", (greyCircleRadius - 8) * Math.sin(angle)) .attr("y1", -(greyCircleRadius - 8) * Math.cos(angle)) .attr("x2", (greyCircleRadius + 2) * Math.sin(angle)) .attr("y2", -(greyCircleRadius + 2) * Math.cos(angle)) .attr("stroke", "#444444") .attr("stroke-width", 1); const textRadius = greyCircleRadius - 16; const labelX = textRadius * Math.sin(angle); const labelY = -textRadius * Math.cos(angle); const shouldFlip = angleDegrees > 90 && angleDegrees < 270; const finalRotation = shouldFlip ? angleDegrees + 90 + 180 : angleDegrees + 90; recordGroup.append("text") .attr("transform", `translate(${labelX}, ${labelY}) rotate(${finalRotation})`) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "#888888") .attr("font-size", "10px") .attr("font-family", "monospace") .text(artist.unique_songs_count); }); // ========================================== // ESTABLISH HONEST DYNAMIC CALLOUT REGISTRY // ========================================== const calloutQueue = []; // 1. Top Artist overall const topArtistIdx = d3.maxIndex(artistSortBySongs, d => d.total_listens); const topArtist = artistSortBySongs[topArtistIdx]; calloutQueue.push({ artist: topArtist, qualification: "Top Artist" }); // 2. Most Unique Songs overall const mostUniqueArtist = artistSortBySongs[totalArtistsDisplayed - 1]; if (mostUniqueArtist && mostUniqueArtist !== topArtist) { calloutQueue.push({ artist: mostUniqueArtist, qualification: "Most Unique Songs" }); } // 3. One-Hit Wonder (1 song only, highest listens) const oneHitWonders = artistSortBySongs.filter(d => d.unique_songs_count === 1 && d.total_listens > 15); const topOneHitWonder = oneHitWonders.length > 0 ? oneHitWonders.reduce((max, d) => d.total_listens > max.total_listens ? d : max) : null; if (topOneHitWonder && topOneHitWonder !== topArtist && topOneHitWonder !== mostUniqueArtist) { calloutQueue.push({ artist: topOneHitWonder, qualification: "One Hit Wonder" }); } // 4. Genre Spotlights (Strictly only TRUE genre #1s) genres.forEach(g => { const genrePool = artistSortBySongs.filter(d => d.genre === g); if (genrePool.length > 0) { const trueBestInGenre = genrePool.reduce((max, d) => d.total_listens > max.total_listens ? d : max); if ( trueBestInGenre !== topArtist && trueBestInGenre !== mostUniqueArtist && trueBestInGenre !== topOneHitWonder ) { calloutQueue.push({ artist: trueBestInGenre, qualification: `Most Listened in ${g}` }); } } }); // 7. Draw Artist Rays (With Outlier Zig-Zag Truncation) artistSortBySongs.forEach((artist, index) => { const angle = (index / totalArtistsDisplayed) * 2 * Math.PI; const uX = Math.sin(angle); const uY = -Math.cos(angle); const vX = Math.cos(angle); const vY = Math.sin(angle); let endX, endY; if (artist.total_listens <= threshold) { // Normal Line const lineLength = lengthScale(artist.total_listens); const x1 = greyCircleRadius * uX; const y1 = greyCircleRadius * uY; endX = (greyCircleRadius + lineLength) * uX; endY = (greyCircleRadius + lineLength) * uY; recordGroup.append("line") .attr("x1", x1).attr("y1", y1) .attr("x2", endX).attr("y2", endY) .attr("stroke", genreColorScale(artist.genre)) .attr("stroke-width", 2.5) .attr("stroke-linecap", "round") .style("pointer-events", "none"); // Passes pointer events to our invisible hover targets } else { // Broken Zig-Zag Line for Outliers const baseLength = lengthScale(threshold); const breakPointRadius = greyCircleRadius + baseLength; recordGroup.append("line") .attr("x1", greyCircleRadius * uX).attr("y1", greyCircleRadius * uY) .attr("x2", breakPointRadius * uX).attr("y2", breakPointRadius * uY) .attr("stroke", genreColorScale(artist.genre)) .attr("stroke-width", 2.5) .style("pointer-events", "none"); const zWidth = 3; const zStep = 3; const p1X = breakPointRadius * uX; const p1Y = breakPointRadius * uY; const p2X = (breakPointRadius + zStep) * uX - zWidth * vX; const p2Y = (breakPointRadius + zStep) * uY - zWidth * vY; const p3X = (breakPointRadius + zStep * 2) * uX + zWidth * vX; const p3Y = (breakPointRadius + zStep * 2) * uY + zWidth * vY; const p4X = (breakPointRadius + zStep * 3) * uX; const p4Y = (breakPointRadius + zStep * 3) * uY; const zigPath = d3.path(); zigPath.moveTo(p1X, p1Y); zigPath.lineTo(p2X, p2Y); zigPath.lineTo(p3X, p3Y); zigPath.lineTo(p4X, p4Y); recordGroup.append("path") .attr("d", zigPath.toString()) .attr("fill", "none") .attr("stroke", genreColorScale(artist.genre)) .attr("stroke-width", 2.5) .style("pointer-events", "none"); // Extension segment const excess = artist.total_listens - threshold; const maxExcess = maxListens - threshold; const excessScale = d3.scaleLinear().domain([0, maxExcess]).range([15, 35]); const extLength = excessScale(excess); const startContX = (breakPointRadius + zStep * 3) * uX; const startContY = (breakPointRadius + zStep * 3) * uY; endX = (breakPointRadius + zStep * 3 + extLength) * uX; endY = (breakPointRadius + zStep * 3 + extLength) * uY; recordGroup.append("line") .attr("x1", startContX).attr("y1", startContY) .attr("x2", endX).attr("y2", endY) .attr("stroke", genreColorScale(artist.genre)) .attr("stroke-width", 2.5) .attr("stroke-linecap", "round") .style("pointer-events", "none"); } // ========================================== // UPDATED: Invisible Hover targets // Draws a transparent 8px line on top of the ray to detect mouse-over easily // ========================================== recordGroup.append("line") .attr("x1", greyCircleRadius * uX) .attr("y1", greyCircleRadius * uY) .attr("x2", endX) .attr("y2", endY) .attr("stroke", "transparent") .attr("stroke-width", 8) // Generous mouse-hover width .attr("stroke-linecap", "round") .style("cursor", "pointer") .on("mouseover", function() { // Highlight the hovered line by making its visible counterpart (the previous sibling) thicker d3.select(this.previousSibling).attr("stroke-width", 4.5); tooltip.style("visibility", "visible"); }) .on("mousemove", function(event) { // Calculate coordinates relative to parent container const [mouseX, mouseY] = d3.pointer(event, container.node()); tooltip .style("left", `${mouseX + 15}px`) .style("top", `${mouseY - 15}px`) .html(`

${artist.genre}

${artist.artist}

${artist.total_listens} listens • ${artist.unique_songs_count} unique songs

`); }) .on("mouseout", function() { // Restore standard thickness and hide tooltip d3.select(this.previousSibling).attr("stroke-width", 2.5); tooltip.style("visibility", "hidden"); }); // Save end points to coordinates mapping for sidebar lines const matchedCallout = calloutQueue.find(c => c.artist === artist); if (matchedCallout) { matchedCallout.rayX = centerX + endX; matchedCallout.rayY = centerY + endY; } }); // ========================================== // SIDEBAR CONTAINER (Clean, structured list on the Right Side) // ========================================== const sidebarX = 820; const sidebarYStart = 150; const sidebarRowHeight = 78; const sidebarGroup = svg.append("g") .attr("transform", `translate(${sidebarX}, ${sidebarYStart})`); sidebarGroup.append("text") .attr("fill", "#111111") .attr("font-size", "14px") .attr("font-weight", "800") .attr("letter-spacing", "0.5px") .text("ARTIST SPOTLIGHTS"); calloutQueue.forEach((c, idx) => { const targetY = 35 + idx * sidebarRowHeight; const card = sidebarGroup.append("g") .attr("transform", `translate(0, ${targetY})`); // Standardized Line 1: UpperCase Qualification colored by Genre card.append("text") .attr("fill", genreColorScale(c.artist.genre)) .attr("font-size", "9.5px") .attr("font-weight", "800") .attr("letter-spacing", "0.5px") .text(c.qualification.toUpperCase()); // Standardized Line 2: Artist Name card.append("text") .attr("y", 16) .attr("fill", "#111111") .attr("font-size", "14px") .attr("font-weight", "bold") .text(c.artist.artist); // Standardized Line 3: Listening Metrics card.append("text") .attr("y", 30) .attr("fill", "#666666") .attr("font-size", "10.5px") .text(`${c.artist.total_listens} listens • ${c.artist.unique_songs_count} unique songs`); // Dynamic clean pointer lines from the card to the precise ray endpoint on the vinyl const lineGenerator = d3.linkHorizontal()({ source: [c.rayX, c.rayY], target: [sidebarX - 10, sidebarYStart + targetY + 12] }); svg.append("path") .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", genreColorScale(c.artist.genre)) .attr("stroke-width", 0.8) .attr("stroke-dasharray", "2,3") .attr("opacity", 0.75); }); // ========================================== // Legend Layout (Polished Bottom Segment) // ========================================== const legendYStart = 1000; const legendGroup = svg.append("g") .attr("transform", `translate(40, ${legendYStart})`); // --- Column 1: Genre Color Key --- const genreLegend = legendGroup.append("g"); genreLegend.append("text") .attr("fill", "#111111") .attr("font-size", "12px") .attr("font-weight", "bold") .text("GENRE"); const columnWidth = 140; const rowSpacing = 20; genres.forEach((genre, idx) => { const col = idx % 3; const row = Math.floor(idx / 3); const item = genreLegend.append("g") .attr("transform", `translate(${col * columnWidth}, ${20 + row * rowSpacing})`); item.append("circle") .attr("cx", 5) .attr("cy", -4) .attr("r", 5.5) .attr("fill", genreColorScale(genre)); item.append("text") .attr("x", 15) .attr("fill", "#444444") .attr("font-size", "10px") .text(genre); }); // --- Column 2: Simplified Ray Length Scale --- const scaleLegend = legendGroup.append("g") .attr("transform", "translate(460, 0)"); scaleLegend.append("text") .attr("fill", "#111111") .attr("font-size", "12px") .attr("font-weight", "bold") .text("RAY LENGTH"); const sampleGroup = scaleLegend.append("g") .attr("transform", `translate(0, 40)`); const sampleLineLength = lengthScale(100); sampleGroup.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", sampleLineLength) .attr("y2", 0) .attr("stroke", "#444444") .attr("stroke-width", 3) .attr("stroke-linecap", "round"); sampleGroup.append("line") .attr("x1", 0) .attr("y1", -5) .attr("x2", 0) .attr("y2", 5) .attr("stroke", "#888888"); sampleGroup.append("line") .attr("x1", sampleLineLength) .attr("y1", -5) .attr("x2", sampleLineLength) .attr("y2", 5) .attr("stroke", "#888888"); sampleGroup.append("text") .attr("x", sampleLineLength / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("fill", "#666666") .attr("font-size", "10px") .attr("font-family", "monospace") .text("100 listens"); // Outlier broken key entry const outlierGroup = scaleLegend.append("g") .attr("transform", `translate(140, 40)`); outlierGroup.append("line") .attr("x1", 0).attr("y1", 0) .attr("x2", 15).attr("y2", 0) .attr("stroke", "#444444") .attr("stroke-width", 3); const zigPath = d3.path(); zigPath.moveTo(15, 0); zigPath.lineTo(17.5, -3); zigPath.lineTo(20, 3); zigPath.lineTo(22.5, 0); outlierGroup.append("path") .attr("d", zigPath.toString()) .attr("fill", "none") .attr("stroke", "#444444") .attr("stroke-width", 3); outlierGroup.append("line") .attr("x1", 22.5).attr("y1", 0) .attr("x2", 35).attr("y2", 0) .attr("stroke", "#444444") .attr("stroke-width", 3) .attr("stroke-linecap", "round"); outlierGroup.append("text") .attr("x", 17.5) .attr("y", 20) .attr("text-anchor", "middle") .attr("fill", "#e06666") .attr("font-weight", "bold") .attr("font-size", "10px") .attr("font-family", "sans-serif") .text(">300 listens (Break)"); // Return the container DOM node (including both SVG and floating tooltip) return container.node(); }