31:T196a,chart = { // Container dimensions (including margins) const containerWidth = 1152; const containerHeight = 700; const margin = { top: 50, right: 190, bottom: 50, left: 190 }; // Calculate chart area dimensions const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; // Create SVG element and set viewBox for responsiveness const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) // allows responsiveness .attr("width", containerWidth) .attr("height", containerHeight) .attr("style", "max-width: 100%; height: auto;"); const image = await FileAttachment("frame.png").url(); // Append an image as a background inside the SVG svg .append("image") .attr("href", image) .attr("width", containerWidth) .attr("height", containerHeight) .attr("preserveAspectRatio", "none"); // 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})`); // Movie data const data = { name: "Top Grossing Indian Movies 2024", children: chartData }; // Create a root node const root = d3 .hierarchy(data) .sum((d) => d.worldwide_gross) .sort((a, b) => b.worldwide_gross - a.worldwide_gross); // Create a treemap layout d3.treemap().size([chartWidth, chartHeight]).padding(2)(root); // color scale const color = d3.scaleOrdinal([ "#f9c8c8", "#c2e0c2", "#fffacd", "#b0e0e6", "#fdd49e", "#d8bfd8", "#afeeee", "#f5bcf5", "#e6e6fa", "#ffe4e1", "#b0c4de", "#e6e0ff", "#f5deb3", "#f08080", "#98fb98", "#ffe4c4", "#add8e6", "#d3d3d3" ]); // Create a tooltip container (Initially Hidden) const tooltipContainer = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "fixed") .style("background", "white") .style("color", "#333") .style("padding", "10px 12px") // Add more padding .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", "14px") .style("min-width", "200px") // Ensure enough width for content .style("max-width", "300px") // Limit the width .style("height", "auto") // Auto adjust height .style("visibility", "hidden") .style("pointer-events", "none") .style("border", "2px solid #333"); // Create nodes const nodes = chartContainer .selectAll("g") .data(root.leaves()) .join("g") .attr("class", "node") .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .on("mouseover", function (event, d) { tooltipContainer .style("visibility", "visible") .style("display", "block") .html( `

${d.data.title}

Budget: ₹${d.data.budget.toFixed( 2 )} crore

Worldwide Gross: ₹${d.data.worldwide_gross.toFixed( 2 )} crore

IMDb Rating: ${d.data.imdb_rating} (${ d.data.imdb_votes } votes)

Director: ${d.data.director}

Language: ${d.data.language}

` ); d3.select(this) .select("rect") .style("stroke", "#000000") .style("stroke-width", "2px") .style("opacity", 0.9); }) .on("mousemove", function (event) { const tooltipWidth = tooltipContainer.node().offsetWidth; const tooltipHeight = tooltipContainer.node().offsetHeight; let x = event.pageX + 10; let y = event.pageY + 10; // Adjust x if tooltip overflows container width if (x + tooltipWidth > chartWidth) { x = event.pageX - tooltipWidth - 10; if (x < margin.left) { x = margin.left; } } // Adjust y if tooltip overflows container height if (y + tooltipHeight > chartHeight) { 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"); d3.select(this) .select("rect") .style("stroke", "none") .style("opacity", 1); }); // Draw rectangles nodes .append("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("fill", (d) => color(d.data.title)) .attr("cursor", "pointer") .attr("rx", 6) .attr("ry", 6); // Add text labels (Centered) nodes .append("text") .attr("x", (d) => (d.x1 - d.x0) / 2) .attr("y", (d) => (d.y1 - d.y0) / 2) .attr("text-anchor", "middle") .html((d) => { const maxChars = Math.floor((d.x1 - d.x0) / 8); const title = d.data.title.length > maxChars ? d.data.title.substring(0, maxChars - 3) + "..." : d.data.title; const gross = d.data.worldwide_gross ? `${d.data.worldwide_gross.toFixed(2)} Cr.` : ""; return ( `${title}` + `${gross}` ); }); return svg.node(); }32:T49c,33:T16fb,chartData = [ { title: "Pushpa: The Rule - Part 2", year: 2024, duration: "3h 21m", rating: "15", imdb_rating: 6.1, imdb_votes: "55K", director: "Sukumar", stars: ["Allu Arjun", "Rashmika Mandanna", "Fahadh Faasil"], language: "Telugu", budget: 550, worldwide_gross: 1755.4, worldwide_share: 823.8, pre_release_business: 615, verdict: "Blockbuster", industry_hit: "Industry Hit in Hindi industry" }, { title: "Kalki 2898-AD", year: 2024, duration: "3h", rating: "12A", metascore: 65, imdb_rating: 7.0, imdb_votes: "66K", director: "Nag Ashwin", stars: ["Prabhas", "Amitabh Bachchan", "Kamal Haasan"], language: "Telugu", budget: 550, worldwide_gross: 1052.5, worldwide_share: 532.4, pre_release_business: 380, verdict: "Blockbuster" }, { title: "Stree 2", year: 2024, duration: "2h 27m", rating: "15", imdb_rating: 6.9, imdb_votes: "42K", director: "Amar Kaushik", stars: ["Rajkummar Rao", "Shraddha Kapoor", "Pankaj Tripathi"], language: "Hindi", budget: 100, worldwide_gross: 858.4, domestic_net_collection: "605.8cr", verdict: "All Time Blockbuster", industry_hit: "Industry Hit in Hindi industry" }, { title: "The Greatest of All Time", year: 2024, duration: "3h 3m", rating: "15", imdb_rating: 5.7, imdb_votes: "22K", director: "Venkat Prabhu", stars: ["Joseph Vijay", "Prashanth", "Prabhu Deva"], language: "Tamil", budget: 350, worldwide_gross: 460.3, worldwide_share: 223.6, pre_release_business: 185, verdict: "Hit" }, { title: "Devara Part 1", year: 2024, duration: "2h 56m", rating: "15", imdb_rating: 6.0, imdb_votes: "20K", director: "Koratala Siva", stars: ["N.T. Rama Rao Jr.", "Saif Ali Khan", "Janhvi Kapoor"], language: "Telugu", budget: 250, worldwide_gross: 443.8, worldwide_share: 244.3, pre_release_business: 180, verdict: "Super Hit" }, { title: "Bhool Bhulaiyaa 3", year: 2024, duration: "2h 38m", rating: "12A", imdb_rating: 4.7, imdb_votes: "77K", director: "Anees Bazmee", stars: ["Kartik Aaryan", "Vidya Balan", "Madhuri Dixit"], language: "Hindi", budget: 150, worldwide_gross: 396.7, domestic_net_collection: "260.7cr", verdict: "Super Hit" }, { title: "Singham Again", year: 2024, duration: "2h 24m", rating: "15", imdb_rating: 4.8, imdb_votes: "75K", director: "Rohit Shetty", stars: ["Ajay Devgn", "Kareena Kapoor", "Deepika Padukone"], language: "Hindi", budget: 300, worldwide_gross: 378.4, domestic_net_collection: "250.4cr", verdict: "Average" }, { title: "Fighter", year: 2024, duration: "2h 46m", rating: "15", metascore: 63, imdb_rating: 6.2, imdb_votes: "52K", director: "Siddharth Anand", stars: ["Hrithik Roshan", "Deepika Padukone", "Anil Kapoor"], language: "Hindi", budget: 225, worldwide_gross: 355.4, domestic_net_collection: "212.5cr", verdict: "Above Average" }, { title: "Amaran", year: 2024, duration: "2h 47m", rating: "15", imdb_rating: 8.2, imdb_votes: "18K", director: "Rajkumar Periasamy", stars: ["Sivakarthikeyan", "Sai Pallavi", "Bhuvan Arora"], language: "Tamil", budget: 100, worldwide_gross: 330.2, worldwide_share: 162.5, pre_release_business: 65, verdict: "Blockbuster" }, { title: "Hanu Man", year: 2024, duration: "2h 38m", imdb_rating: 7.7, imdb_votes: "29K", director: "Prasanth Varma", stars: ["Teja Sajja", "Amritha Aiyer", "Varalaxmi Sarathkumar"], language: "Telugu", budget: 40, worldwide_gross: 296.5, worldwide_share: 156.2, pre_release_business: 30, verdict: "Blockbuster" }, { title: "Vettaiyan", year: 2024, duration: "2h 43m", rating: "15", imdb_rating: 7.0, imdb_votes: "39K", director: "T.J. Gnanavel", stars: ["Amitabh Bachchan", "Fahadh Faasil", "Rajinikanth"], language: "Tamil", budget: 200, worldwide_gross: 255.8, worldwide_share: 124.2, pre_release_business: 160, verdict: "Flop" }, { title: "Manjummel Boys", year: 2024, duration: "2h 15m", imdb_rating: 8.2, imdb_votes: "27K", director: "Chidambaram", stars: ["Soubin Shahir", "Sreenath Bhasi", "Balu Varghese"], language: "Malayalam", budget: 15, worldwide_gross: 241.2, domestic_net_collection: "134.1cr", verdict: "All Time Blockbuster", industry_hit: "Industry Hit in Malayalam industry" }, { title: "Shaitaan", year: 2024, duration: "2h 12m", rating: "15", imdb_rating: 6.5, imdb_votes: "54K", director: "Vikas Bahl", stars: ["Ajay Devgn", "Madhavan", "Jyotika"], language: "Hindi", budget: 80, worldwide_gross: 212.2, domestic_net_collection: "150.1cr", verdict: "Super Hit" }, { title: "Maharaja", year: 2024, duration: "2h 21m", rating: "15", imdb_rating: 8.4, imdb_votes: "66K", director: "Nithilan Saminathan", stars: ["Vijay Sethupathi", "Anurag Kashyap", "Mamta Mohandas"], language: "Tamil", budget: 30, worldwide_gross: 200.1, worldwide_share: 50.3, pre_release_business: 20, verdict: "Blockbuster" }, { title: "Guntur Karam", year: 2024, duration: "2h 39m", rating: "Not Rated", imdb_rating: 5.4, imdb_votes: "25K", director: "Trivikram Srinivas", stars: ["Mahesh Babu", "Sreeleela", "Meenaakshi Chaudhary"], language: "Telugu", budget: 130, worldwide_gross: 184.2, worldwide_share: 111.8, pre_release_business: 132, verdict: "Average" } ]34:[{"id":"371536c5fd1d3690c5536d6391ae2388ea8474b59a4f79b0f9a4e28619e2221e01a83b2a29d1a4c974a6837f7838611f2905137014dd1a8b4bc7b3e19a558ea6","href":"https://static.observableusercontent.com/files/371536c5fd1d3690c5536d6391ae2388ea8474b59a4f79b0f9a4e28619e2221e01a83b2a29d1a4c974a6837f7838611f2905137014dd1a8b4bc7b3e19a558ea6","name":"frame.png","type":"image/png","lastModified":1743850047002.156,"size":9781},{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744273679593.536,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744273686734.886,"size":2966}] 2f:{"title":"Top-Grossing Indian Movies of 2024","cells":[{"id":149,"value":"

Top-Grossing Indian Movies of 2024

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

Data Sources: IMDb

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

This list highlights the top 15 highest-grossing Indian movies of 2024, featuring their box office collections and verdicts for films that have surpassed ₹10 crore worldwide.

","pinned":false,"hidden":false,"mode":"html"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"

Image: Pixabay

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

\n#30DayChartChallenge (Edition 2025)

| Day-4: Comparison | Big or Small |

","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":294,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":296,"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":11,"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":289,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":291,"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":6,"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"}