31:T96c,chart2 = { replay; const container = html``; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); // function that sets the tooltip's HTML when revealed // can be passed the hovered selection's datum function tooltipContents(datum) { const { Song, Artist, month, year } = datum; return `Song: ${Song}
Artist: ${Artist}
Chart Date: ${month}/${year} `; } const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(d3.axisLeft(y)) .style("font-size", "15px") .call(axis => axis .append("text") .text(xLabel) .style("fill", "#fcfcfc") .style("text-anchor", "middle") .style("font-size", "16px") .attr("x", 50) .attr("y", 80) ); g.append("g") .attr("fill", "#B8BFC6") .selectAll("rect") .data(dataPos) .join("rect") .attr("x", d => d.x0) .attr("width", barWidth) .attr("height", barHeight) .attr("fill", d => color(d.core_genre)) .on("mouseover", (event, d) => { tooltip.display(d, tooltipContents); // tooltip.style("opacity", 1) // d3.select(this) // .style("stroke", "white") // .style("opacity", 1); }) .on("mouseout", () => { tooltip.hide(); }) .on("mousemove", event => { tooltip.move(event); }) .transition() .duration((d, i) => 0.1 * (d.yearsIndex + 1) * (data.length - yearsCount.get(d.year))) .delay((d, i) => Math.floor(d.count / nRows) * 20 + (d.count % nRows) * 5) .attr("x", d => d.x1) .attr("y", d => d.y1) .attr("width", squareSize) .attr("height", squareSize) .attr("stroke-width", 0.5) .attr("stroke", "black") return container; }32:T7be,function Swatches2(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }33:[{"id":"b10b18453c255b1ce663f4d806b8ba9fad92c3171ac575809335d99f5c6cddff55df892a9cb3e54088fd81298a4ef80c7c60cc5a309f5fc2a451778b3ed5eeac","href":"https://static.observableusercontent.com/files/b10b18453c255b1ce663f4d806b8ba9fad92c3171ac575809335d99f5c6cddff55df892a9cb3e54088fd81298a4ef80c7c60cc5a309f5fc2a451778b3ed5eeac","name":"genres_unique_songs.csv","type":"text/csv","lastModified":1636575329477.59,"size":306872}] 2f:{"title":"Spotify - Song count by Year & Genre","cells":[{"id":0,"value":"md`# Spotify - Song count by Year & Genre`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"viewof replay = html`