31:T75f,32:Ta90,drawTallyMarks = (count) => { const margin = { top: 20, right: 10, bottom: 10, left: 120 }; const lineSpacing = 10; // Space between individual tally marks const groupSpacing = 15; // Space between groups const rowSpacing = 30; // Vertical space between rows const tallyHeight = 20; // Height of tally marks const marksPerGroup = 5; // Each group contains 5 tally marks (4 vertical + 1 diagonal) const groupsPerRow = 20; // Each row contains 20 groups const tallyPerRow = marksPerGroup * groupsPerRow; const numRows = Math.ceil(count / tallyPerRow); const containerWidth = groupsPerRow * ((marksPerGroup - 1) * lineSpacing + groupSpacing) + margin.left + margin.right; const containerHeight = numRows * rowSpacing + margin.top + margin.bottom; d3.select("svg").remove(); const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("width", containerWidth) .attr("height", containerHeight) .attr("style", "max-width: 100%; height: auto;"); const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${margin.left},${margin.top})`); for (let i = 0; i < count; i += marksPerGroup) { let row = Math.floor(i / tallyPerRow); let column = (i % tallyPerRow) / marksPerGroup; let xGroup = column * ((marksPerGroup - 1) * lineSpacing + groupSpacing); let yGroup = row * rowSpacing; if (i % tallyPerRow === 0) { let marksInRow = Math.min(tallyPerRow, count - row * tallyPerRow); chartContainer .append("text") .attr("x", -15) .attr("y", yGroup + tallyHeight / 2) .attr("text-anchor", "end") .attr("font-weight", "bold") .attr("alignment-baseline", "middle") .attr("font-size", "13px") .attr("fill", "#0167ff") .text(`${marksInRow}`); } let tallyGroup = chartContainer .append("g") .attr("transform", `translate(${xGroup},${yGroup})`); for (let j = 0; j < marksPerGroup - 1 && i + j < count; j++) { tallyGroup .append("line") .attr("x1", j * lineSpacing) .attr("y1", 0) .attr("x2", j * lineSpacing) .attr("y2", tallyHeight) .attr("stroke", "black") .attr("fill", "none") .attr("stroke-width", 1); } if (i + marksPerGroup <= count) { tallyGroup .append("line") .attr("x1", 0) .attr("y1", 2) .attr("x2", (marksPerGroup - 2) * lineSpacing) // Extend across 4 vertical lines .attr("y2", tallyHeight - 2) .attr("stroke", "red") .attr("stroke-width", 2); } } return svg.node(); } 33:T5a9,ipoData = [ { country: "India", flagCode: "IN", flagUrl: "https://flagcdn.com/w320/in.png", ipoCount: 327, ipoValue: 19.9 }, { country: "United States", flagCode: "US", flagUrl: "https://flagcdn.com/w320/us.png", ipoCount: 183, ipoValue: 32.8 }, { country: "Europe (ex. UK)", flagCode: "EU", flagUrl: "https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg", ipoCount: 115, ipoValue: 18.2 }, { country: "China", flagCode: "CN", flagUrl: "https://flagcdn.com/w320/cn.png", ipoCount: 98, ipoValue: 8.9 }, { country: "Japan", flagCode: "JP", flagUrl: "https://flagcdn.com/w320/jp.png", ipoCount: 84, ipoValue: 6.2 }, { country: "South Korea", flagCode: "KR", flagUrl: "https://flagcdn.com/w320/kr.png", ipoCount: 75, ipoValue: 2.9 }, { country: "Hong Kong", flagCode: "HK", flagUrl: "https://flagcdn.com/w320/hk.png", ipoCount: 64, ipoValue: 10.7 }, { country: "Malaysia", flagCode: "MY", flagUrl: "https://flagcdn.com/w320/my.png", ipoCount: 49, ipoValue: 1.7 }, { country: "Saudi Arabia", flagCode: "SA", flagUrl: "https://flagcdn.com/w320/sa.png", ipoCount: 42, ipoValue: 4.3 }, { country: "UK", flagCode: "GB", flagUrl: "https://flagcdn.com/w320/gb.png", ipoCount: 10, ipoValue: 0.9 } ]34:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744293324833.622,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744293328177.265,"size":2966}] 2f:{"title":"Global IPO Landscape","cells":[{"id":7,"value":"

Global IPO Landscape

Chart Type: Tally Marks Chart, Tech Stack: D3.js, SVG

Data Sources: Ernst and Young’s (EY)

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

A country-wise ranking of IPO activity in 2024, highlighting the top 10 by listings and revenue.

","pinned":false,"hidden":false,"mode":"html"},{"id":373,"value":"html`${ipoData.map(\n (d) => html`\n \n ${drawTallyMarks(d.ipoCount)}\n `\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"

Flag Image: flagcdn

","pinned":false,"hidden":false,"mode":"html"},{"id":371,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":127,"value":"### Tally Marks Chart Function","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":432,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":434,"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":402,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":404,"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":424,"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":399,"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"}