31:T804,32:T1015,drawPictogramChart = (NominatedCount, wonCount) => { // D3.js Margin Convention const margin = { top: 70, right: 20, bottom: 20, left: 40 }; // Set Circle Configurartion const circleRadius = 18; const circleSpacing = 40; const rowSpacing = 40; const circlesPerRow = 20; const numRows = Math.ceil(NominatedCount / circlesPerRow); // Dynamic Chart Width const chartWidth = circlesPerRow * circleSpacing + margin.left + margin.right; const chartHeight = numRows * rowSpacing + margin.top + margin.bottom; // Remove existing SVG before redrawing d3.select("svg").remove(); // Create SVG element and set viewBox for responsiveness const svg = d3 .create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) // allows responsiveness .attr("width", chartWidth) .attr("height", chartHeight) .attr("style", "max-width: 100%; height: auto;") .style("background-color", "#1E1E1E"); // Create chart container within SVG, adjusted for margins const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${margin.left},${margin.top})`); // Create a temporary SVG element to measure text width const tempSvg = d3.create("svg").attr("class", "temp-svg"); // Measure text width dynamically const textWidths = legendData.map((d) => { const tempText = tempSvg .append("text") .text(d.label) .attr("font-size", "16px"); const width = tempText.node().getBBox().width; // Get text width tempText.remove(); return width; }); tempSvg.remove(); // Remove temporary SVG after measuring // Calculate dynamic legend item width const padding = 100; // Space between circle and text const legendItemWidths = textWidths.map((width) => width + padding); const totalLegendWidth = legendItemWidths.reduce( (acc, width) => acc + width, 0 ); // Calculate initial x positions for centering let xOffset = (chartWidth - totalLegendWidth) / 2; // Create legend container const legendContainer = svg .append("g") .attr("class", "g-legend-container") .attr("transform", `translate(${xOffset}, ${margin.top / 6})`); // Append legend items const legendItems = legendContainer .selectAll(".legend-item") .data(legendData) .join("g") .attr("class", "g-legend-item") .attr("transform", (d, i) => { const xPos = legendItemWidths.slice(0, i).reduce((acc, w) => acc + w, 0); return `translate(${xPos}, 0)`; }); // Append circles legendItems .append("circle") .attr("cx", 10) .attr("cy", 10) .attr("r", 10) .attr("fill", (d) => d.color); // Append text legendItems .append("text") .attr("x", 30) .attr("y", 12) .attr("font-size", "16px") .attr("fill", "#ffffff") //.attr("font-weight", "bold") .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .text((d) => d.label); // Generate data array const data = d3.range(NominatedCount); // Draw circles using D3 data join const circles = chartContainer .selectAll(".circle-group") .data(data) .join("g") .attr("class", "circle-group") .attr("transform", (d) => { let row = Math.floor(d / circlesPerRow); let column = d % circlesPerRow; return `translate(${column * circleSpacing},${row * rowSpacing})`; }); circles .append("circle") .attr("r", circleRadius) .attr("fill", (d) => d < wonCount ? legendData[0].color : legendData[1].color ) .style("transition", "fill 0.3s ease, transform 0.2s ease") .on("mouseover", function () { d3.select(this) .transition() .duration(200) .attr("r", circleRadius + 2); }) .on("mouseout", function () { d3.select(this).transition().duration(200).attr("r", circleRadius); }); // Add text inside circles circles .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", "12px") .attr("fill", "#000000") .text((d) => d + 1); return svg.node(); }33:T743,grammyData = [ { rank: 1, artist: "Beyoncé", grammy_nominations: 99, grammy_wins: 35, image: "https://i8.amplience.net/i/naras/Beyonce-2025-GRAMMYs-BHM-Hero.jpg" }, { rank: 2, artist: "Jay-Z", grammy_nominations: 89, grammy_wins: 26, image: "https://i8.amplience.net/i/naras/MI0005148022-MN0000224257" }, { rank: 3, artist: "Paul McCartney", grammy_nominations: 84, grammy_wins: 19, image: "https://i8.amplience.net/i/naras/paul-mccartney_MI0005076733-MN0000029884" }, { rank: 4, artist: "Quincy Jones", grammy_nominations: 80, grammy_wins: 28, image: "https://i8.amplience.net/i/naras/quincy-jones_MI0001341883-MN0000378624" }, { rank: 5, artist: "John Williams", grammy_nominations: 76, grammy_wins: 26, image: "https://i8.amplience.net/i/naras/john-williams_MI0003572988-MN0000232480" }, { rank: 6, artist: "Kanye West", grammy_nominations: 76, grammy_wins: 24, image: "https://i8.amplience.net/i/naras/kanye-west_MI0005472981-MN0000361014" }, { rank: 7, artist: "Chick Corea", grammy_nominations: 75, grammy_wins: 28, image: "https://i8.amplience.net/i/naras/chick-corea_MI0004886953-MN0000110541" }, { rank: 8, artist: "Georg Solti", grammy_nominations: 74, grammy_wins: 31, image: "https://i8.amplience.net/i/naras/MI0005686012-MN0000599035" }, { rank: 9, artist: "Stevie Wonder", grammy_nominations: 74, grammy_wins: 25, image: "https://i8.amplience.net/i/naras/stevie-wonder_MI0003653636-MN0000622805" }, { rank: 10, artist: "Henry Mancini", grammy_nominations: 72, grammy_wins: 20, image: "https://i8.amplience.net/i/naras/henry-mancini_MI0001400291-MN0000678009" } ]34:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744291735703.456,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744291738203.245,"size":2966}] 2f:{"title":"Most Grammy Nominations Ever","cells":[{"id":36,"value":"

Most Grammy Nominations Ever

Chart Type: Pictogram Chart, Tech Stack: D3.js, SVG

Data Sources: Grammy Awards & Wikipedia

\n","pinned":false,"hidden":false,"mode":"html"},{"id":122,"value":"

As of February 2025, these artists have received the highest number of Grammy nominations ever.

","pinned":false,"hidden":false,"mode":"html"},{"id":375,"value":"html`${grammyData.map(\n (d) => html`\n

\n \n

Rank #${d.rank}

\n\n \n

\n $\"Artist\"$ \n

${d.artist}

Wins: ${d.grammy_wins} | Nominations: ${\n d.grammy_nominations\n }

\n\n \n

\n ${drawPictogramChart(d.grammy_nominations, d.grammy_wins)}\n

\n`\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"

Image Source: GRAMMY Artist

","pinned":false,"hidden":false,"mode":"html"},{"id":46,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":144,"value":"### Pictogram Chart","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"### Chart Data & Legend Data","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"legendData = [\n { color: \"#00ff00\", label: \"Wins\", code: \"wins\" },\n { color: \"#ffb9b9\", label: \"Nominations\", code: \"nominations\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"

\n \n $\"Observable$ \n \n \n $\"D3.js\"$ \n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"*[D3.js Docs.](https://d3js.org/getting-started) | [Observable Notebook Docs.](https://observablehq.com/documentation/notebooks/) | [SVG Docs.](https://developer.mozilla.org/en-US/docs/Web/SVG)* ","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":429,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":431,"value":"*The author utilized AI tools such as Gemini and ChatGPT as coding assistants during the development of this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"

⚠️ Disclaimer ⚠️

\n This project provides data visualizations for informational purposes only. While we aim for accuracy, the data may contain errors or omissions. It should not be used as financial, legal, or professional advice. We are not responsible for any decisions made based on this information. Use at your own discretion.\n

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}