31:T229c,chart = { const orangeCapImage = legendData[0].image; const purpleCapImage = legendData[1].image; const containerWidth = 1152; const margin = { top: 10, right: 50, bottom: 50, left: 200 }; const rowHeight = 120; const teamLogoWidth = 100; const teamLogoHeight = 100; const capWidth = 60; const capHeight = 60; const capGap = 70; const fontSize = "16px"; const labelFontSize = "14px"; const tooltipFontSize = "14px"; const tooltipHeaderFontSize = "20px"; const tooltipColor = "#ebebeb"; const yearLabelColor = "#57ffb1"; const backgroundColor = "#031945"; const percentageColor = "#00f3ff"; const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = chartData.length * rowHeight; const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, containerWidth, chartHeight + margin.top + margin.bottom ]) .attr("width", containerWidth) .attr("height", chartHeight + margin.top + margin.bottom) .attr( "style", `max-width: 100%; height: auto; background-color:${backgroundColor}` ); const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${margin.left}, ${margin.top})`); const teamRows = chartContainer .selectAll(".team-row") .data(chartData) .join("g") .attr("class", "team-row") .attr("transform", (d, i) => `translate(0, ${i * rowHeight})`); teamRows .append("image") .attr("href", (d) => d.logo) .attr("width", teamLogoWidth) .attr("height", teamLogoHeight); teamRows .append("text") .attr("class", "team-name") .attr("x", teamLogoWidth / 2) .attr("y", teamLogoHeight + 5) .attr("dy", "0.35em") .attr("font-size", fontSize) .attr("font-weight", "bold") .attr("fill", "white") .attr("text-anchor", "middle") .text((d) => d.code); const capSections = teamRows .append("g") .attr("class", "cap-container") .attr("transform", `translate(${rowHeight}, 15)`); chartData.forEach((team, index) => { const row = chartContainer .selectAll(".team-row") .filter((d, i) => i === index); const capSection = row.select(".cap-container"); // Orange Caps const orangeGroup = capSection .append("g") .attr("class", "orange-cap-section") .attr("transform", `translate(0, 0)`); team.orange.forEach((year, j) => { const g = orangeGroup .append("g") .attr("class", "cap") .attr("transform", `translate(${j * capGap}, 0)`); g.append("image") .attr("href", orangeCapImage) .attr("width", capWidth) .attr("height", capHeight) .on("mouseover", function (event) { const leaderData = year.data; tooltipContainer.style("visibility", "visible").html(`

${leaderData.leader}

Matches ${leaderData.matches}

Runs ${leaderData.runs}

${leaderData.leader}

Matches ${leaderData.matches}

Wickets ${leaderData.wickets}

`); }) .on("mousemove", function (event) { const tooltipWidth = tooltipContainer.node().offsetWidth; const tooltipHeight = tooltipContainer.node().offsetHeight; let x = event.pageX + 10; let y = event.pageY + 10; if (x + tooltipWidth > containerWidth) { x = event.pageX - tooltipWidth - 10; if (x < margin.left) x = margin.left; } if (y + tooltipHeight > chartHeight + margin.top + margin.bottom) { y = event.pageY - tooltipHeight - 10; if (y < margin.top) y = margin.top; } tooltipContainer.style("left", `${x}px`).style("top", `${y}px`); }) .on("mouseout", function () { tooltipContainer.style("visibility", "hidden"); }); g.append("text") .attr("class", "year-label") .attr("y", capHeight + 10) .attr("x", capWidth / 2) .attr("fill", yearLabelColor) .attr("text-anchor", "middle") .text(year.year); }); }); svg .append("text") .attr("x", containerWidth / 2) .attr("y", chartHeight + margin.top + margin.bottom / 2) .attr("text-anchor", "middle") .attr("font-size", labelFontSize) .attr("fill", "white") .text("Note: The Deccan Chargers (DCH) are excluded from this list."); const tooltipContainer = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#333333") .style("color", "#ebebeb") .style("padding", "12px 15px") .style("border-radius", "8px") .style("box-shadow", "0px 4px 8px rgba(0, 0, 0, 0.2)") .style("font-family", "Arial, sans-serif") .style("font-size", tooltipFontSize) .style("min-width", "200px") .style("max-width", "300px") .style("height", "auto") .style("visibility", "hidden") .style("pointer-events", "none"); return svg.node(); }32:T266d,chartData = [ { team: "Chennai Super Kings", code: "CSK", logo: "https://documents.iplt20.com/ipl/CSK/logos/Logooutline/CSKoutline.png", orange: [ { year: 2009, data: { leader: "Matthew Hayden", playerLogo: "https://staticg.sportskeeda.com/editor/2022/04/23d72-16503738435198-1920.jpg", runs: 572, matches: 12, wickets: 0 } }, { year: 2013, data: { leader: "Michael Hussey", playerLogo: "https://staticg.sportskeeda.com/editor/2022/04/41198-16503739814407-1920.jpg", runs: 733, matches: 16, wickets: 0 } }, { year: 2021, data: { leader: "Ruturaj Gaikwad", playerLogo: "https://documents.iplt20.com/ipl/IPLHeadshot2025/102.png", runs: 635, matches: 16, wickets: 0 } } ], purple: [ { year: 2013, data: { leader: "Dwayne Bravo", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/25.png", runs: 0, matches: 18, wickets: 32 } }, { year: 2014, data: { leader: "Mohit Sharma", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/1107.png", runs: 0, matches: 16, wickets: 23 } }, { year: 2015, data: { leader: "Dwayne Bravo", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/25.png", runs: 0, matches: 16, wickets: 26 } }, { year: 2019, data: { leader: "Imran Tahir", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/898.png", runs: 0, matches: 17, wickets: 26 } } ] }, { team: "Sunrisers Hyderabad", code: "SRH", logo: "https://documents.iplt20.com/ipl/SRH/Logos/Logooutline/SRHoutline.png", orange: [ { year: 2015, data: { leader: "David Warner", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/170.png", runs: 562, matches: 14, wickets: 0 } }, { year: 2017, data: { leader: "David Warner", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/170.png", runs: 641, matches: 14, wickets: 0 } }, { year: 2018, data: { leader: "Kane Williamson", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/440.png", runs: 735, matches: 17, wickets: 0 } }, { year: 2019, data: { leader: "David Warner", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/170.png", runs: 692, matches: 12, wickets: 0 } } ], purple: [ { year: 2016, data: { leader: "Bhuvneshwar Kumar", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/116.png", runs: 0, matches: 17, wickets: 23 } }, { year: 2017, data: { leader: "Bhuvneshwar Kumar", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/116.png", runs: 0, matches: 14, wickets: 26 } } ] }, { team: "Royal Challengers Bangalore", code: "RCB", logo: "https://documents.iplt20.com/ipl/RCB/Logos/Logooutline/RCBoutline.png", orange: [ { year: 2011, data: { leader: "Chris Gayle", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/236.png", runs: 608, matches: 12, wickets: 0 } }, { year: 2012, data: { leader: "Chris Gayle", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/236.png", runs: 733, matches: 15, wickets: 0 } }, { year: 2016, data: { leader: "Virat Kohli", playerLogo: "https://documents.iplt20.com/ipl/IPLHeadshot2025/2.png", runs: 973, matches: 16, wickets: 0 } }, { year: 2024, data: { leader: "Virat Kohli", playerLogo: "https://documents.iplt20.com/ipl/IPLHeadshot2025/2.png", runs: 741, matches: 15, wickets: 0 } } ], purple: [ { year: 2021, data: { leader: "Harshal Patel", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/157.png", runs: 0, matches: 15, wickets: 32 } } ] }, { team: "Punjab Kings", code: "PBKS", logo: "https://documents.iplt20.com/ipl/PBKS/Logos/Logooutline/PBKSoutline.png", orange: [ { year: 2008, data: { leader: "Shaun Marsh", playerLogo: "https://staticg.sportskeeda.com/editor/2022/04/0073e-16503738094903-1920.jpg", runs: 616, matches: 11, wickets: 0 } }, { year: 2020, data: { leader: "KL Rahul", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/1125.png", runs: 670, matches: 14, wickets: 0 } } ], purple: [ { year: 2018, data: { leader: "Andrew Tye", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/1480.png", runs: 0, matches: 14, wickets: 24 } }, { year: 2024, data: { leader: "Harshal Patel", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/157.png", runs: 0, matches: 14, wickets: 24 } } ] }, { team: "Rajasthan Royals", code: "RR", logo: "https://documents.iplt20.com/ipl/RR/Logos/Logooutline/RRoutline.png", orange: [ { year: 2022, data: { leader: "Jos Buttler", playerLogo: "https://assets.iplt20.com/ipl/IPLHeadshot2022/509.png", runs: 863, matches: 17, wickets: 0 } } ], purple: [ { year: 2008, data: { leader: "Sohail Tanvir", playerLogo: "https://staticg.sportskeeda.com/editor/2022/04/65578-16503742188219-1920.jpg", runs: 0, matches: 11, wickets: 22 } }, { year: 2022, data: { leader: "Yuzvendra Chahal", playerLogo: "https://assets.iplt20.com/ipl/IPLHeadshot2022/111.png", runs: 0, matches: 17, wickets: 27 } } ] }, { team: "Gujarat Titans", code: "GT", logo: "https://documents.iplt20.com/ipl/GT/Logos/Logooutline/GToutline.png", orange: [ { year: 2023, data: { leader: "Shubman Gill", playerLogo: "https://documents.iplt20.com/ipl/IPLHeadshot2025/62.png", runs: 890, matches: 17, wickets: 0 } } ], purple: [ { year: 2023, data: { leader: "Mohammed Shami", playerLogo: "https://documents.iplt20.com/ipl/IPLHeadshot2023/47.png", runs: 0, matches: 17, wickets: 28 } } ] }, { team: "Mumbai Indians", code: "MI", logo: "https://documents.iplt20.com/ipl/MI/Logos/Logooutline/MIoutline.png", orange: [ { year: 2010, data: { leader: "Sachin Tendulkar", playerLogo: "https://staticg.sportskeeda.com/editor/2022/04/0073e-16503739221595-1920.jpg", runs: 618, matches: 15, wickets: 0 } } ], purple: [ { year: 2011, data: { leader: "Lasith Malinga", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/211.png", runs: 0, matches: 16, wickets: 28 } } ] }, { team: "Delhi Capitals", code: "DC", logo: "https://documents.iplt20.com/ipl/DC/Logos/LogoOutline/DCoutline.png", orange: [], purple: [ { year: 2012, data: { leader: "Morne Morkel", playerLogo: await FileAttachment("morne-morkel.png").url(), runs: 0, matches: 16, wickets: 25 } }, { year: 2020, data: { leader: "Kagiso Rabada", playerLogo: "https://documents.iplt20.com/playerheadshot/ipl/210/1664.png", runs: 0, matches: 17, wickets: 30 } } ] }, { team: "Kolkata Knight Riders", code: "KKR", logo: "https://documents.iplt20.com/ipl/KKR/Logos/Logooutline/KKRoutline.png", orange: [ { year: 2014, data: { leader: "Robin Uthappa", playerLogo: await FileAttachment("robin-uthappa.png").url(), runs: 660, matches: 16, wickets: 0 } } ], purple: [] } ]33:[{"id":"2cb5d9c6f8b4593fed784bd37eb8acef9f9ca1e39debed4efe69d0ecdd8d71c7eb2585f1925d538921c6196b0768afcdb1da626b0728bd0a5705199766bd75ad","href":"https://static.observableusercontent.com/files/2cb5d9c6f8b4593fed784bd37eb8acef9f9ca1e39debed4efe69d0ecdd8d71c7eb2585f1925d538921c6196b0768afcdb1da626b0728bd0a5705199766bd75ad","name":"orange-cap@5.png","type":"image/png","lastModified":1743924178145.857,"size":142017},{"id":"5f1c368c2b28fa0d41228470f7c5241096ffb17b6bf148ef70707905f428f85a451b933c8eb9afbe0d29648a679cf6b6a7e8ca047c1ecb99f6c5ec7c4e4d457f","href":"https://static.observableusercontent.com/files/5f1c368c2b28fa0d41228470f7c5241096ffb17b6bf148ef70707905f428f85a451b933c8eb9afbe0d29648a679cf6b6a7e8ca047c1ecb99f6c5ec7c4e4d457f","name":"robin-uthappa.png","type":"image/png","lastModified":1743935958296.508,"size":55872},{"id":"cfcab2ed7c09146b9a18b2a6ee4ced851f69cf7cbf778035e3a4ee598b9bd6bc893f20218c20a5ff7e6efb6a774cd476bf3cef62a4d650086911c445a31e50f1","href":"https://static.observableusercontent.com/files/cfcab2ed7c09146b9a18b2a6ee4ced851f69cf7cbf778035e3a4ee598b9bd6bc893f20218c20a5ff7e6efb6a774cd476bf3cef62a4d650086911c445a31e50f1","name":"morne-morkel.png","type":"image/png","lastModified":1743936390585.996,"size":146216},{"id":"6a75e1ea3d36bea1feaade55572aebab10c3c5ed403029b28c87e902b9d9026962acf6b6202e2f70b0eac49f50a9a7557aea770de9ba20ba0bf86c747cb98b28","href":"https://static.observableusercontent.com/files/6a75e1ea3d36bea1feaade55572aebab10c3c5ed403029b28c87e902b9d9026962acf6b6202e2f70b0eac49f50a9a7557aea770de9ba20ba0bf86c747cb98b28","name":"purple-cap@1.png","type":"image/png","lastModified":1743862769611.288,"size":155895},{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744274391747.896,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744274394329.435,"size":2966},{"id":"73660e07e92e261fa8cc401e26f13b989ac7a7be2dd26d489d634e2d609a9d8ce0ef3b3d62906e5d96c1698088beb690ee0159b1b1c7f32b9bfc38bd81cd0c32","href":"https://static.observableusercontent.com/files/73660e07e92e261fa8cc401e26f13b989ac7a7be2dd26d489d634e2d609a9d8ce0ef3b3d62906e5d96c1698088beb690ee0159b1b1c7f32b9bfc38bd81cd0c32","name":"canva.svg","type":"image/svg+xml","lastModified":1744274429524.211,"size":4457}] 2f:{"title":"Most Orange & Purple Caps by IPL Teams","cells":[{"id":21,"value":"

Most Orange & Purple Caps by IPL Teams

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

Data Sources: Wikipedia

","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"

A quick look at which IPL teams have bagged the most Orange and Purple Caps over the years (2008-2024) — the ultimate batting and bowling honors!

","pinned":false,"hidden":false,"mode":"html"},{"id":43,"value":"

\n ${legendData.map(item => html`\n

\n $\"${item.alt}\"$ \n ${item.label}\n

\n `)}\n

\n\n ","pinned":false,"hidden":false,"mode":"html"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"

Team Logo: IPL Website

","pinned":false,"hidden":false,"mode":"html"},{"id":19,"value":"

\n#30DayChartChallenge (Edition 2025)

| Day-5: Comparison | Ranking |

","pinned":false,"hidden":false,"mode":"html"},{"id":12,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":10,"value":"### Chart & Legend Data ","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"legendData = [\n {\n image: await FileAttachment(\"orange-cap@5.png\").url(),\n alt: \"Orange Cap\",\n label: \"Top Run Scorer\"\n },\n {\n image: await FileAttachment(\"purple-cap@1.png\").url(),\n alt: \"Purple Cap\",\n label: \"Top wicket Taker\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":288,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":290,"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":6,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":285,"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":4,"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":"$W33","stdlib":"1","titling":"auto"}