31:T2934,chart = { // Container dimensions (including margins) const containerWidth = 1152; const containerHeight = 900; const margin = { top: 100, right: 50, bottom: 10, left: 100 }; // 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; background-color: #212121"); // 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 / 1.2})`); // Header container (commented out): Used for chart title and subtitle // const headerContainer = svg // .append("g") // .attr("transform", `translate(${containerWidth / 2}, ${margin.top / 4})`) // .attr("class", "g-header-container"); // Chart title (commented out): Descriptive heading for the chart // headerContainer // .append("text") // .attr("x", 0) // .attr("y", 0) // .text("World Leaders’ Popularity Index") // .attr("fill", "#ebebeb") // .attr("font-size", "30px") // .attr("text-anchor", "middle"); // Function to highlight selected bars and labels on hover const activeSelected = (d) => { if (d.code === "approve") { d3.selectAll(".g-bar-approve") .transition() .duration(200) .attr("opacity", 1); d3.selectAll(".g-bar-noOpinion, .g-bar-disapprove") .transition() .duration(200) .attr("opacity", 0.2); } else if (d.code === "noOpinion") { d3.selectAll(".g-bar-noOpinion") .transition() .duration(200) .attr("opacity", 1); d3.selectAll(".g-bar-approve , .g-bar-disapprove") .transition() .duration(200) .attr("opacity", 0.2); } else if (d.code === "disapprove") { d3.selectAll(".g-bar-disapprove") .transition() .duration(200) .attr("opacity", 1); d3.selectAll(".g-bar-approve, .g-bar-noOpinion") .transition() .duration(200) .attr("opacity", 0.2); } }; // Function to reset selection state for all bars and labels when mouseout const deactiveSelected = () => { d3.selectAll(".g-bar-approve, .g-bar-noOpinion, .g-bar-disapprove") .transition() .duration(200) .attr("opacity", 1); // Reset opacity to 1 for all bars and labels }; // 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 = 150; // Space between rect 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 = (containerWidth - totalLegendWidth) / 2; // Create legend container const legendContainer = svg .append("g") .attr("class", "g-legend-container") .attr("transform", `translate(${xOffset}, ${margin.top / 4})`) .selectAll(".legend-item") .data(legendData) .join("g") .attr("class", "g-legend-item") .attr("cursor", "pointer") .attr("transform", (d, i) => { const xPos = legendItemWidths.slice(0, i).reduce((acc, w) => acc + w, 0); return `translate(${xPos}, 0)`; }) .on("mouseover", function (event, d) { activeSelected(d); }) .on("mouseout", function (event, d) { deactiveSelected(d); }); // Create rectangles for each legend item legendContainer .append("rect") .attr("width", 20) .attr("height", 20) .attr("stroke-width", 0) .attr("stroke", "#00f3ff") .attr("fill", (d) => d.color); // Create text labels for each legend item legendContainer .append("text") .attr("x", 30) .attr("y", 15) .attr("fill", "#00f3ff") .attr("alignment-baseline", "start") .text((d) => d.label); // Create x-axis scale (percentage range from 0 to 100) const xScale = d3.scaleLinear().domain([0, 100]).range([0, chartWidth]); // Create y-axis scale (leader names) const yScale = d3 .scaleBand() .domain(chartData.map((d) => d.leader)) .range([0, chartHeight]) .padding(0.5); // Extract keys for stacked bars (approval, disapproval, etc.) const keys = legendData.map((d) => d.code); // Setup stack layout const stack = d3.stack().keys(keys); // Stack data const stackedData = stack(chartData); // Create bar container const barContainer = chartContainer .selectAll(".bar") .data(stackedData) .join("g") .attr("class", (d, i) => `g-bar-${legendData[i].code}`) .attr("fill", (d, i) => legendData[i].color); // Create stacked bar chart barContainer .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => xScale(d[0])) .attr("y", (d) => yScale(d.data.leader)) .attr("width", (d) => xScale(d[1]) - xScale(d[0])) .attr("height", yScale.bandwidth()) .on("mouseover", function (event, d) { const leaderData = d.data; tooltipContainer.style("visibility", "visible").html(`

${leaderData.leader}

${leaderData.country}

Approve

${leaderData.approve}%

No Opinion

${leaderData.noOpinion}%

Disapprove

${leaderData.disapprove}%

`); }) .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"); }) .attr("cursor", "pointer"); // Add percentage labels to the bars barContainer .selectAll("text") .data((d) => d) .join("text") .attr("x", (d) => xScale((d[1] + d[0]) / 2)) // Center label within segment .attr("y", (d) => yScale(d.data.leader) + yScale.bandwidth() / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "#000000") .text((d) => `${Math.round(d[1] - d[0])}%`); // Display percentage // Add x-axis on top of the chart chartContainer .append("g") .attr("class", "x-axis") .call(d3.axisTop(xScale).tickFormat((d) => d + "%")) .attr("color", "grey") .attr("font-weight", "bold") .selectAll("path") .attr("display", "none"); // Add y-axis images instead of text labels const imageWidth = 60; const imageHeight = 150; chartContainer .append("g") .attr("class", "y-axis") .selectAll(".leader-image") .data(chartData) .join("image") .attr("x", -imageWidth - 10) .attr("y", (d) => yScale(d.leader) + (yScale.bandwidth() - imageHeight) / 2) .attr("width", imageWidth) .attr("height", imageHeight) .attr("href", (d) => d.imageUrl) .attr("class", "leader-image"); // Remove the text labels from the y-axis chartContainer.selectAll(".g-y-axis text").remove(); // Create a tooltip container (Initially Hidden) const tooltipContainer = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#333333") .style("color", "#333") .style("padding", "12px 15px") // 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"); return svg.node(); // Return the fully constructed chart node }32:T8e6,// chart data chartData = [ { leader: "Narendra Modi", imageUrl: await FileAttachment("N_Modi.png").url(), country: "India", flagUrl: "https://flagcdn.com/w320/in.png", approve: 75, noOpinion: 6, disapprove: 19 }, { leader: "Claudia Sheinbaum", imageUrl: await FileAttachment("C_Sheinbaum.png").url(), country: "Mexico", flagUrl: "https://flagcdn.com/w320/mx.png", approve: 66, noOpinion: 7, disapprove: 26 }, { leader: "Javier Milei", imageUrl: await FileAttachment("J_Milei.png").url(), country: "Argentina", flagUrl: "https://flagcdn.com/w320/ar.png", approve: 65, noOpinion: 5, disapprove: 30 }, { leader: "Karin Keller-Sutter", imageUrl: await FileAttachment("KK_Sutter.png").url(), country: "Switzerland", flagUrl: "https://flagcdn.com/w320/ch.png", approve: 56, noOpinion: 24, disapprove: 20 }, { leader: "Donald Trump", imageUrl: await FileAttachment("D_Trump.png").url(), country: "U.S.", flagUrl: "https://flagcdn.com/w320/us.png", approve: 52, noOpinion: 10, disapprove: 38 }, { leader: "Anthony Albanese", imageUrl: await FileAttachment("A_Albanese.png").url(), country: "Australia", flagUrl: "https://flagcdn.com/w320/au.png", approve: 46, noOpinion: 11, disapprove: 42 }, { leader: "Dick Schoof", imageUrl: await FileAttachment("Dick_Schoof@9.png").url(), country: "Netherlands", flagUrl: "https://flagcdn.com/w320/nl.png", approve: 42, noOpinion: 19, disapprove: 39 }, { leader: "Donald Tusk", imageUrl: await FileAttachment("D_Tusk@2.png").url(), country: "Poland", flagUrl: "https://flagcdn.com/w320/pl.png", approve: 42, noOpinion: 11, disapprove: 47 }, { leader: "Giorgia Meloni", imageUrl: await FileAttachment("G_Meloni.png").url(), country: "Italy", flagUrl: "https://flagcdn.com/w320/it.png", approve: 42, noOpinion: 7, disapprove: 51 }, { leader: "Ulf Kristersson", imageUrl: await FileAttachment("U_Kristersson.png").url(), country: "Sweden", flagUrl: "https://flagcdn.com/w320/se.png", approve: 38, noOpinion: 11, disapprove: 51 } ]33:[{"id":"0950186123e6ddee45e662c6b8dec5ae42af288f27443487f805a1b9d3a853a77f98b9165d3a9d83d9875c32deaef7518bf412a9fae16f0edd69704917972b91","href":"https://static.observableusercontent.com/files/0950186123e6ddee45e662c6b8dec5ae42af288f27443487f805a1b9d3a853a77f98b9165d3a9d83d9875c32deaef7518bf412a9fae16f0edd69704917972b91","name":"N_Modi.png","type":"image/png","lastModified":1739086602712.209,"size":23752},{"id":"2dbdc6ae1a2e3e202516ba3377344bf642b7e26e38363a29d7adef5f5994bf827aff9a9cb42d6fb7093ea4345736a2fbfecfeec8a18e4a627ddc8e868e3d6f0b","href":"https://static.observableusercontent.com/files/2dbdc6ae1a2e3e202516ba3377344bf642b7e26e38363a29d7adef5f5994bf827aff9a9cb42d6fb7093ea4345736a2fbfecfeec8a18e4a627ddc8e868e3d6f0b","name":"C_Sheinbaum.png","type":"image/png","lastModified":1739087795414.042,"size":44010},{"id":"fe2f569a750491075cc1f5da5653ca700fab3129b0a812c5cbb532741abbf35a14eb422c835fb4378076e1c82204b344ec00db106d8446271e360ed92c8f6f31","href":"https://static.observableusercontent.com/files/fe2f569a750491075cc1f5da5653ca700fab3129b0a812c5cbb532741abbf35a14eb422c835fb4378076e1c82204b344ec00db106d8446271e360ed92c8f6f31","name":"KK_Sutter.png","type":"image/png","lastModified":1739088384459.724,"size":29753},{"id":"fcf099f76cc7a13814c6e16c8bc4bc5b5904ca975be6fdf5b22cc13efa0cc1bf132bea75af36188f9d837e72a8afe6755abca556e61f6c874e7073acae5dbbbb","href":"https://static.observableusercontent.com/files/fcf099f76cc7a13814c6e16c8bc4bc5b5904ca975be6fdf5b22cc13efa0cc1bf132bea75af36188f9d837e72a8afe6755abca556e61f6c874e7073acae5dbbbb","name":"D_Trump.png","type":"image/png","lastModified":1739088548852.369,"size":49557},{"id":"2596d742ed35210506be8f82c1983b42d19603b6e5579be6849a04b3714eb01e05938a39f294df5256f4c28167c17ef4857affa42d78d905129a65e4ae2a28f7","href":"https://static.observableusercontent.com/files/2596d742ed35210506be8f82c1983b42d19603b6e5579be6849a04b3714eb01e05938a39f294df5256f4c28167c17ef4857affa42d78d905129a65e4ae2a28f7","name":"A_Albanese.png","type":"image/png","lastModified":1739089131366.252,"size":28412},{"id":"8891e2033d75bd0cb52a472eca7d3d2f9353623645541cf0e248da5d211c9f1261865a9d479949c843e968b4a33f56b1169706fbb673ba38ef404c099204c346","href":"https://static.observableusercontent.com/files/8891e2033d75bd0cb52a472eca7d3d2f9353623645541cf0e248da5d211c9f1261865a9d479949c843e968b4a33f56b1169706fbb673ba38ef404c099204c346","name":"U_Kristersson.png","type":"image/png","lastModified":1743526703904.312,"size":49338},{"id":"5e18728e6b615bc906ad4d6b6fa99b595efb2ca9e7ef4b1e7183ea6fef9d1dedbc571ae8e612d232f0e2797f48152242737a850010b87b511117fa219706c368","href":"https://static.observableusercontent.com/files/5e18728e6b615bc906ad4d6b6fa99b595efb2ca9e7ef4b1e7183ea6fef9d1dedbc571ae8e612d232f0e2797f48152242737a850010b87b511117fa219706c368","name":"G_Meloni.png","type":"image/png","lastModified":1743526861503.826,"size":35365},{"id":"045c3597059579519187714dfe85cf7427a216e12cb26e8ae01a29884995a2bc69fd43d325396dcc2f4e157204bcbe22e7d90c0052d6e47248ac6b9724d2b2e9","href":"https://static.observableusercontent.com/files/045c3597059579519187714dfe85cf7427a216e12cb26e8ae01a29884995a2bc69fd43d325396dcc2f4e157204bcbe22e7d90c0052d6e47248ac6b9724d2b2e9","name":"D_Tusk@2.png","type":"image/png","lastModified":1743527007584.267,"size":46293},{"id":"b7f792d363744680416aa01e09a34e8f7b757683fdf2a198bd84cd76c50dc99c567af42c27507db56f70f841ea61692b524a2c7a7e50b29bb68754ccaa2fa1d2","href":"https://static.observableusercontent.com/files/b7f792d363744680416aa01e09a34e8f7b757683fdf2a198bd84cd76c50dc99c567af42c27507db56f70f841ea61692b524a2c7a7e50b29bb68754ccaa2fa1d2","name":"Dick_Schoof@9.png","type":"image/png","lastModified":1743527088675.58,"size":47959},{"id":"a06d2a360833e3cd6a222b092d12951b686b0e062f045b3ecc27cbcd9ff02d9fc0ca32069941e8a8736cefc6bce4b2ccc67bee8df4067a622be26d3d983184ec","href":"https://static.observableusercontent.com/files/a06d2a360833e3cd6a222b092d12951b686b0e062f045b3ecc27cbcd9ff02d9fc0ca32069941e8a8736cefc6bce4b2ccc67bee8df4067a622be26d3d983184ec","name":"J_Milei.png","type":"image/png","lastModified":1739088154406.192,"size":46168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744206526539.427,"size":2966},{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744206530111.017,"size":3168},{"id":"73660e07e92e261fa8cc401e26f13b989ac7a7be2dd26d489d634e2d609a9d8ce0ef3b3d62906e5d96c1698088beb690ee0159b1b1c7f32b9bfc38bd81cd0c32","href":"https://static.observableusercontent.com/files/73660e07e92e261fa8cc401e26f13b989ac7a7be2dd26d489d634e2d609a9d8ce0ef3b3d62906e5d96c1698088beb690ee0159b1b1c7f32b9bfc38bd81cd0c32","name":"canva.svg","type":"image/svg+xml","lastModified":1744206537959.756,"size":4457}] 2f:{"title":"World Leaders’ Popularity Index","cells":[{"id":0,"value":"

World Leaders’ Popularity Index

Chart Type: Stacked Bar Chart, Tech Stack: D3.js, SVG

Data Sources: Morning Consult

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

The latest global leader approval ratings, based on data from January 21-27, 2025, reflect a seven-day moving average of public opinion in each surveyed country. Figures may not add up to 100% due to rounding.

","pinned":false,"hidden":false,"mode":"html"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"

Leader Image: Wikipedia | Flag Image: flagcdn

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

\n#30DayChartChallenge (Edition 2025)

| Day-1: Comparison | Fraction |

","pinned":false,"hidden":false,"mode":"html"},{"id":32,"value":" ","pinned":false,"hidden":false,"mode":"html"},{"id":360,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":350,"value":"### Chart & Legend Data ","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"legendData = [\n { color: \"#409940\", label: \"Approve\", code: \"approve\" },\n { color: \"#cdcd24\", label: \"No Opinion\", code: \"noOpinion\" },\n { color: \"#e18989\", label: \"Disapprove\", code: \"disapprove\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":834,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":881,"value":"*[Chart Inspiration (Visual Capitalist)](https://www.visualcapitalist.com/charted-approval-ratings-of-24-world-leaders-in-2025/) | [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":649,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":886,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":797,"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":645,"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"}