27:null 28:["$","title",null,{"children":"The Tortured Data Viz Department | kelsey-n | Observable"}] 2d:T7182,chartTS = { let light = Math.random() >= 0.5 // 50/50 chance light/dark on first load const { radialScale, colorfulDarkConcentricCircles, showEmojis, emojisOutsideCenter, designValsLight, designValsDark, width, height, startingOpacity, innerRadius, outerRadius, colorRange, colorsLight, colorsDark, circleRad, outerArcThickness, outerArcInitialGap, outerArcGap, outerArcThicknessLegend, outerArcInitialGapLegend, outerArcGapLegend, numConcentricCircles, maxPerBand, trackGap, outerYLimit, needleBgWidth, needleXTranslate, x, y, yLegend, // color } = constants; const { arcGenerator, arcGeneratorIntroText, arcGeneratorNeedle, arcGeneratorIntroTextClippath } = arcGenerators // album colors light to dark: edece9, a79e8f, 7d7c78, #3b3a36 let designVals = light === true ? designValsLight : designValsDark let colors = light === true ? colorsLight : colorsDark let color = d3.scaleOrdinal() .domain(colorRange) .range(light === true ? colorsLight : colorsDark) .unknown("#ccc"); let themeEmojis = { "lost love": light ? '🥀' : '💔', //(broken heart vs wilted flower) "fame's impact": light ? '📸' : '🌟', "escape": '🚪', // '🏃', (person running vs door) "desire": '🔥', "toxic love": '☠️', // '🧪', // '☠', "resilience": '💪', "true love": light ? '🖤' : '🤍', "playfulness": '😉', "reflection": '🪞', } let firstUserMouseOver = false // ====================================== Data ====================================== // Stack the data into series by emotion const series = d3.stack().keys(colorRange)(data) const expandedSeries = expandStackedData(series); // ====================================== Scales ====================================== const xLegendSingability = d3.scaleBand() .domain(legendSingabilityData.map(d => d.Song)) .range([Math.PI * .1, (2 * Math.PI) - (Math.PI * .2)]) // .range([0, 2 * Math.PI]) .align(0); const yLegendSingability = radialScale ? d3.scaleRadial() : d3.scaleLinear() yLegendSingability .range([0, 18]) .domain([0, maxPerBand * colorRange.length + 5]); // max value times the number of bands // Concentric color scale depends on designVals const concentricColorScale = d3.scaleOrdinal() .domain(d3.range(1, 5)) .range(colors) .unknown(designVals.gridLines); // ====================================== Create SVG ====================================== const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif") // const svg = d3.create("svg") // .attr("style", "width: min(90vw, 95vh); height: min(90vw, 95vh)") // .append("svg") // .attr("width", width) // .attr("height", height) // .attr("viewBox", [-width / 2, -height / 2, width, height]) // .attr("style", "width: 100%; height: auto; font: 10px sans-serif") // ============================== Parent groups for z-indexing ======================== const svgBg = svg.append('g').attr('class', 'svg-bg-g') const recordBg = svg.append('g').attr('class', 'record-bg-g') const starsRoughBg = svg.append('g').attr('class', 'stars-rough-bg-g') const starsBg = svg.append('g').attr('class', 'stars-bg-g') const recordCenter = svg.append('g').attr('class', 'record-center-g') const legendStarRoughBg = svg.append('g').attr('class', 'legend-stars-rough-bg-g') const legendStarBg = svg.append('g').attr('class', 'legend-stars-bg-g') const legendLineRoughBg = svg.append('g').attr('class', 'legend-line-rough-bg-g') const recordNeedle = svg.append('g').attr('class', 'record-needle-g') // ====================================== Box shadows ====================================== addRecordDropShadow(svg) // Box shadow for record addNeedleDropShadow(svg) // Box shadow for needle // ====================================== Background of record ====================================== recordBg.append("g") .attr("text-anchor", "middle") .selectAll("g").data([outerYLimit + (radialScale ? 2.8 : 2)]) .enter() .append("g") .append("circle") .attr('id', 'record-circle') .attr("fill", designVals.recordColor) .attr('stroke-width', '3px') .attr("r", y) .attr('filter', 'url(#dropshadow)') // ====================================== Outline slice for song ====================================== // ====================================== For mouseover events ====================================== // IF MOVING, MOVE ARC3 HERE AS WELL: // For outlining the slice for each song const arc3 = d3.arc() .innerRadius(innerRadius - 20) .outerRadius(d => y(outerYLimit + 3)) .startAngle(d => x(d['Song'])) .endAngle(d => x(d['Song']) + x.bandwidth()) // .endAngle(d => x(d['Song']) + x.bandwidth() / 2) .padAngle(0) // i had 0.01 .padRadius(innerRadius) svg.append("g") .selectAll(".outline-path") .data(data) .join("path") .attr('class', 'outline-path') .attr("fill", 'white') .attr('opacity', 0) .on('mouseover', (event, d) => { mouseOver(event, d, recordBg, designVals, light, currentFunctionIndex, functions, timeoutId, color) firstUserMouseOver = true }) .on('mouseout', (event, d) => mouseOut(event, d)) .attr("d", arc3) // ================================ Singability needle =================================== const recordNeedleGroup = recordNeedle.append("g") .selectAll() .data([null]) .join("g") .attr('filter', 'url(#dropshadow-needle-2)') .attr("transform", (d, i, nodes) => `translate(${width/2 - needleXTranslate - 5}, ${-height/2 + 5})`) addSingabilityLegendNeedle(recordNeedleGroup, light, designVals, yLegendSingability, xLegendSingability) // Outlines for singability arcs for mouseover // IF MOVING, MOVE ARCSINGABILITYLEGEND TOO // For outlining the slice for each singability legend const arcSingabilityLegend = d3.arc() .innerRadius(15) .outerRadius(42) .startAngle(d => xLegendSingability(d['Song'])) .endAngle(d => xLegendSingability(d['Song']) + xLegendSingability.bandwidth()) // .endAngle(d => x(d['Song']) + x.bandwidth() / 2) .padAngle(0.3) // i had 0.01 // .padRadius(innerRadius) .cornerRadius(1) recordNeedleGroup.append("g") .selectAll(".outline-path-singability-legend") .data(legendSingabilityData) .join("path") .attr('class', 'outline-path-singability-legend') .attr("fill", 'white') .attr('transform', `translate(${needleXTranslate / 1.3 + 7}, ${height / 16})`) .attr('opacity', 0) .style('cursor', 'pointer') .on('mouseover', (event, d) => { // Change legend item opacity d3.selectAll('.singability-number,.singability-legend-arc') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.Singability === d.Singability) .style('opacity', 1) d3.selectAll('.singability-legend-text') .text(`${d.Singability}/3 (${singabilityCategories[d.Singability]})`) .each(function(d, i) { wrap_text(d3.select(this), singabilityWrap) }) mouseOverLegend(event, d, light, recordBg, designVals, 'singability', currentFunctionIndex, functions, timeoutId) firstUserMouseOver = true }) .on('mouseout', () => { clearSingabilityLegendHover() mouseOutLegend() }) .attr("d", arcSingabilityLegend) // ====================== Center circle & center hole of record ======================= addRecordCenter(recordCenter, light, designVals) // ================= Concentric circles / gridlines, both light and dark ====================== addConcentricGridLines(recordBg, designVals, y, concentricColorScale) // ==================== Arcs to represent data ======================= addEmotionArcs(recordBg, expandedSeries, color, designVals) // Main (emotion) arcs addSingabilityArcs(recordBg, designVals) // Outer (singability) arcs // ====================================== Small circles in center ====================================== addProducerCircles(recordCenter, designVals) // Symbols for producers // ====================================== Stars ====================================== // Use Rough.js to create a hand-drawn bg for stars const rc2 = rough.svg(svg); addTSWriterStars(starsRoughBg, starsBg, rc2, light, designVals) // ====================================== Song titles ====================================== addSongTitles(recordBg, designVals, themeEmojis) // ====================================== ROTATING TEXT ON HOVER ====================================== addCurvedText(recordBg, designVals) // Rotating text, as well as stationary lyrics // ================ Symbol legend on center for producer & writer credits ===================== addProducerWriterCredits(recordCenter, legendStarRoughBg, legendStarBg, rc2, designVals, light) // ================ Button to clear selection on mobile ===================== addClearButtonOnMobile(recordCenter, colors, designVals, light) // ====================================== Emoji legend ====================================== const combinedThemeLegendText = themeLegendText.concat(Object.entries(themeEmojis).map(([key, value]) => `${value}: ${key} (${data.filter((d, idx) => d.Theme === key).length}${key === 'lost love' ? ' songs' : ''})`)); // addThemeLegendText(recordBg, light, designVals, combinedThemeLegendText, currentFunctionIndex, functions, timeoutId) const emojiLegendText = recordBg.append("text") // .attr("x", -width / 2 + 25) // Set the x position of the whole text element .attr("y", -height / 2 + 25) // Set the starting y position .attr("fill", designVals.recordColor) // .attr("font-size", "16px") .attr("class", "dekko") .classed('emoji-leg-text', true) .attr("alignment-baseline", "hanging") .selectAll(".emoji-leg-text-tspan") .data(combinedThemeLegendText) .join('tspan') .classed("emoji-leg-text-tspan", true) .classed('emoji-legend-item', d => d.startsWith("&#") || d.includes('toxic') ? true : false) .attr("font-size", d => d==="Song Themes" ? "22px" : "16px") .attr("x", -width / 2 + 10) // Set the x position for each tspan (line) .attr("dy", function(d, i) { return i ? "1.2em" : 0}) // Add line spacing after the first line .html(function(d) { return d; }); emojiLegendText.filter(d => d.startsWith("&#") || d.includes('toxic')) .style('cursor', 'pointer') .on('mouseover', function(event, d) { // Change legend item opacity d3.selectAll('.emoji-legend-item').transition().duration(100).style('opacity', 0.2); d3.select(this).transition().duration(100).style('opacity', 1); mouseOverLegend(event, d, light, recordBg, designVals, 'theme', currentFunctionIndex, functions, timeoutId) firstUserMouseOver = true }) .on('mouseout', function() { mouseOutLegend() }); // ====================================== Intro animation ====================================== playIntroAnimation(recordBg, y(outerYLimit + (radialScale ? 2.8 : 2)) * 2, designVals) // For selecting random row in function4 // Stack the LEGEND data into series by emotion const legendSeries = d3.stack().keys(colorRange)(legendData) const expandedLegendSeries = expandStackedData(legendSeries) // Define your functions function function1() { clearColorLegendHover() mouseOutLegend(false, 'emotion', startingOpacity) setTimeout(() => { rotateIntroText(); }); //, 1000 Delay of 1000ms (1 second) // Animated intro lamentation text at smaller radius // rotateIntroText() // SHOW rotating text d3.select('.intro-anim-text-path') .transition().duration(100) .style('opacity', 1) } function function2() { // HIDE rotating text d3.select('.intro-anim-text-path').interrupt() d3.select('.intro-anim-text-path') .style('opacity', 0) // Hover on random theme const emojiData = combinedThemeLegendText.filter(d => d.startsWith("&#") || d.includes('toxic')) const randomRow = getRandomRow(emojiData) // Highlight legend item d3.selectAll('.emoji-legend-item').transition().duration(100).style('opacity', 0.2).filter(d => d === randomRow).style('opacity', 1) // Highlight songs mouseOverLegend(null, randomRow, light, recordBg, designVals, 'theme', currentFunctionIndex, functions, timeoutId, null, false, true, startingOpacity) } function function3() { mouseOutLegend(false, '', startingOpacity) // Hover on random song mouseOver(null, getRandomRow(data), recordBg, designVals, light, currentFunctionIndex, functions, timeoutId, color, startingOpacity, true) } function function4() { mouseOut(null, null, true, startingOpacity) // Hover on random color legend const randomRow = getRandomRow(expandedLegendSeries) mouseOverLegend(null, randomRow, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color, false, true, startingOpacity) // ? TODO: PUT IN SEPARATE FUNCTION AND CALL HERE AND IN MOUSEOVER COLORLEG const duration0 = 0 d3.selectAll('.main-arcs-g') .transition().duration(duration0) .style('opacity', startingOpacity) .filter(r => r.key === randomRow.key) .style('opacity', 1) d3.selectAll('.legend-path-g') .transition().duration(duration0) .style('opacity', startingOpacity) .filter(r => r.key === randomRow.key) .style('opacity', 1) d3.selectAll('.legend-text') .transition().duration(duration0) .style('opacity', startingOpacity) .filter(r => r === randomRow.key) .style('opacity', 1) // Change opacity of rough.js paths d3.selectAll('.rough-g path') // .transition().duration(100) .attr('opacity', startingOpacity) d3.selectAll(`.rough-g g path[stroke='${color(randomRow.key)}']`) // .transition().duration(100) .attr('opacity', 1) } // Array of functions to run in sequence const functions = [function1, function2, function3, function4]; // Array of delays corresponding to each function (in milliseconds) const delays = [3000, 15000, 3000, 3000]; // Variable to keep track of the current function index let currentFunctionIndex = 0; // Flag to track the first run // let isFirstRun = true; let timeoutId; // // WITH INTERVAL: Function to run the next function in the sequence // function runNextFunction() { // functions[currentFunctionIndex](); // currentFunctionIndex = (currentFunctionIndex + 1) % functions.length; // } // // Set interval to run the functions with a delay (e.g., 2000ms) // const interval = setInterval(runNextFunction, delays[currentFunctionIndex]); // Function to run the next function in the sequence with dynamic delays function runNextFunction() { // Run the current function functions[currentFunctionIndex](); // Set the index for the next function currentFunctionIndex = (currentFunctionIndex + 1) % functions.length; // Set the timeout for the next function based on the delays array timeoutId = setTimeout(runNextFunction, delays[currentFunctionIndex]); } // Start the sequence with the delay for the first function timeoutId = setTimeout(runNextFunction, delays[0]); // Delay 1 second before starting rotation of the intro text // setTimeout(() => { // rotateIntroText(); // }, 1000); // Delay of 1000ms (1 second) // ======================= LIGHT/DARK SWITCH ============================== const switchGroup = recordBg.append('g') .attr('transform', `translate(${-width * 0.45}, ${height * 0.4})`) .style('cursor', 'pointer') .on('click', function() { if (firstUserMouseOver) { light = !light // // Clear any possible user selection if on mobile: // mouseOut(null, null) // mouseOutLegend('emotion') if (window.matchMedia("(pointer: coarse)").matches) { // Code to run if the user is on a touchscreen device d3.selectAll('.clear-button-mobile') // Hide clear button .style("opacity", 0) .style("pointer-events", "none") // Clear any possible user selection if on mobile: mouseOut(null, null, true) mouseOutLegend(true, 'emotion') clearColorLegendHover(0) // Delay briefly before starting rotation of the intro text setTimeout(() => { updateChart(svg, starsRoughBg, legendStarRoughBg, legendLineRoughBg, recordCenter, light, rc2, concentricColorScale, recordBg, currentFunctionIndex, functions, timeoutId, firstUserMouseOver) }, 10); } else { // Code to run if the user is not on a touchscreen device mouseOut(null, null) mouseOutLegend(false, 'emotion') updateChart(svg, starsRoughBg, legendStarRoughBg, legendLineRoughBg, recordCenter, light, rc2, concentricColorScale, recordBg, currentFunctionIndex, functions, timeoutId, firstUserMouseOver) } let colors = light === true ? colorsLight : colorsDark d3.selectAll('.rough-g').remove() const roughG = legendLineRoughBg.append('g').attr('class', 'rough-g') // Loop over underlineLegendData, create a line & append line to the svg for (const [index, d] of underlineLegendData.entries()) { const initialTransform = radialScale ? {x: width * 0.26, y: height * 0.24} : {x: width * 0.27, y: height * 0.25} let r = innerRadius * 0.7 + (((outerRadius * 0.7) - (innerRadius * 0.7)) / 12 * multiples[index]) const theta = x('loml') + (index > 1 ? x.bandwidth() : 0) - Math.PI / 2 const {xPos, yPos} = polarToCartesian(r, theta) // const line = rc.line(initialTransform.x + d.x1, initialTransform.y, d.x2, d.y2, { const initialPos = {x: initialTransform.x + xPos, y: initialTransform.y + yPos + d.y} const line = rc.line(initialPos.x + d.x1, initialPos.y, initialPos.x + d.x2, initialPos.y, { roughness: index > 1 ? 1 : 2, // Adjust the roughness to make it more or less sketchy strokeWidth: 2, stroke: colors[index], strokeOpacity: 0.2, bowing: 3 }); // line.attr('class', 'legend-text') roughG.node().appendChild(line) } } }) switchGroup.append('rect') .attr('width', 68) .attr('height', 28) .attr('rx', '15px') .attr('class', 'switch-bg') .attr('fill', designVals.switchBg) .attr('stroke', designVals.recordColor) .style('cursor', 'pointer') .on('mouseover', function() { if (firstUserMouseOver) { d3.select(this).attr('stroke-width', 2) } }) .on('mouseout', function() { d3.select(this).attr('stroke-width', 1) }) switchGroup.append('rect') .attr('width', 2) .attr('height', 14) .attr('x', 32.5) .attr('y', 7) .attr('rx', '1px') .attr('class', 'switch-separator') .attr('fill', designVals.recordColor) .attr('opacity', 0.6) .style('pointer-events', 'none') switchGroup.append('image') .classed('record-img', true) .attr('xlink:href', recordImage) .attr('width', 25) .attr('height', 25) .attr('x', 39.5) .attr('y', 1.5) .attr('opacity', light ? startingOpacity + 0.1 : 1) .style('pointer-events', 'none') switchGroup.append('text') .classed('cd-img', true) .html('💿') .attr('font-size', 22) .attr('y', 22) .attr('x', 4) .style('pointer-events', 'none') .attr('opacity', light ? 1 : startingOpacity + 0.1) // ====================================== Color legend ====================================== // addColorLegend(svg, recordBg, designVals, light, expandedLegendSeries, currentFunctionIndex, functions, timeoutId, colors) const andWeFindData = [ " ", "Song Mood", " " ]; recordBg.append("text") // .attr("x", width / 2 - 25) // Set the x position of the whole text element .attr("y", height * 0.25) // Set the starting y position .attr("fill", designVals.recordColor) // .attr("font-size", "16px") .attr("class", "dekko") .classed('color-leg-text', true) .attr("alignment-baseline", "hanging") .attr('text-anchor', 'end') .selectAll("tspan") .data(andWeFindData) .enter() .append("tspan") .attr("font-size", d => d==="Song Mood" ? "22px" : "16px") .attr("x", width / 2 - 15) // Set the x position for each tspan (line) .attr("dy", function(d, i) { return i ? "1.2em" : 0}) // Add line spacing after the first line .html(function(d) { return d; }); // Transform for color legend text const multiples = radialScale ? [2.5, 5, 6.8, 8.5] : [2, 4, 5.5, 7] // Mini version of arcs // WHEN MOVING TO FUNCTION, MOVE ARC4 AS WELL // For legend arcs const arc4 = d3.arc() .innerRadius(d => yLegend(d.startValue)) .outerRadius(d => yLegend(d.endValue)) .startAngle(d => x(d['Song'])) .endAngle(d => x(d['Song']) + x.bandwidth()) .padAngle(0.03) // i had 0.01 .padRadius(20) recordBg.append("g") .selectAll() .data(expandedLegendSeries) .join("g") .attr("fill", d => color(d.key)) .style('cursor', 'pointer') .attr('class', 'legend-path-g') .attr('transform', radialScale ? `translate(${width * 0.26}, ${height * 0.24})` : `translate(${width * 0.27}, ${height * 0.25})`) .call(g => g.selectAll(".legend-path") .data(d => d.values) .join("path") .attr('class', 'legend-path') .attr("d", arc4) .attr('stroke', designVals.recordColor) .attr('stroke-width', '0.5px') .attr('stroke-opacity', 0.5) // Draw only if there's a segment .style("display", d => d.endValue > d.startValue ? "block" : "none") ) // Hide if no segment) // Text that only has to be appended once recordBg.append("g") .selectAll() // .data(expandedLegendSeries) .data([null]) .join("g") // .attr("fill", d => color(d.key)) .attr('transform', radialScale ? `translate(${width * 0.26}, ${height * 0.24})` : `translate(${width * 0.27}, ${height * 0.25})`) .call(g => g.append('image') .classed('album-avg-vector', true) .attr('xlink:href', light ? vectorWhite : vectorDark) .attr('x', radialScale ? 54 : 58) .attr('y', radialScale ? 145 : 130)) .call(g => g.selectAll('.legend-text') .data(colorRange) .join('text') .classed('legend-text', true) .attr("font-size", "13px") .classed("dekko", true) .attr("alignment-baseline", (d, i) => i > 1 ? "hanging" : 'auto') .attr('fill', designVals.recordColor) .html(d => `${d}–${legendData[0][d]}/3`) .attr('text-anchor', (d, i) => i > 1 ? 'end' : 'start') .attr('dx', (d, i) => i > 1 ? '-0.2em' : '0.2em') .attr('transform', function(d, i) { let r = innerRadius * 0.7 + (((outerRadius * 0.7) - (innerRadius * 0.7)) / 12 * multiples[i]) const theta = x('loml') + (i > 1 ? x.bandwidth() : 0) - Math.PI / 2 const {xPos, yPos} = polarToCartesian(r, theta) return `translate(${xPos}, ${yPos})` }) .style('cursor', 'pointer') .on('mouseover', function(event, d) { mouseOverLegend(event, d, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color, true) firstUserMouseOver = true colorLegendHover(d, color, true) }) .on('mouseout', function() { clearColorLegendHover() mouseOutLegend(false, 'emotion') }) ) .call(g => g.append('text') .attr("y", radialScale ? 173 : 165) // Set the starting y position .attr("fill", designVals.recordColor) .attr("font-size", "12.5px") .attr("class", "dekko") .classed('album-avg-text', true) // .attr("alignment-baseline", "hanging") .attr('text-anchor', 'end') .selectAll("tspan") .data(['Album average.', 'Each song rated', 'the same way']) .enter() .append("tspan") .attr("x", radialScale ? 50 : 55) // Set the x position for each tspan (line) .attr("dy", function(d, i) { return i ? "1.2em" : 0}) // Add line spacing after the first line .html(function(d) { return d; })) // Outlines for hovering on color legend arcs const arcColorLegend = d3.arc() .innerRadius((d, i) => i === 0 || i % 3 === 0 ? yLegend(d.startValue) : 0) .outerRadius((d, i) => i === 0 || i % 3 === 0 ? yLegend(d.startValue + 3) : 0) .startAngle(d => x(d['Song'])) .endAngle(d => x(d['Song']) + x.bandwidth()) .padAngle(0.03) // i had 0.01 .padRadius(20) recordBg.append("g") .selectAll() .data(expandedLegendSeries) .join('g') .attr('class', 'outline-path-color-legend') .attr("fill", 'red') .attr('transform', radialScale ? `translate(${width * 0.26}, ${height * 0.24})` : `translate(${width * 0.27}, ${height * 0.25})`) .attr('opacity', 0) .style('cursor', 'pointer') .on('mouseover', (event, d) => { mouseOverLegend(event, d, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color) firstUserMouseOver = true colorLegendHover(d, color, false) }) .on('mouseout', function() { clearColorLegendHover() mouseOutLegend(false, 'emotion') }) .call(g => g.selectAll(".outline-test-legend-path") .data(d => d.values) .join("path") .attr('class', 'outline-test-legend-path') .attr("d", arcColorLegend) .style("display", d => d.endValue > d.startValue ? "block" : "none") ) const underlineLegendData = [ { x1: 10, x2: 40, y: 6, }, { x1: 10, x2: 60, y: 6, }, isFirefox ? { x1: -10, x2: -50, y: 6, } : { x1: -10, x2: -50, y: 16, }, isFirefox ? { x1: -10, x2: -50, y: 6, } : { x1: -10, x2: -50, y: 16, }, ] // Use Rough.js to create a hand-drawn line const rc = rough.svg(svg); const roughG = legendLineRoughBg.append('g').attr('class', 'rough-g') // const roughG = svg.append('g').attr('class', 'rough-g') // Loop over underlineLegendData, create a line & append line to the svg for (const [index, d] of underlineLegendData.entries()) { const initialTransform = radialScale ? {x: width * 0.26, y: height * 0.24} : {x: width * 0.27, y: height * 0.25} let r = innerRadius * 0.7 + (((outerRadius * 0.7) - (innerRadius * 0.7)) / 12 * multiples[index]) const theta = x('loml') + (index > 1 ? x.bandwidth() : 0) - Math.PI / 2 const {xPos, yPos} = polarToCartesian(r, theta) // const line = rc.line(initialTransform.x + d.x1, initialTransform.y, d.x2, d.y2, { const initialPos = {x: initialTransform.x + xPos, y: initialTransform.y + yPos + d.y} const line = rc.line(initialPos.x + d.x1, initialPos.y, initialPos.x + d.x2, initialPos.y, { roughness: index > 1 ? 1 : 2, // Adjust the roughness to make it more or less sketchy strokeWidth: 2, stroke: colors[index], strokeOpacity: 0.2, bowing: 3 }); // line.attr('class', 'legend-text') roughG.node().appendChild(line) } // END COLOR LEGEND =========================================== // DATA VIZ CREDIT recordBg.append('text') .classed('data-viz-credit', true) .html('Kelsey Nanan– @datavizard868') .classed('dekko', true) .attr('font-size', '15px') .attr('fill', designVals.recordColor) .attr('text-anchor', 'start') .attr('transform', `translate(${-width / 2 + 15}, ${height / 2 - 20})`) updateChart(svg, starsRoughBg, legendStarRoughBg, legendLineRoughBg, recordCenter, light, rc2, concentricColorScale, recordBg, currentFunctionIndex, functions, timeoutId, firstUserMouseOver,true) return svg.node(); }2e:T1bdb,function playIntroAnimation (svg, outerYLimit, designVals) { const { x } = constants const radius = outerYLimit / 2 - 18; // outerYLimit / 2 - 20; const centerX = 0; // width / 2; const centerY = 0; // height / 2; const baseAmplitude = 20; // Base amplitude for the initial sound wave const heartbeatAmplitude = 28; // Amplitude for the heartbeat wave const soundWaveFrequency = 1200; // Adjusted frequency for the sound wave const dataPointsLess = 400; // PREV 180 W/INTERPOLATION const dataPoints = 4000; // PREV 4000 W/INTERPOLATION const amplitudeRange = [0, 15]; // Range of amplitudes for sound wave const bgLineOpacity = 0.8 // Generate random amplitudes at intervals const amplitudeIntervals = 50; // Interval for random amplitude changes const randomAmplitudes = d3.range(0, dataPoints / amplitudeIntervals, 1).map(() => ( Math.random() * (amplitudeRange[1] - amplitudeRange[0]) + amplitudeRange[0] )); // Interpolate amplitudes const interpolatedAmplitudes = d3.range(0, dataPoints, 1).map(i => { const intervalIndex = Math.floor(i / amplitudeIntervals); const t = (i % amplitudeIntervals) / amplitudeIntervals; const amplitude = d3.interpolate(randomAmplitudes[intervalIndex], randomAmplitudes[intervalIndex + 1] || randomAmplitudes[intervalIndex])(t); return amplitude; }); // Generate initial sound wave data points with interpolated amplitudes const soundWaveData = d3.range(0, dataPoints, 1).map(i => ({ angle: (i / dataPoints) * (Math.PI) - (Math.PI / 2) + x("Guilty as Sin?") + x.bandwidth() * 0.9, // convert to radians for a quarter circle y: Math.sin(soundWaveFrequency * (i / dataPoints) * (Math.PI / 2)) * interpolatedAmplitudes[i] // interpolated amplitude })); // Generate heartbeat wave data points for another quarter circle const heartbeatWaveData = d3.range(0, dataPointsLess, 1).map(i => { // const angle = (i / dataPointsLess) * (Math.PI * 1.5) + (Math.PI * 0); const angle = (i / dataPointsLess) * (Math.PI) + (Math.PI / 2) - (Math.PI / 2) + x("Guilty as Sin?") + x.bandwidth() * 0.9; const heartbeatPattern = (i % 20 === 0) ? heartbeatAmplitude : (i % 20 === 1) ? -heartbeatAmplitude : (i % 20 === 2) ? heartbeatAmplitude / 2 : (i % 20 === 3) ? -heartbeatAmplitude / 2 : 0; // simulate heartbeat peaks return { angle: angle + (Math.PI / 2), // shift angle by a quarter circle y: heartbeatPattern }; }); // Create a smooth transition between sound wave and heartbeat const transitionPoints = 180; // Number of points for the transition const transitionData = d3.range(0, transitionPoints, 1).map(i => { const t = i / transitionPoints; // Interpolation factor const angle = (i / transitionPoints) * (Math.PI) + (Math.PI); const soundWaveIndex = Math.floor(t * dataPoints); const heartbeatIndex = Math.floor(t * dataPointsLess); const soundY = soundWaveData[soundWaveIndex].y; const heartbeatY = heartbeatWaveData[heartbeatIndex].y; // Linear interpolation const y = (1 - t) * soundY + t * heartbeatY; return { angle: angle, y: y }; }); // Create a smooth transition from heartbeat back to sound wave const backTransitionPoints = 180; // Number of points for the transition const backTransitionData = d3.range(0, backTransitionPoints, 1).map(i => { const t = i / backTransitionPoints; // Interpolation factor const angle = (i / backTransitionPoints) * (Math.PI / 2) + Math.PI * 1.5; const heartbeatIndex = Math.floor(t * dataPointsLess); const soundWaveIndex = Math.floor(t * dataPoints); const heartbeatY = heartbeatWaveData[heartbeatIndex].y; const soundY = soundWaveData[soundWaveIndex].y; // Linear interpolation const y = (1 - t) * heartbeatY + t * soundY; return { angle: angle, y: y }; }); // Transform sound wave data const transformedSound = soundWaveData.map((d, i) => { const angle = d.angle; const x = centerX + (radius + d.y) * Math.cos(angle); const y = centerY + (radius + d.y) * Math.sin(angle); return { x, y }; }); // Transform heartbeat data const transformedHeart = heartbeatWaveData.map((d, i) => { const angle = d.angle; const x = centerX + (radius + d.y) * Math.cos(angle); const y = centerY + (radius + d.y) * Math.sin(angle); return { x, y }; }); // Transform transition data const transformedTransition = transitionData.map((d, i) => { const angle = d.angle; const x = centerX + (radius + d.y) * Math.cos(angle); const y = centerY + (radius + d.y) * Math.sin(angle); return { x, y }; }); // Transform back transition data const transformedBackTransition = backTransitionData.map((d, i) => { const angle = d.angle; const x = centerX + (radius + d.y) * Math.cos(angle); const y = centerY + (radius + d.y) * Math.sin(angle); return { x, y }; }); // Combine the datasets const combinedTransformedData = transformedSound.concat(transformedHeart); const line = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveBasis); // Use a curve for smoother path const introAnimationG = svg.append('g').attr('class', 'intro-animation-g') introAnimationG.append("path") .datum(combinedTransformedData) .attr("d", line) .attr("fill", "none") .attr("stroke", designVals.labelColor) .attr("stroke-width", 1) .attr('stroke-opacity', bgLineOpacity) const path = introAnimationG.append("path") .datum(combinedTransformedData) .attr("d", line) .attr("fill", "none") .attr("stroke", designVals.labelColor) .attr("stroke-width", 2); // Function to animate the snake effect using dashed lines function animateSnake(path, visibleSegmentLength, totalLength, duration) { const dashArray = `${visibleSegmentLength},${totalLength - visibleSegmentLength}`; function repeat() { path.attr("stroke-dasharray", dashArray) .attr("stroke-dashoffset", totalLength) .transition() .duration(duration) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) .on("end", repeat); } repeat(); } // Start the snake animation const totalLength = path.node().getTotalLength(); const visibleSegmentLength = totalLength * 0.02; // 40% of the total path length const duration = 30000; // Duration of the animation moving along the path animateSnake(path, visibleSegmentLength, totalLength, duration); // return svg.node(); } 2f:T12c0,function mouseOver(event, d, recordBg, designVals, light, currentFunctionIndex, functions, timeoutId, color, lighterOpacity=0.2, introAnimation=false) { const { x } = constants const { arcGenerator } = arcGenerators // TESTING ========= // d3.selectAll('.emoji-legend-item,.singability-number,.singability-legend-arc').transition().duration(100).style('opacity', 1); // d3.selectAll('.song-labels,.antonoff-circles,.dessner-circles,.ts-stars,.song-arcs,.singability-arc') // .transition().duration(300) // .style('opacity', 1) // d3.selectAll('.star-bg-group') // .transition().duration(100) // .style('opacity', 1) // ========= d3.selectAll('.song-labels,.antonoff-circles,.dessner-circles,.ts-stars,.song-arcs') .transition().duration(100) .style('opacity', lighterOpacity) // using style instead of attr here prevents opacity glitching on first mouseover event .filter(r => r.Song === d.Song) .style('opacity', 1) d3.selectAll('.star-bg-group') .transition().duration(100) .style('opacity', 0.2) d3.selectAll(`#star-bg-${d.Index}`) .transition().duration(100) .style('opacity', 1) d3.selectAll('.empty-arc-stroke') .transition().duration(100) .style('opacity', 0) .filter(r => r.Song === d.Song) .style('opacity', 1) // Filter emoji legend d3.selectAll('.emoji-legend-item') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.includes(d.Theme)) .style('opacity', 1) // Filter producer circle legend if (d.Producers.includes('JA, AD')) { } else if (d.Producers.includes('JA')) { d3.selectAll('.dessner-text,.dessner-legend-circle') .transition().duration(100) .style('opacity', 0.2) } else if (d.Producers.includes('AD')) { d3.selectAll('.antonoff-text,.antonoff-legend-circle') .transition().duration(100) .style('opacity', 0.2) } // Change opacity of sole writer credit if necessary if (d.Writers !== 'TS') { d3.selectAll('.writer-credit-text') .transition().duration(100) .style('opacity', 0.2) d3.selectAll('.writer-credit-star-bg') .transition().duration(50) .style('opacity', 0.2) } d3.selectAll('.singability-legend-arc,.singability-number') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.Singability === d.Singability) .style('opacity', 1) // Filter for lyrics: const lyrics = lyricData.filter(r => r.Song === d.Song)[0] d3.selectAll('.singability-legend-text') .html(`${d.Singability}/3 (${singabilityCategories[d.Singability]})– ${lyrics['Singability notes']}`) .each(function(d, i) { wrap_text(d3.select(this), singabilityWrap) }) if (introAnimation === false) { // clearInterval(interval) // stop intro animation clearTimeout(timeoutId) d3.select('.intro-anim-text-path').remove() d3.select('.intro-animation-g').remove() //remove wave animation clearColorLegendHover() // only show singability arcs & song lyrics if NOT in intro animation d3.selectAll('.singability-arc') .transition().duration(100) .style('opacity', light ? 0.1 : 0.2) .filter(r => r.Song === d.Song) .style('opacity', 1) const randomNumber = Math.floor(Math.random() * 3) + 1; switch(randomNumber) { case 1: showLyric(d, recordBg, designVals, lyrics['Long lyric']) break; case 2: // Delay before showing the rotating text again. d3.select(`#lyric-text-path-${d.Index}`) .transition().duration(1000) .delay(300) .style('opacity', 1) rotateLyric(d, arcGenerator); break; case 3: showLyric(d, recordBg, designVals, lyrics['Long lyric 2']); break; } // Adjust color of lyric if that lyric has a color: d3.selectAll('.colored-lyric') .attr('fill', function() { // Get the full class list const classes = d3.select(this).attr('class').split(' '); // Find the class that starts with 'emotion-' const emotionClass = classes.find(cls => cls.startsWith('emotion-')); // Extract the emotion part from the class (removing 'emotion-') const emotion = emotionClass.split('emotion-')[1]; // Use the extracted emotion in your color function return color(emotion); }) .attr('font-style', 'bold') .attr('font-size', '18px') // Show clear button if on mobile: d3.selectAll('.clear-button-mobile') .style("opacity", 1) .style("pointer-events", "all") } }30:T642,function mouseOut(event, d, mobile=false, introAnimation=false, opacity=1) { const transitionDuration = mobile ? 0 : 300 const starBgTransitionDuration = mobile ? 0 : 100 d3.selectAll('.song-labels,.antonoff-circles,.dessner-circles,.ts-stars,.song-arcs,.emoji-legend-item,.dessner-legend-circle,.dessner-text,.antonoff-legend-circle,.antonoff-text,.writer-credit-text,.writer-credit-star-bg') .transition().duration(transitionDuration) .style('opacity', 1) d3.selectAll('.star-bg-group') .transition().duration(starBgTransitionDuration) .style('opacity', 1) d3.selectAll('.empty-arc-stroke') .transition().duration(transitionDuration) .style('opacity', 0) clearSingabilityLegendHover() if (introAnimation === false) { d3.selectAll('.singability-arc') .transition().duration(transitionDuration) .style('opacity', 1) d3.selectAll(`.lyric-path`).interrupt(); // Stop the transition d3.selectAll(`.lyric-text-path`) // d3.select(`#lyric-${d.Index}`).interrupt(); // Stop the transition // d3.select(`#lyric-text-path-${d.Index}`) .transition().duration(transitionDuration) .style('opacity', 0); // Hide the lyric text // not removing the lyric text makes it slow // d3.select(`#lyric-text-path-${d.Index}`).remove(); // Remove the lyric text // Remove opacity-transition text d3.selectAll('.lyric-text-path-static').remove() } else if (introAnimation === true) { d3.selectAll('.singability-arc') .transition().duration(transitionDuration) .style('opacity', opacity) } }31:T12dc,function mouseOverLegend(event, d, light, recordBg, designVals, filterType, currentFunctionIndex, functions, timeoutId, color=null, legendTextHover=false, introAnimation=false, reducedOpacity=0.2) { const { colorRange } = constants const { arcGenerator } = arcGenerators if (introAnimation === false) { clearTimeout(timeoutId) // stop intro animation d3.select('.intro-anim-text-path').remove() d3.select('.intro-animation-g').remove() //remove wave animation // mouseOut(null, null, true) // Remove empty arcs if intro animation is on song: d3.selectAll('.empty-arc-stroke') .transition().duration(300) .style('opacity', 0) // Show clear button if on mobile AND if not in introAnimation: d3.selectAll('.clear-button-mobile') .style("opacity", 1) .style("pointer-events", "all") } let filterFunc, selection selection = '.song-labels,.antonoff-circles,.dessner-circles,.ts-stars,.song-arcs' if (filterType === 'theme') { filterFunc = (r) => d.includes(r.Theme) clearSingabilityLegendHover() } else if (filterType === 'singability') { filterFunc = (r) => d.Singability === r.Singability // Clear emoji legend here d3.selectAll('.emoji-legend-item').transition().duration(100).style('opacity', 1); } else if (filterType === 'emotion') { selection = '.song-labels,.antonoff-circles,.dessner-circles,.ts-stars' // Show lyric for that color let filteredLyrics, emotion if (legendTextHover) { filteredLyrics = colorLegendLyrics.filter(r => r['Emotion 1'] === d)[0] filterFunc = (r) => r[d] > 0 emotion = d } else { filteredLyrics = colorLegendLyrics.filter(r => r['Emotion 1'] === d.key)[0] filterFunc = (r) => r[d.key] > 0 emotion = d.key } // if introanimation is true, just change song labels here with 0 duration if (introAnimation === true) { d3.selectAll('.song-labels') //,.song-arcs') .transition().duration(0) .style('opacity', reducedOpacity) .filter(r => filterFunc(r)) .style('opacity', 1) } // Clear singability legend here clearSingabilityLegendHover() // Clear emoji legend here d3.selectAll('.emoji-legend-item').transition().duration(100).style('opacity', 1); // showLyric(filteredLyrics, recordBg, designVals, filteredLyrics['Long lyric'], getSongAngle) if (introAnimation === false) { // Delay before rotating lyric d3.select(`#lyric-text-path-color-${filteredLyrics['Index']}`) .transition().duration(1000) .delay(300) .style('opacity', 1) // Try rotating lyric: rotateLyric(filteredLyrics, arcGenerator, true) // for (const emotion of colorRange) { // d3.selectAll(`.colored-lyric .emotion-${emotion}`) // .attr('fill', color(emotion)) // .attr('font-style', 'bold') // .attr('font-size', '18px') // } // d3.selectAll('.colored-lyric') // .attr('fill', color(filteredLyrics['Emotion 1'])) // .attr('font-style', 'bold') // .attr('font-size', '18px') d3.selectAll('.colored-lyric') .attr('fill', color(emotion)) .attr('font-style', 'bold') .attr('font-size', '18px') } } d3.selectAll(selection) //,.song-arcs') .transition().duration(100) .style('opacity', reducedOpacity) .filter(r => filterFunc(r)) .style('opacity', 1) if (introAnimation === false) { // Clear color legend if it was the last highlight during intro animation clearColorLegendHover() // Clear any possible selection of the producers in the center // if song highlight was the last highlight during intro animation d3.selectAll('.dessner-legend-circle,.dessner-text,.antonoff-legend-circle,.antonoff-text') .transition().duration(300) .style('opacity', 1) d3.selectAll('.singability-arc') .transition().duration(100) .style('opacity', light ? 0.1 : 0.2) .filter(r => filterFunc(r)) .style('opacity', 1) } // Filter data for selected songs (to get indices for star background highlight) const filteredSongs = data.filter(r => filterFunc(r)) d3.selectAll('.star-bg-group') .transition().duration(100) .style('opacity', 0.2) for (const song of filteredSongs) { d3.selectAll(`#star-bg-${song.Index}`) .transition().duration(100) .style('opacity', 1) } // Clear writer selection here d3.selectAll('.writer-credit-text,.writer-credit-star-bg') .transition().duration(300) .style('opacity', 1) // d3.selectAll('.empty-arc-stroke') // .transition().duration(100) // .style('opacity', 0) // .filter(r => d.includes(r.Theme)) // .style('opacity', 1) }32:T492,function mouseOutLegend(mobile=false, filterType = '', opacity=1) { const transitionDuration = mobile ? 0 : 300 const starBgTransitionDuration = mobile ? 0 : 100 d3.selectAll('.emoji-legend-item,.singability-number,.singability-legend-arc').transition().duration(100).style('opacity', 1); d3.selectAll('.song-labels,.antonoff-circles,.dessner-circles,.ts-stars,.song-arcs,.singability-arc') .transition().duration(transitionDuration) .style('opacity', opacity) d3.selectAll('.star-bg-group') .transition().duration(starBgTransitionDuration) .style('opacity', opacity) if (filterType === 'emotion') { // Remove opacity-transition text // d3.selectAll('.lyric-text-path-static') .remove() d3.selectAll(`.lyric-color-path`).interrupt(); // Stop the transition d3.selectAll(`.lyric-text-path-color`) .transition().duration(transitionDuration) .style('opacity', 0); // Hide the lyric text // d3.select(`#lyric-color-${d.Index}`).interrupt(); // Stop the transition // d3.select(`#lyric-text-path-${d.Index}`) // .transition().duration(transitionDuration) // .style('opacity', 0); // Hide the lyric text } }33:T415,function colorLegendHover(d, color, isLegendTextHover) { // Necessary to then change opacity of .main-arcs-g correctly d3.selectAll('.song-arcs') .transition().duration(300) .style('opacity', 1) // ------------------ d3.selectAll('.main-arcs-g') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.key === (!isLegendTextHover ? d.key : d)) .style('opacity', 1) d3.selectAll('.legend-path-g') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.key === (!isLegendTextHover ? d.key : d)) .style('opacity', 1) d3.selectAll('.legend-text') .transition().duration(100) .style('opacity', 0.2) .filter(r => r === (!isLegendTextHover ? d.key : d)) .style('opacity', 1) // Change opacity of rough.js paths d3.selectAll('.rough-g path') // .transition().duration(100) .attr('opacity', 0.2) d3.selectAll(`.rough-g g path[stroke='${!isLegendTextHover ? color(d.key) : color(d)}']`) // .transition().duration(100) .attr('opacity', 1) }34:T642,function showLyric(d, recordBg, designVals, lyric) { //Create an SVG text element and append a textPath element const lyricTextStatic = //recordBg.append('text') recordBg.selectAll('.lyric-text-path-static') .data([null]) .join('text') .attr('class', 'lyric-text-path-static') .style('opacity', 0) // .attr('id', (d, i) => `lyric-text-path-static-${i}`) // .style('opacity', 0) // USE THIS FOR OLD WAY lyricTextStatic .selectAll('.lyric-text-path-static-2') .data([null]) .join('textPath') //.append("textPath") //append a textPath to the text element .attr("xlink:href", `#lyric-static-${d.Index}`) //place the ID of the path here // .attr('text-anchor', d => 'middle') // .attr('startOffset', '50%') .attr('text-anchor', getSongAngle(d) > Math.PI ? 'start' : 'end') .attr('startOffset', getSongAngle(d) > Math.PI ? '0%' : '100%') .attr('class', 'handwritten-font-gloria') .attr('font-size', '15px') .classed('lyric-text-path-static-2', true) .attr('fill', designVals.starColor) .html(lyric) // .attr('stroke', designVals.recordColor) // designVals.labelColor === '#fff' ? '#000' : '#fff') // .attr('stroke-width', 3) // 3 for roboto on dark bg // .clone(true) // .attr('fill', designVals.labelColor) // .attr('stroke', 'none') .style('pointer-events', 'none') // .style('opacity', 0) // .transition().duration(1000).style('opacity', 1) lyricTextStatic.transition().duration(1000).style('opacity', 1) }35:T4c5,function rotateLyric(d, arcGenerator, colorLegendLyric=false, introAnimation=false) { // Transition lyric itself d3.select(colorLegendLyric ? `#lyric-color-${d.Index}`: introAnimation ? `#intro-anim` : `#lyric-${d.Index}`) .transition().duration(22000).delay(500) .attrTween("d", function(d) { const direction = getSongAngle(d) < Math.PI / 2 || getSongAngle(d) > Math.PI * 1.5 ? false : true const interpolateStartAngle = introAnimation ? interpolateAngles(getArcStartAngle(d), getNewArcStartAngle(d), direction) : interpolateAngles(getArcStartAngle(d), getNewArcStartAngle(d), direction); // true for clockwise, false for counterclockwise const interpolateEndAngle = introAnimation ? interpolateAngles(getArcEndAngle(d), getNewArcEndAngle(d), direction) : interpolateAngles(getArcEndAngle(d), getNewArcEndAngle(d), direction); // true for clockwise, false for counterclockwise return function(t) { return arcGenerator.startAngle(interpolateStartAngle(t)).endAngle(interpolateEndAngle(t))(d); }; }) .ease(d3.easeLinear) }36:T70f,function addNeedleDropShadow(svg) { // Define the filter in D3 style const defsNeedle = svg.append("defs"); const dropShadowFilterNeedle = defsNeedle.append("filter") .attr("id", "dropshadow-needle") .attr("height", "130%"); dropShadowFilterNeedle.append("feGaussianBlur") .attr("in", "SourceAlpha") .attr("stdDeviation", 8); dropShadowFilterNeedle.append("feOffset") .attr("dx", 5) .attr("dy", 5) .attr("result", "offsetblur"); const feComponentTransferNeedle = dropShadowFilterNeedle.append("feComponentTransfer"); feComponentTransferNeedle.append("feFuncA") .attr("type", "linear") .attr("slope", 0.5); const feMergeNeedle = dropShadowFilterNeedle.append("feMerge"); feMergeNeedle.append("feMergeNode") .attr("in", "offsetblur"); feMergeNeedle.append("feMergeNode") .attr("in", "SourceGraphic"); const defsNeedle2 = svg.append("defs"); const dropShadowFilterNeedle2 = defsNeedle2.append("filter") .attr("id", "dropshadow-needle-2") .attr("height", "130%"); dropShadowFilterNeedle2.append("feGaussianBlur") .attr("in", "SourceAlpha") .attr("stdDeviation", 3); dropShadowFilterNeedle2.append("feOffset") .attr("dx", 5) .attr("dy", 5) .attr("result", "offsetblur"); const feComponentTransferNeedle2 = dropShadowFilterNeedle2.append("feComponentTransfer"); feComponentTransferNeedle2.append("feFuncA") .attr("type", "linear") .attr("slope", 0.5); const feMergeNeedle2 = dropShadowFilterNeedle2.append("feMerge"); feMergeNeedle2.append("feMergeNode") .attr("in", "offsetblur"); feMergeNeedle2.append("feMergeNode") .attr("in", "SourceGraphic"); }37:T130d,function addSingabilityLegendNeedle(recordNeedleGroup, light, designVals, yLegendSingability, xLegendSingability) { const { needleXTranslate, needleBgWidth, height, outerYLimit, outerArcInitialGapLegend, outerArcThicknessLegend, outerArcGapLegend } = constants const singabilityLegendData = [{Singability: 0, x: 19, y: -5}, {Singability: 1, x: 15, y: 17}, {Singability: 2, x: -15, y: 23}, {Singability: 3, x: -25, y: -3}] // For legend singability arcs const arc5 = d3.arc() .innerRadius(d => yLegendSingability(outerYLimit + outerArcInitialGapLegend) + outerArcThicknessLegend + outerArcThicknessLegend * d.arcIndex + outerArcGapLegend * d.arcIndex) .outerRadius(d => yLegendSingability(outerYLimit + outerArcInitialGapLegend) + outerArcThicknessLegend * 2 + outerArcThicknessLegend * d.arcIndex + outerArcGapLegend * d.arcIndex) .startAngle(d => xLegendSingability(d['Song'])) .endAngle(d => xLegendSingability(d['Song']) + xLegendSingability.bandwidth()) .padAngle(0.4) // i had 0.01 .cornerRadius(1) recordNeedleGroup.call(g => g.append("rect") .attr("width", needleBgWidth) .attr("height", height / 8) .attr('rx', 8) .attr('ry', 8) .attr('filter', 'url(#dropshadow-needle)') .attr('id', 'needle-base') .attr("fill", designVals.producerCircles)) .call(g => g.append("circle") .attr("r", 42) .attr("fill", '#898989') .attr('cx', needleXTranslate / 1.3 + 7) .attr('cy', height / 16)) .call(g => g.append('image') .classed('singability-needle-svg', true) .attr('xlink:href', light? needleLight : needleDark) .attr('x', -24 + needleXTranslate / 1.3 + 5) .attr('y', 13)) .call(g => g.append("circle") .attr("r", 15) .attr('id', 'needle-base-circle') .attr('cx', needleXTranslate / 1.3 + 8.5) .attr('cy', height / 16) .attr("fill", designVals.innerCircle) .attr('stroke', !light ? designVals.gridLines : null)) .call(g => g.append("rect") .attr('id', 'needle-base-rect') .attr("width", 92) .attr("height", 25) .attr('x', needleXTranslate / 1.3 + 8.5 - 50) .attr('y', 4) .attr('rx', 2) .attr('ry', 2) .attr('fill', designVals.innerCircle)) .call(g => g.append('text') .attr('id', 'needle-base-text') .text('Singability') // .style('alignment-baseline', 'hanging') .attr('class', 'dekko') .attr('font-size', '21px') .attr('fill', designVals.producerCircles) // .attr('text-anchor', 'middle') .attr('dx', '0.2em') .attr('x', needleXTranslate / 1.3 + 8.5 - 50) .attr('y', 22)) .call(g => g.append('text') .classed('singability-legend-text', true) .text(defaultSingabilityText) // .attr('alignment-baseline', 'hanging') .classed('dekko', true) .attr('font-size', '15px') .attr('fill', designVals.innerCircle) // .attr('text-anchor', 'middle') .attr('dx', '0.2em') .attr('dy', '0.3em') // originally 0.3 .attr('x', 7) // needleXTranslate / 1.3 + 8.5 - 35) .attr('y', 20) //43 to put singability title above text ) // .call(wrap, 100) // .call(wrap_text) ) // Numbers for singability .call(g => g.selectAll('.singability-number') .data(singabilityLegendData) .join('text') .classed('singability-number', true) .text(d => d.Singability) // .attr('alignment-baseline', 'hanging') .attr('text-anchor', 'middle') .classed('dekko', true) .attr('font-size', '14px') .attr('fill', designVals.producerCircles) // .attr('text-anchor', 'middle') .attr('dx', '0.2em') .attr('x', d => needleXTranslate / 1.3 + 8.5 + d.x) .attr('y', d => height / 16 + d.y)) recordNeedleGroup.selectAll('.singability-legend-text') .each(function(d, i) { wrap_text(d3.select(this), singabilityWrap) }); // LEGEND arcs for singalong-ness or beltouty-ness const singabilityLegendArcs = recordNeedleGroup.append("g").style('cursor', 'pointer') .selectAll('g.arc5') .data(prepareArcData(legendSingabilityData)) .join("g") .attr('class', 'arc5') .attr("fill", designVals.innerCircle) .attr('transform', `translate(${needleXTranslate / 1.3 + 7}, ${height / 16})`) .selectAll(".singability-legend-arc") .data(d => d) .join("path") .attr('class', 'singability-legend-arc') .attr("d", arc5) }38:T4f4,function addConcentricGridLines(recordBg, designVals, concentricColorScale) { const { numConcentricCircles, colorfulDarkConcentricCircles, y} = constants // ============================ Lighter concentric circles =========================== // Extra inner circles to give impression of record recordBg.append("g") .attr("text-anchor", "middle") .selectAll("g").data(numConcentricCircles.filter((d, i) => i % 3 !== 0)) .enter() .append("g") .append("circle") .attr('class', 'light-concentric-circles') .attr("fill", "none") .attr("stroke", designVals.gridLines) .attr('stroke-width', 0.5) .attr("r", y); // ====================================== Darker concentric circles ====================================== recordBg.append("g") .attr("text-anchor", "middle") .selectAll("g").data(numConcentricCircles.filter((d, i) => i % 3 === 0)) .enter() .append("g") .append("circle") .attr("fill", "none") .attr('class', 'dark-concentric-circles') .attr("stroke", (d, i) => colorfulDarkConcentricCircles ? concentricColorScale(i) : designVals.gridLines) .attr('stroke-width', colorfulDarkConcentricCircles ? 1.5: 2) .attr("r", y); }39:T6d1,function addEmotionArcs(recordBg, expandedSeries, color, designVals) { const { startingOpacity, innerRadius, x, y } = constants // For main unit arcs const arc = d3.arc() .innerRadius(d => d.startValue === d.endValue ? y(d.startValue + 1) : y(d.startValue)) .outerRadius(d => d.startValue === d.endValue ? y(d.endValue + 1) : y(d.endValue)) .startAngle(d => x(d['Song'])) .endAngle(d => x(d['Song']) + x.bandwidth()) .padAngle(0.03) // i had 0.01 .padRadius(innerRadius) // A group for each series, and a rect for each element in the series recordBg.append("g") .selectAll(".main-arcs-g") .data(expandedSeries.reverse()) .join("g") .attr('class', 'main-arcs-g') // .attr('opacity', startingOpacity) .attr("fill", d => color(d.key)) // .attr('stroke', d => d.values['startValue'] === d.values.endValue ? color(d.key) : null) .attr('stroke-width', 0) .attr('stroke-opacity', 0) .selectAll("song-arcs") .data(d => d.values) .join("path") .attr('class', 'song-arcs') .attr('opacity', startingOpacity) .attr("d", arc) // Stroke on empty arcs, to be shown on hover recordBg.append("g") .selectAll(".main-arcs-strokes-g") .data(expandedSeries) .join("g") .attr('class', 'main-arcs-strokes-g') .attr("fill", 'none') .attr('stroke', d => color(d.key)) .selectAll(".empty-arc-stroke") .data(d => d.values) .join("path") .attr('class', 'empty-arc-stroke') .attr("d", arc) .attr('stroke-width', function(d) { return d.endValue > d.startValue ? 1 : 2 }) .attr('stroke', function(d) { if(d.endValue > d.startValue) { return designVals.recordColor } }) .attr('opacity', 0) }3a:T449,function addSingabilityArcs(recordBg, designVals) { const { startingOpacity, outerYLimit, outerArcInitialGap, outerArcThickness, outerArcGap, innerRadius, x, y } = constants // For outer arcs for singability const arc2 = d3.arc() .innerRadius(d => y(outerYLimit + outerArcInitialGap) + outerArcThickness + outerArcThickness * d.arcIndex + outerArcGap * d.arcIndex) .outerRadius(d => y(outerYLimit + outerArcInitialGap) + outerArcThickness * 2 + outerArcThickness * d.arcIndex + outerArcGap * d.arcIndex) .startAngle(d => x(d['Song'])) .endAngle(d => x(d['Song']) + x.bandwidth()) .padAngle(0.05) // i had 0.01 .padRadius(innerRadius) .cornerRadius(2.3) // Arcs for singalong-ness or beltouty-ness recordBg.append("g") .selectAll('g.arc2') .data(prepareArcData(data)) .join("g") .attr('class', 'arc2') .attr("fill", designVals.innerCircle) .selectAll(".singability-arc") .data(d => d) .join("path") .attr('class', 'singability-arc') .attr('opacity', startingOpacity) .attr("d", arc2) }3b:T6f5,function addProducerCircles(recordCenter, designVals) { const { startingOpacity, emojisOutsideCenter, circleRad, innerRadius, x } = constants const producerCircles = recordCenter.append("g") producerCircles .selectAll() .data(data.filter(d => ['TS, JA', 'TS, JA, AD'].includes(d['Producers']))) .join("circle") //.append('circle') .attr('class', 'antonoff-circles') .attr('opacity', startingOpacity) .attr('fill', emojisOutsideCenter ? designVals.producerCircles : designVals.labelColor) .attr('r', d => (d.Producers === 'TS, JA, AD' ? circleRad - 1 : circleRad)) .attr("transform", function (d) { return ( "rotate(" + (((x(d['Song']) + x.bandwidth() / 2) * 180) / Math.PI - 90) + ")translate(" + (innerRadius + (emojisOutsideCenter ? - circleRad * 1.5 : circleRad * 2)) + ",0)" ); }) producerCircles .selectAll() .data(data.filter(d => ['TS, AD', 'TS, JA, AD'].includes(d['Producers']))) // .join('g') .join('circle') .attr('class', 'dessner-circles') .attr('opacity', startingOpacity) .attr('fill', 'none') .attr('stroke', emojisOutsideCenter ? designVals.producerCircles : designVals.labelColor) .attr('r', d => (d.Producers === 'TS, JA, AD' ? circleRad + 1.1 : circleRad - 0.5)) .attr("transform", function (d) { return ( "rotate(" + (((x(d['Song']) + x.bandwidth() / 2) * 180) / Math.PI - 90) + ")translate(" + // (innerRadius + circleRad * 1.5) + (innerRadius + (emojisOutsideCenter ? -circleRad * 1.5 : circleRad * 2)) + ",0)" ); }) }3c:T820,function addTSWriterStars(starsRoughBg, starsBg, rc2, light, designVals) { const { startingOpacity, innerRadius, trackGap, showEmojis, x } = constants // Loop over data filtered for TS sole writer, create a rect & append rect to the group node for (const d of data.filter(d => d['Writers'] === 'TS')) { // Create an SVG group element const g = starsRoughBg.append("g") .attr('class', 'star-bg-group') .attr('opacity', startingOpacity) .attr('id', `star-bg-${d.Index}`) .attr("transform", () => { const rotate = ((x(d.Song) + x.bandwidth() / 2) * 180) / Math.PI - 90; const translate = innerRadius * trackGap + (showEmojis ? 1 : -23); return `rotate(${rotate}) translate(${translate},0)`; }); // Create the Rough.js rectangle const rect = rc2.rectangle(0, -10, 15, 18, { stroke: 'none', fill: light ? starColorLight : starColorDark, fillWeight: 2, fillStyle: 'zigzag' }); // Append the Rough.js element to the group g.node().appendChild(rect); } // TODO: TRY ADDING OUTLINED STAR AS BORDER const stars = starsBg.append("g") .selectAll() .data(data.filter(d => d['Writers'] === 'TS')) .join('g') .attr('class', 'ts-stars') .attr('opacity', startingOpacity) .append('text') .attr('class', 'ts-star-text') .html('★') // .html('⭐') .attr('font-size', '14px') .attr('fill', designVals.starColor) // light gold: FFD700, light starColor: eae9e9 // .attr('stroke', d => !light && d[colorRange[0]] !== 0 ? '#000' : null) .attr('alignment-baseline', 'middle') .attr("transform", function (d) { return ( "rotate(" + (((x(d['Song']) + x.bandwidth() / 2) * 180) / Math.PI - 90) + ")translate(" + // (innerRadius - circleRad * 5.5) + (innerRadius * trackGap + (showEmojis ? 1 : -23)) + ",0)" ); }) }3d:Tc37,function addSongTitles(recordBg, designVals, themeEmojis) { const { startingOpacity, innerRadius, trackGap, showEmojis, x } = constants const labels = recordBg.append("g") .attr("text-anchor", "middle") .selectAll() .data(data) .join("g") .attr('class', 'song-labels') .attr('opacity', startingOpacity) .attr("text-anchor", function (d) { return (x(d['Song']) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; }) .attr("transform", function (d) { return ( "rotate(" + (((x(d['Song']) + x.bandwidth() / 2) * 180) / Math.PI - 90) + ")translate(" + innerRadius * trackGap * (showEmojis ? 1 : 0.93) + ",0)" ); }) labels.append("text") .attr("transform", function (d) { return (x(d['Song']) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; }) .text(function (d) { return d['Song']; }) .attr('class', 'rubik-600') .attr('font-size', d => d.Song.startsWith('The Smallest Man') || d.Song.startsWith('Chloe') ? '12px' : d.Song.startsWith('My Boy Only') || d.Song.startsWith('Florida') ? '10.5px' : '13px') // .attr('font-size', d => d.Song.startsWith('The Smallest Man') || d.Song.startsWith('Chloe') || d.Song.startsWith('The Tortured Poets') // ? '11.5px' // : d.Song.startsWith('My Boy Only') // || d.Song.startsWith('Florida') // ? '10.5px' // : '13px') .attr("alignment-baseline", "middle") .attr('dx', function (d) { return (x(d['Song']) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? d['Writers'] === 'TS' ? "-1.5em" : "-0.55em" // '-1.5em' : d['Writers'] === 'TS' && d['Song'].startsWith('My Boy Only') ? "2em" : d['Writers'] === 'TS' ? "1.5em" : "0.55em"; // '1.5em' }) .classed('label-text-stroke', true) .attr('stroke', designVals.recordColor) .attr('stroke-width', 3) // 3 for roboto on dark bg .clone(true) .classed('label-text-stroke', false) .classed('label-text', true) .attr('fill', designVals.labelColor) .attr('stroke', 'none') // Append theme for each song to song label if (showEmojis) { const emojis = labels.append('g') .attr('opacity', 0.8) .attr('font-size', '12px') .attr("alignment-baseline", "middle") .attr("transform", function (d) { return (x(d['Song']) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; }) emojis.append("text") .classed('emoji-content', true) .html(d => themeEmojis[d.Theme]) .attr('dx', function (d) { return (x(d['Song']) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "1.7em" // d['Writers'] === 'TS' ? "-1.7em" : "-0.35em" : "-1.7em" //d['Writers'] === 'TS' ? "1.7em" : "0.35em"; }) .attr('dy', '0.4em') } }3e:T22f9,function addCurvedText(recordBg, designVals) { // Function to append all curved text - stationary and rotating lyrics, as well as rotating intro text // Also appends clippaths for animated curved text const { x } = constants const { arcGeneratorNeedle, arcGeneratorIntroTextClippath, arcGenerator, arcGeneratorIntroText} = arcGenerators // Append the defs and clipPath elements const defsClipPath = recordBg.append("defs"); defsClipPath.selectAll('.text-clip-path') .data(data) .join("clipPath") .attr('class', 'text-clip-path') .attr("id", (d, i) => `text-clip-${i}`) .append("path") .attr("id", (d, i) => `clip-path-${i}`) .attr('d', arcGeneratorNeedle) defsClipPath.selectAll('.intro-anim-clip-path') .data(introLyricData) .join("clipPath") .attr('class', 'intro-anim-clip-path') .attr("id", `intro-anim-clip`) .append("path") .attr("id", `intro-anim-clip-path`) .attr('d', arcGeneratorIntroTextClippath) recordBg.selectAll(".lyric-path") .data(data) .join('path') .attr('class', 'lyric-path') .attr("id", (d, i) => `lyric-${i}`) //Unique id of the path .attr("d", d => arcGenerator.startAngle(getArcStartAngle(d)).endAngle(getArcEndAngle(d))(d)) .style("fill", "none") // .attr('stroke', 'red') // Clip paths for color legend hover recordBg.selectAll(".lyric-color-path") .data(data) .join('path') .attr('class', 'lyric-color-path') .attr("id", (d, i) => `lyric-color-${i}`) //Unique id of the path .attr("d", d => arcGenerator.startAngle(getArcStartAngle(d)).endAngle(getArcEndAngle(d))(d)) .style("fill", "none") // Text paths for intro lyric animation recordBg.selectAll(".intro-anim-path") .data(introLyricData) .join('path') .attr('class', 'intro-anim-path') .attr("id", `intro-anim`) //Unique id of the path .attr("d", d => arcGeneratorIntroText.startAngle(getArcStartAngle(d)).endAngle(getArcEndAngle(d))(d)) // .attr('d', arcGeneratorIntroText.startAngle(Math.PI / 2).endAngle(Math.PI * 2.5)) .style("fill", "none") // .attr('stroke', 'red') if (isFirefox) { // Apply clipPath to for Firefox // SOLUTION for clippaths not applying to textpaths IN FIREFOX ALONE: // append the clippath to a element instead and then append the text and textpaths to that const lyricGroup = recordBg.selectAll(".lyric-text-group") .data(data) .join("g") .attr("class", "lyric-text-group") .attr("clip-path", (d, i) => `url(#text-clip-${i})`); lyricGroup.append('text') .classed('lyric-text-path', true) .attr('id', (d, i) => `lyric-text-path-${i}`) .append("textPath") .attr("xlink:href", (d, i) => `#lyric-${i}`) .classed('handwritten-font-gloria', true) .classed('lyric-text', true) .attr('font-size', '15px') .attr('fill', designVals.starColor) .html(d => lyricData.find(r => r.Song === d.Song)['Short (rotating) lyric']) .style('pointer-events', 'none'); // Same solution for color legend hover: const lyricColorGroup = recordBg.selectAll(".lyric-text-group-color") .data(colorLegendLyrics) .join("g") .attr("class", "lyric-text-group-color") .attr("clip-path", (d, i) => `url(#text-clip-${i})`); const lyricColorText = lyricColorGroup.append('text') .attr('class', 'lyric-text-path-color') .attr('id', (d, i) => `lyric-text-path-color-${i}`) .style('opacity', 1) .append("textPath") // Append a textPath to the text element .attr("xlink:href", (d, i) => `#lyric-color-${i}`) // Place the ID of the path here .attr('class', 'handwritten-font-gloria') .classed('lyric-text-color-stroke', true) .attr('font-size', '15px') .attr('fill', designVals.starColor) .html(d => d['Long lyric']) .attr('stroke', designVals.recordColor) .attr('stroke-width', 5) // 3 for Roboto on dark bg .clone(true) // Clone to create the non-stroked version .classed('lyric-text-color-stroke', false) .classed('lyric-text-color', true) .attr('fill', designVals.labelColor) .attr('stroke', 'none') .style('pointer-events', 'none'); } else { // Apply clipPath directly to textPath for Chrome & others - NOTICEABLY FASTER PERFORMANCE in Chrome //Create an SVG text element and append a textPath element const lyricText = recordBg.selectAll(".lyric-text-path") .data(data) .join('text') .attr('class', 'lyric-text-path') .attr('id', (d, i) => `lyric-text-path-${i}`) // .style('opacity', 0) // USE THIS FOR OLD WAY .style('opacity', 1) // USE THIS FOR CLIPPATH .append("textPath") //append a textPath to the text element .attr("xlink:href", (d, i) => `#lyric-${i}`) //place the ID of the path here // .attr('text-anchor', d => 'end') // .attr('startOffset', '100%') .attr('class', 'handwritten-font-gloria') .classed('lyric-text', true) .attr('font-size', '15px') .attr('fill', designVals.starColor) .attr("clip-path", (d, i) => `url(#text-clip-${i})`) // Apply clipPath .html(d => lyricData.filter(r => r.Song === d.Song)[0]['Short (rotating) lyric']) .style('pointer-events', 'none') //Create an SVG text element and append a textPath element FOR COLOR LEGEND HOVER const lyricColorText = recordBg.selectAll(".lyric-text-path-color") .data(colorLegendLyrics) .join('text') .attr('class', 'lyric-text-path-color') .attr('id', (d, i) => `lyric-text-path-color-${i}`) // .style('opacity', 0) // USE THIS FOR OLD WAY .style('opacity', 1) // USE THIS FOR CLIPPATH .append("textPath") //append a textPath to the text element .attr("xlink:href", (d, i) => `#lyric-color-${i}`) //place the ID of the path here // .attr('text-anchor', d => 'end') // .attr('startOffset', '100%') .attr('class', 'handwritten-font-gloria') .classed('lyric-text-color-stroke', true) .attr('font-size', '15px') .attr('fill', designVals.starColor) .attr("clip-path", (d, i) => `url(#text-clip-${i})`) // Apply clipPath .html(d => d['Long lyric']) .attr('stroke', designVals.recordColor) .attr('stroke-width', 5) // 3 for roboto on dark bg .clone(true) .classed('lyric-text-color-stroke', false) .classed('lyric-text-color', true) .attr('fill', designVals.labelColor) .attr('stroke', 'none') .style('pointer-events', 'none') } //Create an SVG text element and append a textPath element const introAnimationRotatingText = recordBg.selectAll(".intro-anim-text-path") .data([null]) .join('text') .attr('class', 'intro-anim-text-path') .attr('id', `intro-anim-text-path-id`) // .style('opacity', 0) // USE THIS FOR OLD WAY .style('opacity', 1) // USE THIS FOR CLIPPATH .append("textPath") //append a textPath to the text element .attr("xlink:href", `#intro-anim`) //place the ID of the path here // .attr('text-anchor', d => 'end') .attr('startOffset', '100%') .attr('class', 'handwritten-font-gloria') .classed('lyric-text', true) .attr('font-size', '17px') .attr('fill', designVals.starColor) // .attr("clip-path", `url(#intro-anim-clip)`) // Apply clipPath .html(window.matchMedia("(pointer: coarse)").matches ? "A celebration of the lamentation of The Tortured Poets Department. Tap to explore. All songs & legends interactive..." : "A celebration of the lamentation of The Tortured Poets Department. Hover to discover. All songs & legends interactive...") .style('pointer-events', 'none') recordBg.selectAll(".lyric-path-static") .data(data) .join('path') .attr('class', 'lyric-path-static') .attr("id", (d, i) => `lyric-static-${i}`) //Unique id of the path .attr("d", d => arcGenerator .startAngle(getSongAngle(d) < Math.PI / 2 || (getSongAngle(d) > Math.PI && getSongAngle(d) < Math.PI * 1.5) ? x(d.Song) : x(d.Song) + x.bandwidth()) // getSongAngle(d) < Math.PI // || getSongAngle(d) > Math.PI * 1.5 // ? x(d.Song) // : -Math.PI) .endAngle(getSongAngle(d) < Math.PI / 2 || getSongAngle(d) > Math.PI * 1.5 ? x(d.Song) + 2 * Math.PI // 2 * Math.PI : -2 * Math.PI)(d)) // For having long lyrics appear on opp side of record from hovered song // .startAngle(getSongAngle(d) < Math.PI / 2 // || getSongAngle(d) > Math.PI * 1.5 // ? Math.PI * 2 // : -Math.PI) // .endAngle(getSongAngle(d) < Math.PI / 2 // || getSongAngle(d) > Math.PI * 1.5 // ? -2 * Math.PI // : 2 * Math.PI)(d)) .style("fill", "none") }3f:Td0a,function addProducerWriterCredits(recordCenter, legendStarsRoughBg, legendStarsBg, rc2, designVals, light) { const { circleRad, innerRadius } = constants const producerCredits = recordCenter.append('g') // .attr('font-size', '12px') .attr("alignment-baseline", "middle") // .attr('font-size', '12px') // for regular font .attr('class', 'handwritten-font-gloria') // .attr('font-weight', 'bold') .classed('producer-credit-text', true) .attr('font-size', '13px') .attr('fill', designVals.recordColor) producerCredits.append('text') .text('Produced by Taylor Swift,') .attr('text-anchor', 'middle') .attr('y', -13) .attr('x', 0) producerCredits.append('text') .text('Jack Antonoff,') .attr('class', 'antonoff-text') .attr('y', 5) .attr('x', 13) const dessner = producerCredits.append('g') dessner.append('circle') .attr('class', 'dessner-legend-circle') .attr('fill', 'none') .attr('stroke', designVals.producerCircles) .attr('r', circleRad) .attr('transform', 'translate(0, 20)') dessner.append('text') .text('Aaron Dessner') .attr('class', 'dessner-text') .attr('y', 25) .attr('x', 13) // ====================================== Writer credit on arc ====================================== recordCenter.append("path") .attr("id", "writer-credit") //Unique id of the path .attr("d", d3.arc() .innerRadius(0) .outerRadius(innerRadius * 0.75) // label at bottom // .startAngle(-Math.PI / 2) // .endAngle(-1.5 * Math.PI)) // label at top .startAngle(Math.PI) .endAngle(Math.PI * 3)) .style("fill", "none") const LegendStarBgG = legendStarsRoughBg.append("g") .attr('class', 'writer-credit-star-bg') .attr("transform", () => { const rotate = Math.PI // ((x("Peter") + x.bandwidth() / 2) * 180) / Math.PI - 90; const translateX = -innerRadius * 0.75 - 8 // innerRadius * trackGap + (showEmojis ? 1 : -23); const translateY = -35 return `rotate(${rotate}) translate(${translateX},${translateY})`; }); const rect = rc2.rectangle(2, -10, 15, 16, { stroke: 'none', fill: light ? starColorLight : starColorDark, fillWeight: 2.5, fillStyle: 'zigzag' }); // Append the Rough.js element to the group LegendStarBgG.node().appendChild(rect); legendStarsBg.selectAll(".writer-credit-text") .data([null]) .join('text') .classed('writer-credit-text', true) .append("textPath") //append a textPath to the text element .attr("xlink:href", "#writer-credit") //place the ID of the path here .style("text-anchor","middle") //place the text halfway on the arc .attr("startOffset", '50%') .classed('handwritten-font-gloria', true) .classed('writer-cred-text', true) // .attr('font-size', '15.5px') .attr('font-size', '11.5px') .attr('fill', designVals.recordColor) // .html(`★ –Written by Taylor Swift, no collaborators`); .html(`★ –Written by Taylor Swift, no collaborators`); }40:T70b,function addClearButtonOnMobile(recordCenter, colors, designVals, light) { const { innerRadius } = constants const buttonBg = recordCenter .append("foreignObject") .attr("x", -innerRadius) // -67) .attr("y", innerRadius * 0.4) //40) .attr("width", innerRadius * 2) .attr("height", 150) buttonBg .append("xhtml:div") .classed("button-bg", true) .append("button") .text("CLEAR SELECTION") .classed("clear-button-mobile", true) .classed("rubik-700", true) .attr('font-size', '13px') .style('border', `2px solid ${designVals.recordColor}`) .style('border-radius', '3px') .style('padding', '5px') // .style('background', `repeating-linear-gradient(90deg, // ${colors[0]} 0%, // ${colors[0]} 25%, // ${colors[1]} 25%, // ${colors[1]} 50%, // ${colors[2]} 50%, // ${colors[2]} 75%, // ${colors[3]} 75%, // ${colors[3]} 100%`) .style('background', `repeating-linear-gradient(90deg, ${colors[0]}, ${colors[1]} 25%, ${colors[2]} 50%, ${colors[3]} 75%, ${colors[0]} 100%`) .style('background-size', '50% 50%') .style('animation', 'gradientAnimation 5s linear infinite') .style('-webkit-text-stroke', '6px #000') // #d3d3d3') .style('color', '#eff0f1') // .style('-webkit-text-stroke', light ? '6px #000' : '5px #eff0f1') // #d3d3d3') // .style('color', light ? '#eff0f1' : '#000') .style('paint-order', 'stroke') .on("click", function () { mouseOut(null, null) mouseOutLegend(false, 'emotion') d3.selectAll('.clear-button-mobile') .style("opacity", 0) .style("pointer-events", "none") }) .style("opacity", 0) .style("pointer-events", "none"); }41:T5f5,// NOT USED function addThemeLegendText(recordBg, light, designVals, combinedThemeLegendText, currentFunctionIndex, functions, timeoutId, firstUserMouseOver) { const { height } = constants const emojiLegendText = recordBg.append("text") .attr("y", -height / 2 + 25) // Set the starting y position .attr("fill", designVals.recordColor) .attr("font-size", "15px") .attr("class", "dekko") .classed('emoji-leg-text', true) .attr("alignment-baseline", "hanging") .selectAll(".emoji-leg-text-tspan") .data(combinedThemeLegendText) .join('tspan') .classed("emoji-leg-text-tspan", true) .classed('emoji-legend-item', d => d.startsWith("&#") || d.includes('toxic') ? true : false) .attr("x", -width / 2 + 15) // Set the x position for each tspan (line) .attr("dy", function(d, i) { return i ? "1.2em" : 0}) // Add line spacing after the first line .html(function(d) { return d; }); emojiLegendText.filter(d => d.startsWith("&#") || d.includes('toxic')) .style('cursor', 'pointer') .on('mouseover', function(event, d) { // Change legend item opacity d3.selectAll('.emoji-legend-item').transition().duration(100).style('opacity', 0.2); d3.select(this).transition().duration(100).style('opacity', 1); mouseOverLegend(event, d, light, recordBg, designVals, 'theme', currentFunctionIndex, functions, timeoutId) // firstUserMouseOver = true }) .on('mouseout', function() { mouseOutLegend() }); }42:T24ee,// NOT USED function addColorLegend(svg, recordBg, designVals, light, expandedLegendSeries, currentFunctionIndex, functions, timeoutId, colors) { const { x, radialScale, height, yLegend, color, colorRange, innerRadius, outerRadius } = constants const andWeFindData = [ "Lyrics", "are rated", "from 0 to 3 as:", " " ]; recordBg.append("text") // .attr("x", width / 2 - 25) // Set the x position of the whole text element .attr("y", height * 0.25) // Set the starting y position .attr("fill", designVals.recordColor) .attr("font-size", "15px") .attr("class", "dekko") .classed('color-leg-text', true) .attr("alignment-baseline", "hanging") .attr('text-anchor', 'end') .selectAll("tspan") .data(andWeFindData) .enter() .append("tspan") .attr("x", width / 2 - 15) // Set the x position for each tspan (line) .attr("dy", function(d, i) { return i ? "1.2em" : 0}) // Add line spacing after the first line .html(function(d) { return d; }); // Transform for color legend text const multiples = radialScale ? [2.5, 5, 7, 8.3] : [2, 4, 5.5, 7] // Mini version of arcs // WHEN MOVING TO FUNCTION, MOVE ARC4 AS WELL // For legend arcs const arc4 = d3.arc() .innerRadius(d => yLegend(d.startValue)) .outerRadius(d => yLegend(d.endValue)) .startAngle(d => x(d['Song'])) .endAngle(d => x(d['Song']) + x.bandwidth()) .padAngle(0.03) // i had 0.01 .padRadius(20) recordBg.append("g") .selectAll() .data(expandedLegendSeries) .join("g") .attr("fill", d => color(d.key)) .style('cursor', 'pointer') .attr('class', 'legend-path-g') .on('mouseover', (event, d) => { mouseOverLegend(event, d, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color) d3.selectAll('.main-arcs-g') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.key === d.key) .style('opacity', 1) d3.selectAll('.legend-path-g') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.key === d.key) .style('opacity', 1) d3.selectAll('.legend-text') .transition().duration(100) .style('opacity', 0.2) .filter(r => r === d.key) .style('opacity', 1) // Change opacity of rough.js paths d3.selectAll('.rough-g path') // .transition().duration(100) .attr('opacity', 0.2) d3.selectAll(`.rough-g g path[stroke='${color(d.key)}']`) // .transition().duration(100) .attr('opacity', 1) }) .on('mouseout', function() { d3.selectAll('.main-arcs-g,.legend-text,.legend-path-g') .transition().duration(300) .style('opacity', 1) d3.selectAll('.rough-g path') // .transition().duration(100) .attr('opacity', 1) mouseOutLegend(false, 'emotion') }) .attr('transform', radialScale ? `translate(${width * 0.26}, ${height * 0.24})` : `translate(${width * 0.27}, ${height * 0.25})`) .call(g => g.selectAll(".legend-path") .data(d => d.values) .join("path") .attr('class', 'legend-path') .attr("d", arc4) .attr('stroke', designVals.recordColor) .attr('stroke-width', '0.5px') .attr('stroke-opacity', 0.5) // Draw only if there's a segment .style("display", d => d.endValue > d.startValue ? "block" : "none") ) // Hide if no segment) // Text that only has to be appended once recordBg.append("g") .selectAll() // .data(expandedLegendSeries) .data([null]) .join("g") // .attr("fill", d => color(d.key)) .attr('transform', radialScale ? `translate(${width * 0.26}, ${height * 0.24})` : `translate(${width * 0.27}, ${height * 0.25})`) .call(g => g.append('image') .classed('album-avg-vector', true) .attr('xlink:href', light ? vectorWhite : vectorDark) .attr('x', radialScale ? 54 : 58) .attr('y', radialScale ? 145 : 130)) .call(g => g.selectAll('.legend-text') .data(colorRange) .join('text') .classed('legend-text', true) .attr("font-size", "13px") .classed("dekko", true) .attr("alignment-baseline", (d, i) => i > 1 ? "hanging" : 'auto') .attr('fill', designVals.recordColor) .html(d => `${d}–${legendData[0][d]}/3`) .attr('text-anchor', (d, i) => i > 1 ? 'end' : 'start') .attr('dx', (d, i) => i > 1 ? '-0.2em' : '0.2em') .attr('transform', function(d, i) { let r = innerRadius * 0.7 + (((outerRadius * 0.7) - (innerRadius * 0.7)) / 12 * multiples[i]) const theta = x('loml') + (i > 1 ? x.bandwidth() : 0) - Math.PI / 2 const {xPos, yPos} = polarToCartesian(r, theta) return `translate(${xPos}, ${yPos})` }) .style('cursor', 'pointer') .on('mouseover', function(event, d) { mouseOverLegend(event, d, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color, true) d3.selectAll('.main-arcs-g') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.key === d) .style('opacity', 1) d3.selectAll('.legend-path-g') .transition().duration(100) .style('opacity', 0.2) .filter(r => r.key === d) .style('opacity', 1) d3.selectAll('.legend-text') .transition().duration(100) .style('opacity', 0.2) .filter(r => r === d) .style('opacity', 1) // Change opacity of rough.js paths d3.selectAll('.rough-g path') // .transition().duration(100) .attr('opacity', 0.2) d3.selectAll(`.rough-g g path[stroke='${color(d)}']`) // .transition().duration(100) .attr('opacity', 1) }) .on('mouseout', function() { d3.selectAll('.main-arcs-g,.legend-text,.legend-path-g') .transition().duration(300) .style('opacity', 1) d3.selectAll('.rough-g path') // .transition().duration(100) .attr('opacity', 1) mouseOutLegend(false, 'emotion') }) ) .call(g => g.append('text') .attr("y", radialScale ? 173 : 165) // Set the starting y position .attr("fill", designVals.recordColor) .attr("font-size", "12.5px") .attr("class", "dekko") .classed('album-avg-text', true) // .attr("alignment-baseline", "hanging") .attr('text-anchor', 'end') .selectAll("tspan") .data(['Album average.', 'Each song rated', 'the same way']) .enter() .append("tspan") .attr("x", radialScale ? 50 : 55) // Set the x position for each tspan (line) .attr("dy", function(d, i) { return i ? "1.2em" : 0}) // Add line spacing after the first line .html(function(d) { return d; })) // TO FINISH: Outlines for color legend arcs recordBg.append("g") .selectAll(".outline-path-color-legend") .data([null]) .join("path") .attr('class', 'outline-path-color-legend') // .attr("fill", 'red') .attr('transform', radialScale ? `translate(${width * 0.26}, ${height * 0.24})` : `translate(${width * 0.27}, ${height * 0.25})`) .attr('opacity', 0) .style('cursor', 'pointer') const underlineLegendData = [ { x1: 10, x2: 40, y: 6, }, { x1: 10, x2: 60, y: 6, }, { x1: -10, x2: -50, y: 16, }, { x1: -10, x2: -50, y: 16, }, ] // Use Rough.js to create a hand-drawn line const rc = rough.svg(svg); const roughG = svg.append('g').attr('class', 'rough-g') // Loop over underlineLegendData, create a line & append line to the svg for (const [index, d] of underlineLegendData.entries()) { const initialTransform = radialScale ? {x: width * 0.26, y: height * 0.24} : {x: width * 0.27, y: height * 0.25} let r = innerRadius * 0.7 + (((outerRadius * 0.7) - (innerRadius * 0.7)) / 12 * multiples[index]) const theta = x('loml') + (index > 1 ? x.bandwidth() : 0) - Math.PI / 2 const {xPos, yPos} = polarToCartesian(r, theta) // const line = rc.line(initialTransform.x + d.x1, initialTransform.y, d.x2, d.y2, { const initialPos = {x: initialTransform.x + xPos, y: initialTransform.y + yPos + d.y} const line = rc.line(initialPos.x + d.x1, initialPos.y, initialPos.x + d.x2, initialPos.y, { roughness: index > 1 ? 1 : 2, // Adjust the roughness to make it more or less sketchy strokeWidth: 2, stroke: colors[index], strokeOpacity: 0.2, bowing: 3 }); // line.attr('class', 'legend-text') roughG.node().appendChild(line) } }43:T1f72,function updateChart(svg, starsRoughBg, legendStarRoughBg, legendLineRoughBg, recordCenter, light, rc2, concentricColorScale, recordBg, currentFunctionIndex, functions, timeoutId, firstUserMouseOver, firstUpdate=false) { const { colorfulDarkConcentricCircles, x, innerRadius, trackGap, showEmojis, startingOpacity, designValsLight, designValsDark, colorsLight, colorsDark, colorRange, radialScale, height, outerRadius } = constants // album colors light to dark: edece9, a79e8f, 7d7c78, #3b3a36 let designVals = light === true ? designValsLight : designValsDark let color = d3.scaleOrdinal() .domain(colorRange) .range(light === true ? colorsLight : colorsDark) .unknown("#ccc"); let themeEmojis = { "lost love": light ? '🥀' : '💔', //(broken heart vs wilted flower) "fame's impact": light ? '📸' : '🌟', "escape": '🚪', // '🏃', (person running vs door) "desire": '🔥', "toxic love": '☠️', // '🧪', // '☠', "resilience": '💪', "true love": light ? '🖤' : '🤍', "playfulness": '😉', "reflection": '🪞', } const transitionDuration = 100 const t = d3.transition().duration(transitionDuration) svg.transition().duration(transitionDuration) .style('background-color', designVals.svgBg) d3.selectAll('.record-img') .transition(t) .attr('opacity', light ? startingOpacity + 0.1 : 1) d3.selectAll('.cd-img') .transition(t) .attr('opacity', light ? 1 : startingOpacity + 0.1) d3.selectAll('.switch-bg') // .style('cursor', firstUserMouseOver ? 'pointer' : 'not-allowed') .transition(t) .attr('fill', designVals.switchBg) .attr('stroke', designVals.recordColor) d3.selectAll('.switch-separator') .transition(t) .attr('fill', designVals.recordColor) d3.selectAll('.outline-path') .on('mouseover', (event, d) => { mouseOver(event, d, recordBg, designVals, light, currentFunctionIndex, functions, timeoutId, color) }) d3.selectAll('.outline-path-color-legend') .on('mouseover', (event, d) => { mouseOverLegend(event, d, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color) firstUserMouseOver = true colorLegendHover(d, color, false) }) d3.selectAll('.legend-text') .on('mouseover', function(event, d) { mouseOverLegend(event, d, light, recordBg, designVals, 'emotion', currentFunctionIndex, functions, timeoutId, color, true) firstUserMouseOver = true colorLegendHover(d, color, true) }) d3.selectAll('.song-arcs,.legend-path') //('.main-arcs-g') .transition(t) .attr("fill", d => color(d.key)) d3.selectAll('.main-arcs-strokes-g') .transition(t) .attr("stroke", d => color(d.key)) d3.selectAll('#record-circle,.producer-credit-text,.writer-cred-text,.emoji-leg-text,.color-leg-text,.legend-text,.album-avg-text,.data-viz-credit') .transition(t) .attr("fill", designVals.recordColor) d3.selectAll('#needle-base-circle,#needle-base-rect,.singability-legend-text,.arc5,#record-center,#dark-record-center-circle,.arc2') .transition(t) .attr("fill", designVals.innerCircle) d3.selectAll('#needle-base,#needle-base-text,.singability-number,.antonoff-legend-circle,.antonoff-circles') .transition(t) .attr('fill', designVals.producerCircles) d3.selectAll('.dessner-legend-circle,.dessner-circles') .transition(t) .attr('stroke', designVals.producerCircles) d3.selectAll('#needle-base-circle') .transition(t) .attr('stroke', !light ? designVals.gridLines : null) d3.selectAll('.light-concentric-circles') .transition(t) .attr("stroke", designVals.gridLines) concentricColorScale.unknown(designVals.gridLines) d3.selectAll('.dark-concentric-circles') .transition(t) .attr("stroke", (d, i) => colorfulDarkConcentricCircles ? concentricColorScale(i) : designVals.gridLines) d3.selectAll('.empty-arc-stroke') .attr('stroke', function(d) { if(d.endValue > d.startValue) { return designVals.recordColor } }) d3.selectAll('.ts-star-text,.lyric-text,.lyric-text-color-stroke,.lyric-text-path-static-2') .transition(t) .attr('fill', designVals.starColor) d3.selectAll('.writer-cred-star') .transition(t) .style('fill', designVals.starColor) d3.selectAll('.label-text-stroke,.lyric-text-color-stroke,.legend-path') .transition(t) .attr('stroke', designVals.recordColor) d3.selectAll('.label-text,.lyric-text-color') .transition(t) .attr('fill', designVals.labelColor) d3.select('.logo-img') .attr('xlink:href', light ? logoLight : logoDark) d3.select('.album-avg-vector') .attr('xlink:href', light ? vectorWhite : vectorDark) d3.select('.singability-needle-svg') .attr('xlink:href', light ? needleLight : needleDark) d3.selectAll('.emoji-content') .html(d => themeEmojis[d.Theme]) for (const emotion of colorRange) { d3.selectAll(`.colored-lyric .emotion-${emotion}`) .attr('fill', color(emotion)) .attr('font-style', 'bold') .attr('font-size', '18px') } let combinedThemeLegendText = themeLegendText.concat(Object.entries(themeEmojis).map(([key, value]) => `${value}: ${key} (${data.filter((d, idx) => d.Theme === key).length}${key === 'lost love' ? ' songs' : ''})`)); d3.selectAll('.emoji-leg-text-tspan') .data(combinedThemeLegendText) .html(function(d) { return d; }) // const starGs = document.getElementsByClassName('star-bg-group') d3.selectAll('.star-bg-group').remove() // Loop over data filtered for TS sole writer, create a rect & append rect to the group node for (const d of data.filter(d => d['Writers'] === 'TS')) { // Create an SVG group element const g = starsRoughBg.append("g") .attr('class', 'star-bg-group') .attr('opacity', firstUpdate ? startingOpacity : 1) .attr('id', `star-bg-${d.Index}`) .attr("transform", () => { const rotate = ((x(d.Song) + x.bandwidth() / 2) * 180) / Math.PI - 90; const translate = innerRadius * trackGap + (showEmojis ? 1 : -23); return `rotate(${rotate}) translate(${translate},0)`; }); // Create the Rough.js rectangle const rect = rc2.rectangle(0, -10, 15, 18, { stroke: 'none', fill: light ? starColorLight : starColorDark, fillWeight: 2, fillStyle: 'zigzag' }); // Append the Rough.js element to the group g.node().appendChild(rect); } d3.selectAll('.writer-credit-star-bg').remove() const LegendStarBgG = legendStarRoughBg.append("g") .attr('class', 'writer-credit-star-bg') .attr("transform", () => { const rotate = Math.PI // ((x("Peter") + x.bandwidth() / 2) * 180) / Math.PI - 90; const translateX = -innerRadius * 0.75 - 8 // innerRadius * trackGap + (showEmojis ? 1 : -23); const translateY = -35 return `rotate(${rotate}) translate(${translateX},${translateY})`; }); const rect = rc2.rectangle(2, -10, 15, 16, { stroke: 'none', fill: light ? starColorLight : starColorDark, fillWeight: 2.5, fillStyle: 'zigzag' }); // Append the Rough.js element to the group LegendStarBgG.node().appendChild(rect); d3.selectAll('.clear-button-mobile') .style('border', `2px solid ${designVals.recordColor}`) }44:Tfae,constants = { // let light = true; const radialScale = true; const colorfulDarkConcentricCircles = false; const showEmojis = true; const emojisOutsideCenter = true; // const singleOuterArc = false; const designValsLight = { svgBg: '#3b3a36', recordColor: '#edece9', gridLines: '#D3D3D3', labelColor: '#000', innerCircle: '#000', producerCircles: '#fff', blurAmt: 13, blurOffset: 5, singabilityLine: '#000', starColor: '#000', switchBg: '#54534c' //'#D3D3D3' // '#000' } const designValsDark = { svgBg: '#edece9', // '#7d7c78', recordColor: '#282723', gridLines: '#000', labelColor: '#eae9e9', innerCircle: '#e5e5e5', producerCircles: '#000', blurAmt: 13, blurOffset: 5, singabilityLine: '#D3D3D3', starColor: '#eae9e9', switchBg: '#e5e5e5' // '#fff', //'#000' } const colorsLight = ['#969288', '#01717E', '#800000', '#DDAC04'] // '#EBB908'] const colorsDark = ['#B7B7B7', '#278D99', '#AE0000', '#F3CB40'] // ALTERNATIVE COLORS: // const colorsLight = ['#777776', '#01717E', '#800000', '#CEA101'] // '#EBB908'] // const colorsDark = ['#B7B7B7', '#37B6C5', '#CA2222', '#F3CB40'] const width = 928; const height = width; const startingOpacity = 0.1; const innerRadius = 142; const outerRadius = Math.min(width, height) / 2; // Actual outer radius of record itself is 396. // 80 inner circle; outer circle 316. looking for a ratio of 2.22. current ratio is 3.95 (316 / 80). // Can increase innerRadius to..... 142. // Colors sorted with largest amts coming first and lowest totals/averages coming last const colorRange = ["sad", "sassy", "angry", "happy"]; // const colors = ["#B0A999", "#01717e", "#800000", "#e0b10d"]; const circleRad = 6; const outerArcThickness = 2.7; // 3 - old vals before implementing empty strokes on hover const outerArcInitialGap = radialScale ? 0.6 : 0.45; // 0.15 const outerArcGap = 5; // 7 // ------------------------------- const outerArcThicknessLegend = 2; const outerArcInitialGapLegend = radialScale ? 25 : 12; const outerArcGapLegend = 2.5; // ------------------------------- const numConcentricCircles = d3.range(0, 13); //[8, 6, 4, 2] const maxPerBand = 3; // const innerRadiusOffset = (d) => d['Writers'] === 'TS' ? 20 : 10; not using anymore const trackGap = 1.2; // ------------------------------- // const outerYLimit = radialScale ? 10.25 : 12 const outerYLimit = 12; // ------------------------------- const needleBgWidth = width / 5 const needleXTranslate = width / 4.3 const x = d3.scaleBand() .domain(data.map(d => d.Song)) .range([0, 2 * Math.PI]) .align(0); // A radial y-scale maintains area proportionality of radial bars const y = radialScale ? d3.scaleRadial() : d3.scaleLinear() y .range([innerRadius * trackGap, outerRadius]) .domain([0, maxPerBand * colorRange.length + (radialScale ? 8 : 5)]); // max value times the number of bands - PREV +5 FOR NON RADIAL SCALE const yLegend = radialScale ? d3.scaleRadial() : d3.scaleLinear() yLegend .range([innerRadius * 0.7 * trackGap, outerRadius * 0.7]) .domain([0, maxPerBand * colorRange.length + 5]); // max value times the number of bands // const color = d3.scaleOrdinal() // .domain(colorRange) // .range(colors) // .unknown("#ccc"); return { radialScale, colorfulDarkConcentricCircles, showEmojis, emojisOutsideCenter, designValsLight, designValsDark, width, height, startingOpacity, innerRadius, outerRadius, colorRange, // colors, colorsLight, colorsDark, circleRad, outerArcThickness, outerArcInitialGap, outerArcGap, outerArcThicknessLegend, outerArcInitialGapLegend, outerArcGapLegend, numConcentricCircles, maxPerBand, trackGap, outerYLimit, needleBgWidth, needleXTranslate, x, y, yLegend, // color }; } 45:T9db,arcGenerators = { const { outerYLimit, radialScale, x, y } = constants // Arc generator for lyric positioning const arcGenerator = d3.arc() .innerRadius(0) .outerRadius(d => getSongAngle(d) < Math.PI / 2 || getSongAngle(d) > Math.PI * 1.5 ? y(outerYLimit + (radialScale ? 1.25 : 0.75)) : y(outerYLimit + (radialScale ? 1.75 : 1.25))); // Arc generator for intro text path const arcGeneratorIntroText = d3.arc() .innerRadius(0) .outerRadius(d => getSongAngle(d) < Math.PI / 2 || getSongAngle(d) > Math.PI * 1.5 ? y(outerYLimit + (radialScale ? 1.25 : 0.75)) * 0.75 : y(outerYLimit + (radialScale ? 1.75 : 1.25)) * 0.75); // : y(radialScale ? 13.25 : outerYLimit + 1.25)); // Arc generator for clippath of text starting at the record needle const arcGeneratorNeedle = d3.arc() .innerRadius(0) .outerRadius(d => y(outerYLimit + 3)) // Slightly larger outer radius than text to clip out the text .startAngle(d => getArcStartAngle(d)) .endAngle(d => getSongAngle(d) < Math.PI / 2 ? -Math.PI / 2 : getSongAngle(d) > Math.PI * 1.5 // startangle - guilty as sin - (2PI - song) ? -(2 * Math.PI - x(d.Song)) + x.bandwidth() : getSongAngle(d) >= Math.PI ? x(d.Song) : Math.PI * 1.5); // Arc generator for CLIPPATH of INTRO TEXT const arcGeneratorIntroTextClippath = d3.arc() .innerRadius(0) .outerRadius(d => y(outerYLimit + 3) * 0.75) // Slightly larger outer radius than text to clip out the text // .startAngle(Math.PI / 2) // .endAngle(-Math.PI / 2) .startAngle(d => getArcStartAngle(d)) .endAngle(d => getSongAngle(d) < Math.PI / 2 ? -Math.PI / 2 : getSongAngle(d) > Math.PI * 1.5 // startangle - guilty as sin - (2PI - song) ? -(2 * Math.PI - x(d.Song)) + x.bandwidth() : getSongAngle(d) >= Math.PI ? x(d.Song) : Math.PI * 1.5); return { arcGenerator, arcGeneratorIntroText, arcGeneratorNeedle, arcGeneratorIntroTextClippath } }46:T586,style = html` `47:[{"id":"0b58bd84157084bf0f8818f1c2679eee16b162d172ee2345d69210857e780f2cfab19f181715399c1464cd722846953b3702d9b7cdf01496e7519fa708a24e74","href":"https://static.observableusercontent.com/files/0b58bd84157084bf0f8818f1c2679eee16b162d172ee2345d69210857e780f2cfab19f181715399c1464cd722846953b3702d9b7cdf01496e7519fa708a24e74","name":"Group 7 - 12.svg","type":"image/svg+xml","lastModified":1734706092888.472,"size":1229},{"id":"c60e4d731930c9b71d3b146559fcf5cba206b820eb97af2b22cd797e7aa6d2bbf051d4a77e22ab559baf9c25efd58077e839cc258b9c1be77214413274e40600","href":"https://static.observableusercontent.com/files/c60e4d731930c9b71d3b146559fcf5cba206b820eb97af2b22cd797e7aa6d2bbf051d4a77e22ab559baf9c25efd58077e839cc258b9c1be77214413274e40600","name":"Group 7 - 11.svg","type":"image/svg+xml","lastModified":1734706730695.467,"size":1229},{"id":"300d236faeaddb249212b55dc3403f4b5c608eea749a4d50371e9d70a87607b909223fadc341e76e4807598d0e7d61d1b0d80af1a5231bb78a2e6d34a1ca70b6","href":"https://static.observableusercontent.com/files/300d236faeaddb249212b55dc3403f4b5c608eea749a4d50371e9d70a87607b909223fadc341e76e4807598d0e7d61d1b0d80af1a5231bb78a2e6d34a1ca70b6","name":"TTPD Data - DUMMYLEGENDCOLOR (2).csv","type":"text/csv","lastModified":1724982423593.675,"size":272},{"id":"972345186276d7e9706b0cd2b0836aa77d91c761a0c0b4faa4f577b2da4e9434b8b8d267ba0f6472b8b0e53c8f9baab4217ba108b22d7d86f75e897cb84c870c","href":"https://static.observableusercontent.com/files/972345186276d7e9706b0cd2b0836aa77d91c761a0c0b4faa4f577b2da4e9434b8b8d267ba0f6472b8b0e53c8f9baab4217ba108b22d7d86f75e897cb84c870c","name":"TTPD Data - DATA (3).csv","type":"text/csv","lastModified":1724970646504.526,"size":2035},{"id":"55c9e5116c824f3ba4d2f00977d279b4142670445410d50f7044d89ce5ff11e23fe5fbb2876536b5f724fe09fa1b69d1d8acb6457185a2d99f2df559e8140744","href":"https://static.observableusercontent.com/files/55c9e5116c824f3ba4d2f00977d279b4142670445410d50f7044d89ce5ff11e23fe5fbb2876536b5f724fe09fa1b69d1d8acb6457185a2d99f2df559e8140744","name":"Group 3.svg","type":"image/svg+xml","lastModified":1721995569027.437,"size":264},{"id":"fa5d2edcc42a84d89bbbc8298b2b2bd4bc1b4737f6e170d051d3bb0329b0aa7a3a59121d745dd1c8de15745df8b30eaa75d9d6261b0db0354e7936652fa50f02","href":"https://static.observableusercontent.com/files/fa5d2edcc42a84d89bbbc8298b2b2bd4bc1b4737f6e170d051d3bb0329b0aa7a3a59121d745dd1c8de15745df8b30eaa75d9d6261b0db0354e7936652fa50f02","name":"TTPD Data - DUMMYLEGENDSINGABILITY.csv","type":"text/csv","lastModified":1721995569027.437,"size":1039},{"id":"5819d9733677fc526a1655ca6bdd52927e01d92106d6d450c81d12dc1379149734b05fffbc83aab62437729b34934a79c9697d31f2cd6d506926edd83a8db46b","href":"https://static.observableusercontent.com/files/5819d9733677fc526a1655ca6bdd52927e01d92106d6d450c81d12dc1379149734b05fffbc83aab62437729b34934a79c9697d31f2cd6d506926edd83a8db46b","name":"TTPD logo light.svg","type":"image/svg+xml","lastModified":1721995569027.437,"size":4950},{"id":"7b450ce3f57a527bb27f027fbe833ef7775d66869ef5ccf6d58c0312f23d2233fba527a58602f74812226fdb3d15cdaa9f3833143fee6a9dd1f180aac0696f8e","href":"https://static.observableusercontent.com/files/7b450ce3f57a527bb27f027fbe833ef7775d66869ef5ccf6d58c0312f23d2233fba527a58602f74812226fdb3d15cdaa9f3833143fee6a9dd1f180aac0696f8e","name":"TTPD logo dark.svg","type":"image/svg+xml","lastModified":1721995569027.437,"size":4950},{"id":"574550dd44ebb56fc14761fdb0bc6818438ac77a550dd8e2f32177fd04f47cf2a03ecf21407e374693b78d3819dc87d4109e72bbb824c8e88ff84ea3da7126ed","href":"https://static.observableusercontent.com/files/574550dd44ebb56fc14761fdb0bc6818438ac77a550dd8e2f32177fd04f47cf2a03ecf21407e374693b78d3819dc87d4109e72bbb824c8e88ff84ea3da7126ed","name":"Vector black@1.svg","type":"image/svg+xml","lastModified":1721995569027.437,"size":213},{"id":"d6542eb4d4977d187786e92c064324b9d29ac345afb7db2ca8af424cd3053d863db57da3f122ed90b464ba72b31c839863690df3c8bf11ab92bf092fb178b127","href":"https://static.observableusercontent.com/files/d6542eb4d4977d187786e92c064324b9d29ac345afb7db2ca8af424cd3053d863db57da3f122ed90b464ba72b31c839863690df3c8bf11ab92bf092fb178b127","name":"Vector white@1.svg","type":"image/svg+xml","lastModified":1721995569027.437,"size":213},{"id":"1b750a8a44718dd79bf3e9c74822d76b97787a38ba3c444ad2bf37d23b54c87af15944cd32dbda1d1eace0bdf0a62cbb63f3952b39a9e27a28cc83e711f97e8b","href":"https://static.observableusercontent.com/files/1b750a8a44718dd79bf3e9c74822d76b97787a38ba3c444ad2bf37d23b54c87af15944cd32dbda1d1eace0bdf0a62cbb63f3952b39a9e27a28cc83e711f97e8b","name":"TTPD Data - Lyrics for color legend hover (6).csv","type":"text/csv","lastModified":1723734098410.741,"size":1416},{"id":"d6175047ce829d025fd6fc91e3747ef5076a09b19e888f1412fea5f8e1bf46f11678837e20126b1e86c04be9c123cc25c0753816d2934602328ec56985edcdc1","href":"https://static.observableusercontent.com/files/d6175047ce829d025fd6fc91e3747ef5076a09b19e888f1412fea5f8e1bf46f11678837e20126b1e86c04be9c123cc25c0753816d2934602328ec56985edcdc1","name":"icons8-music-record-50.png","type":"image/png","lastModified":1722253468197.248,"size":868},{"id":"97ac697c5122738d9c5d5ae61b7140d05f99000ad02bacb1f8d581a7926fe3c6716f921b9dd21c5bf39ad64b0a95489c17e56e4ca23249ce933cbddf76d87e15","href":"https://static.observableusercontent.com/files/97ac697c5122738d9c5d5ae61b7140d05f99000ad02bacb1f8d581a7926fe3c6716f921b9dd21c5bf39ad64b0a95489c17e56e4ca23249ce933cbddf76d87e15","name":"TTPD Data - LYRICS (5)@1.csv","type":"text/csv","lastModified":1738358618012.865,"size":11702}] 2b:{"id":"fc3dbf7fae601f76","slug":null,"title":"The Tortured Data Viz Department","thumbnail":"9bf3289a1b53a3cec583b1ac820ea2ca5280f01137e56260b6da719b4ed188a1","access_level":"public","create_time":"$D2024-07-26T12:06:09.027Z","update_time":"$D2025-02-01T13:42:18.308Z","view_time":null,"first_public_time":"$D2024-07-26T12:06:09.027Z","has_unpublished_edits":null,"fork":true,"stars":10,"starred":false,"owner":{"type":"team","id":"f7051f3637685f37","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":"starter_2024"},"version":6000,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6623c69750f4d77","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":null}],"members":[{"type":"individual","id":"c6623c69750f4d77","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":null,"role":"editor"},{"type":"team","id":"f7051f3637685f37","login":"kelsey-n","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ea8296efa15aab77ef16fe9573c923b11fbb0302fb0a4bbe9bdf7360567e56ce","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"The Tortured Data Viz Department","cells":[{"id":724,"value":"# The Tortured Data Viz Department\n\n## Officially published in Nightingale Journal\n\n
\n\n### If referencing this notebook, please credit Kelsey Nanan. Thank you!\nInstagram: @datavizard868\n
\nPortfolio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5986,"value":"Shout-out to the following invaluable resources:\n1. Ben Tanen's SVG text wrapping\n2. Nadieh Bremer's tutorial on animating a dashed line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4733,"value":"### Helper functions for intro animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4097,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4334,"value":"function rotateIntroText() {\n const path = d3.select('#intro-anim').node();\n if (path) {\n const pathLength = path.getTotalLength();\n const duration = 22000; // Duration in milliseconds\n\n function repeat() {\n d3.select('.intro-anim-text-path textPath')\n .transition()\n .duration(duration)\n .ease(d3.easeLinear)\n .attrTween('startOffset', function() {\n return d3.interpolateString('100%', '0%');\n })\n .on('end', repeat); // Repeat the animation\n }\n\n repeat();\n } else {\n console.log('error')\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4728,"value":"### Hover functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1724,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1733,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3341,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3399,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4919,"value":"function clearColorLegendHover(duration=300) {\n // Clear all highlights if intro animation was last on the color legend: \n d3.selectAll('.main-arcs-g,.legend-text,.legend-path-g')\n .transition().duration(duration)\n .style('opacity', 1)\n d3.selectAll('.rough-g path')\n // .transition().duration(100)\n .attr('opacity', 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5013,"value":"function clearSingabilityLegendHover() {\n d3.selectAll('.singability-legend-text')\n .text(defaultSingabilityText)\n .each(function(d, i) { wrap_text(d3.select(this), singabilityWrap) })\n d3.selectAll('.singability-legend-arc,.singability-number')\n .transition().duration(300)\n .style('opacity', 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5270,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4731,"value":"### Helper functions for lyrics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4793,"value":"function getSongAngle(d) {\n const { x } = constants\n return (x(d['Song']) + x.bandwidth() / 2) % (2 * Math.PI)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4775,"value":"function getArcStartAngle(d) {\n const { x } = constants\n return getSongAngle(d) < Math.PI \n ? x(d.Song) + (getSongAngle(d) > Math.PI / 2 ? x.bandwidth() : 0)\n : x('Guilty as Sin?') + x.bandwidth() * 0.75\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4755,"value":"function getArcEndAngle(d) {\n const { x } = constants\n return getSongAngle(d) < Math.PI / 2 \n || getSongAngle(d) > Math.PI * 1.5\n ? x('Guilty as Sin?') + x.bandwidth() * 0.75 + 2 * Math.PI\n : x('Guilty as Sin?') + x.bandwidth() * 0.75 - 2 * Math.PI;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4759,"value":"function getNewArcStartAngle(d) {\n return getSongAngle(d) < Math.PI / 2 \n || getSongAngle(d) > Math.PI * 1.5\n ? getArcStartAngle(d) - 1.5 * Math.PI \n : getArcStartAngle(d) + 1.5 * Math.PI\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4762,"value":"function getNewArcEndAngle(d) {\n return getSongAngle(d) < Math.PI / 2 \n || getSongAngle(d) > Math.PI * 1.5\n ? getArcStartAngle(d) - 1.5 * Math.PI + 2 * Math.PI // change +/- here to change orientation of lyrics\n : getArcStartAngle(d) + 1.5 * Math.PI - 2 * Math.PI\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4767,"value":"function interpolateAngles(startAngle, endAngle, clockwise = true) {\n if (clockwise) {\n // Ensure clockwise transition\n while (endAngle < startAngle) endAngle += 2 * Math.PI;\n } else {\n // Ensure counterclockwise transition\n while (endAngle > startAngle) endAngle -= 2 * Math.PI;\n }\n return d3.interpolate(startAngle, endAngle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4780,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4783,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4605,"value":"### Functions that append elements to svg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4607,"value":"function addRecordDropShadow(svg) {\n // Define the filter in D3 style\n const defs = svg.append(\"defs\");\n\n const dropShadowFilter = defs.append(\"filter\")\n .attr(\"id\", \"dropshadow\")\n .attr(\"height\", \"130%\");\n\n dropShadowFilter.append(\"feGaussianBlur\")\n .attr('id', 'drop-shadow-blur')\n .attr(\"in\", \"SourceAlpha\")\n .attr(\"stdDeviation\", 13);\n\n dropShadowFilter.append(\"feOffset\")\n .attr(\"dx\", 5)\n .attr(\"dy\", 5)\n .attr(\"result\", \"offsetblur\");\n\n const feComponentTransfer = dropShadowFilter.append(\"feComponentTransfer\");\n feComponentTransfer.append(\"feFuncA\")\n .attr(\"type\", \"linear\")\n .attr(\"slope\", 0.5);\n\n const feMerge = dropShadowFilter.append(\"feMerge\");\n feMerge.append(\"feMergeNode\")\n .attr(\"in\", \"offsetblur\");\n feMerge.append(\"feMergeNode\")\n .attr(\"in\", \"SourceGraphic\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4615,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4620,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4629,"value":"function addRecordCenter(recordCenter, light, designVals) {\n const { innerRadius, circleRad } = constants\n // Record center background\n recordCenter.append(\"g\")\n .selectAll()\n .data([null])\n .join(\"g\")\n .call(g => g.append(\"circle\")\n .attr(\"r\", innerRadius)\n .attr(\"id\", \"record-center\")\n .attr(\"fill\", designVals.innerCircle))\n\n // Center hole of record \n recordCenter.append(\"g\")\n .selectAll(\".antonoff-legend-circle\")\n .data([null])\n .join(\"circle\")\n .attr('class', 'antonoff-legend-circle')\n .attr(\"fill\", designVals.producerCircles)\n .attr(\"r\", circleRad)\n recordCenter.append('image')\n .classed('logo-img', true)\n .attr('xlink:href', light ? logoLight : logoDark)\n .attr('x', -15)\n .attr('y', -innerRadius / 2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4638,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4647,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4651,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4674,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4678,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4688,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4824,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4832,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5530,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4843,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4857,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4901,"value":"### Update chart color scheme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4887,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4726,"value":"### Data load","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"data = FileAttachment(\"TTPD Data - DATA (3).csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"new Set(data.map(d => d['Theme']))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5378,"value":"lyricData = FileAttachment(\"TTPD Data - LYRICS (5)@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5879,"value":"legendData = FileAttachment(\"TTPD Data - DUMMYLEGENDCOLOR (2).csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5885,"value":"legendSingabilityData = FileAttachment(\"TTPD Data - DUMMYLEGENDSINGABILITY.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5891,"value":"colorLegendLyrics = FileAttachment(\"TTPD Data - Lyrics for color legend hover (6).csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4736,"value":"### SVG images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":588,"value":"logoLight = FileAttachment(\"TTPD logo light.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"logoDark = FileAttachment(\"TTPD logo dark.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"vectorDark = FileAttachment(\"Vector black@1.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"vectorWhite = FileAttachment(\"Vector white@1.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"needleSilver = FileAttachment(\"Group 3.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5947,"value":"needleLight = FileAttachment(\"Group 7 - 11.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5949,"value":"needleDark = FileAttachment(\"Group 7 - 12.svg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5042,"value":"recordImage = FileAttachment(\"icons8-music-record-50.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4738,"value":"### Helper functions for data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"// Function to create arrays for each data point representing each arc\nfunction prepareArcData(data) {\n return data.map(d => Array.from({length: d.Singability}, (_, i) => ({\n ...d,\n arcIndex: i\n })));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"function expandStackedData(series) {\n const { maxPerBand } = constants\n return series.map((layer, layerIndex) => ({\n key: layer.key,\n values: layer.flatMap(d => {\n let entries = [];\n let baseValue = layerIndex * maxPerBand; // Start from the top of the last layer\n for (let i = 0; i < maxPerBand; i++) {\n entries.push({\n ...d.data,\n startValue: baseValue + i,\n endValue: baseValue + i + (i < d[1] - d[0] ? 1 : 0),\n key: layer.key\n });\n }\n return entries;\n })\n }));\n}\n\n// // Function to expand the data\n// function expandStackedData(series) {\n// return series.map(layer => ({\n// key: layer.key,\n// // Flatten each stack segment into unit segments\n// values: layer.map(d => [...Array(Math.round(d[1] - d[0])).keys()].map(unit => ({\n// ...d.data,\n// startValue: d[0] + unit,\n// endValue: d[0] + unit + 1\n// }))).flat()\n// }));\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"function polarToCartesian(r, theta) {\n return {\n xPos: r * Math.cos(theta),\n yPos: r * Math.sin(theta)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5895,"value":"function getRandomRow(dataset) {\n const randomIndex = Math.floor(Math.random() * dataset.length);\n return dataset[randomIndex];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4741,"value":"### Helper constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5991,"value":"viewof starColorDark = Inputs.color({label: \"Star bg color (dark V)\", value: \"#9900ff\"})\n// OG pink: ff00c8\n// purple: 9900ff\n// neon coral: ff006f #1\n// orange: ff0000\n// royal blue: 4600eb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5995,"value":"viewof starColorLight = Inputs.color({label: \"Star bg color (light V)\", value: \"#ffa200\"})\n// OG orange: f66d06\n// lighter orange: ffab6b\n// light red coral: ff6b6b\n// light orange: ffa200 #2\n// light pink: f08f8f\n// muted purple/pink: ce73b1 #1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5969,"value":"// Helper constant for determining if browser is Firefox since Firefox doesn't handle textPaths well \n// Slightly different treatment for clipPaths for textPaths, as well as adjusting position of rough.js lines\nisFirefox = navigator.userAgent.toLowerCase().includes('firefox')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4589,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4801,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2738,"value":"singabilityCategories = [\n 'likely skip', 'singable parts', 'mostly singable', 'must sing'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"introLyricData = [\n {\n Song: 'Guilty as Sin?',\n }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2744,"value":"defaultSingabilityText = 'How much do you want to belt out this song? Scored from 0 (likely skip) to 3 (must sing)'\n// 'How much does this song make you want to belt it out? Scored from 0 (likely skip) to 3 (singable banger start-to-end)'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4836,"value":"themeLegendText = [\n \"Song Themes\",\n \" \"\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5972,"value":"singabilityWrap = 88","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4743,"value":"### Library imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2416,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2799,"value":"rough = (await import(\"https://cdn.skypack.dev/roughjs\")).default;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5898,"value":"### Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5829,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2689,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W47","stdlib":"1","titling":"auto"}} 2c:"$2b:body"