<?xml version="1.0" encoding="UTF-8"?>

−

<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" xmlns:ds="http://www.bootstrap-data.org">

<script type="application/javascript">const doc = this.document; doc.addEventListener("DOMContentLoaded", (ev) => { const svg = ev.currentTarget; const growArr = svg.querySelectorAll("g.pie[data-transform]"); growArr.forEach(async (item) => { const svg = item.closest('svg'); await item.setAttribute('data-stroke-width', await item.style.strokeWidth); item.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; const transform = obj.getAttribute('data-transform'); if( obj.hasAttribute('data-transform') ) { obj.style.transition = 'transform 500ms ease-in-out'; obj.style.transform = transform; } }, false); item.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; obj.style.transform = 'translate(0,0)'; obj.style.strokeWidth = obj.getAttribute('data-stroke-width'); }, false); } ); const edgeArr = svg.querySelectorAll("path.edge"); edgeArr.forEach(async (item) => { const g = item.closest('g'); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = '' }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = 'none'; }, false); } ); const toolArr = svg.querySelectorAll("foreignObject"); toolArr.forEach(async (foreign) => { const svg = foreign.closest('svg'); const g = foreign.closest('g'); var pt = svg.createSVGPoint(); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); svg.appendChild(foreign); }, false); g.addEventListener("mousemove", async (e) => { e.stopPropagation(); e.preventDefault(); var loc = cursorPoint(e); const X = loc.x + 10; const Y = loc.y - 1; foreign.setAttribute('x',parseInt(X)); foreign.setAttribute('y',parseInt(Y)); foreign.style.display = ''; function cursorPoint(e) { pt.x = e.clientX; pt.y = e.clientY; return pt.matrixTransform(svg.getScreenCTM().inverse()); } }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); foreign.style.display = 'none'; }, false); }); });</script>

<rect class="chart-frame" x="0" y="0" width="820" height="500" fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="5,5"/>

+

<g transform="translate(670,30)">

<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z"/>

</g>

[1 lines]

+

<text class="chart-labels" x="695" y="43" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 695 37)">

<tspan>Asia</tspan>

</text>

[1 lines]

+

<g transform="translate(670,52)">

<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.646 6.24v.07H5.375v-.064c0-1.213.879-2.402 2.637-2.402 1.582 0 2.613.949 2.613 2.215 0 1.002-.6 1.667-1.287 2.43l-.096.107-1.974 2.22v.077h3.498V12H5.422v-.832l2.97-3.293c.434-.475.903-1.008.903-1.705 0-.744-.557-1.236-1.313-1.236-.843 0-1.336.615-1.336 1.306"/>

</g>

[1 lines]

+

<text class="chart-labels" x="695" y="65" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 695 59)">

<tspan>Europe</tspan>

</text>

[1 lines]

+

<g transform="translate(670,74)">

<path d="M7.918 8.414h-.879V7.342h.838c.78 0 1.348-.522 1.342-1.237 0-.709-.563-1.195-1.348-1.195-.79 0-1.312.498-1.348 1.055H5.275c.036-1.137.95-2.115 2.625-2.121 1.594-.012 2.608.885 2.637 2.062.023 1.137-.885 1.776-1.482 1.875v.07c.703.07 1.71.64 1.734 1.917.024 1.459-1.277 2.396-2.93 2.396-1.705 0-2.707-.967-2.754-2.144H6.33c.059.597.68 1.06 1.541 1.066.973.006 1.6-.563 1.588-1.354-.006-.779-.621-1.318-1.541-1.318"/>

<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8"/>

</g>

[2 lines]

+

<text class="chart-labels" x="695" y="87" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 695 81)">

<tspan>Africa</tspan>

</text>

[1 lines]

+

<g transform="scale(1,1)">

<ellipse cx="410" cy="250" rx="200" ry="200" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

<ellipse cx="410" cy="250" rx="200" ry="200" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(4.26px,-9.05px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M410,50 A200,200 0 0,1 555.79,113.09"/>

<path class="pie" fill="#0d6efd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L410,50 A200,200 0 0,1 555.79,113.09 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="505.804" y="46.409" text-anchor="start">

<tspan x="505.8">Poverty</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="484.51" y="91.66">13%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Asia</default:small>

<default:div>Poverty</default:div>

<default:small>13%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[13 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(9.51px,3.09px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M555.79,113.09 A200,200 0 0,1 459.74,443.72"/>

<path class="pie" fill="#00fcff" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L555.79,113.09 A200,200 0 0,1 459.74,443.72 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="623.986" y="319.525" text-anchor="start">

<tspan x="623.99">Land</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="576.43" y="304.08">33%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Asia</default:small>

<default:div>Land</default:div>

<default:small>33%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[13 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-6.37px,7.71px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M459.74,443.72 A200,200 0 0,1 210.39,237.44"/>

<path class="pie" fill="#00f900" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L459.74,443.72 A200,200 0 0,1 210.39,237.44 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="266.584" y="423.363" text-anchor="end">

<tspan x="266.58">Language</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="298.45" y="384.84">30%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Asia</default:small>

<default:div>Language</default:div>

<default:small>30%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[13 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-6.85px,-7.29px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M210.39,237.44 A200,200 0 0,1 410,50"/>

<path class="pie" fill="#fd0dbd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L210.39,237.44 A200,200 0 0,1 410,50 z"/>

+

<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="255.976" y="85.986" text-anchor="end">

<tspan x="255.98">Education</tspan>

</text>

[1 lines]

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="290.2" y="122.43">24%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Asia</default:small>

<default:div>Education</default:div>

<default:small>24%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[13 lines]

+

<g transform="translate(402,67)">

<path stroke="white" fill="white" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z"/>

</g>

[1 lines]

</g>

[60 lines]

+

<g transform="scale(1,1)">

<ellipse cx="410" cy="250" rx="150" ry="150" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

<ellipse cx="410" cy="250" rx="150" ry="150" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(3.09px,-9.51px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M410,100 A150,150 0 0,1 498.17,128.65"/>

<path class="pie" fill="#0d6efd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L410,100 A150,150 0 0,1 498.17,128.65 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="448.63" y="131.12">10%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Europe</default:small>

<default:div>Poverty</default:div>

<default:small>10%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(9.92px,1.25px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M498.17,128.65 A150,150 0 0,1 465.22,389.47"/>

<path class="pie" fill="#00fcff" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L498.17,128.65 A150,150 0 0,1 465.22,389.47 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="534.01" y="265.67">34%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Europe</default:small>

<default:div>Land</default:div>

<default:small>34%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-5.88px,8.09px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M465.22,389.47 A150,150 0 0,1 260,250"/>

<path class="pie" fill="#00f900" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L465.22,389.47 A150,150 0 0,1 260,250 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="336.53" y="351.13">31%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Europe</default:small>

<default:div>Language</default:div>

<default:small>31%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-6.85px,-7.29px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M260,250 A150,150 0 0,1 410,100"/>

<path class="pie" fill="#fd0dbd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L260,250 A150,150 0 0,1 410,100 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="324.43" y="158.88">25%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Europe</default:small>

<default:div>Education</default:div>

<default:small>25%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g transform="translate(402,117)">

<path stroke="white" fill="white" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.646 6.24v.07H5.375v-.064c0-1.213.879-2.402 2.637-2.402 1.582 0 2.613.949 2.613 2.215 0 1.002-.6 1.667-1.287 2.43l-.096.107-1.974 2.22v.077h3.498V12H5.422v-.832l2.97-3.293c.434-.475.903-1.008.903-1.705 0-.744-.557-1.236-1.313-1.236-.843 0-1.336.615-1.336 1.306"/>

</g>

[1 lines]

</g>

[52 lines]

+

<g transform="scale(1,1)">

<ellipse cx="410" cy="250" rx="100" ry="100" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

<ellipse cx="410" cy="250" rx="100" ry="100" fill-opacity="1" stroke="#000000" stroke-width="1" stroke-dasharray="" fill="whiteSmoke"/>

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(8.09px,-5.88px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M410,150 A100,100 0 0,1 505.11,280.9"/>

<path class="pie" fill="#0d6efd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L410,150 A100,100 0 0,1 505.11,280.9 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="470.68" y="205.92">30%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Africa</default:small>

<default:div>Poverty</default:div>

<default:small>30%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(1.87px,9.82px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M505.11,280.9 A100,100 0 0,1 332.95,313.74"/>

<path class="pie" fill="#00fcff" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L505.11,280.9 A100,100 0 0,1 332.95,313.74 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="424.05" y="323.67">34%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Africa</default:small>

<default:div>Land</default:div>

<default:small>34%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-10px,0px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M332.95,313.74 A100,100 0 0,1 329.1,191.22"/>

<path class="pie" fill="#00f900" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L332.95,313.74 A100,100 0 0,1 329.1,191.22 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="335" y="250">21%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Africa</default:small>

<default:div>Language</default:div>

<default:small>21%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g class="pie" data-animation="|move||edge|" data-transform="translate(-4.26px,-9.05px)">

<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M329.1,191.22 A100,100 0 0,1 410,150"/>

<path class="pie" fill="#fd0dbd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L329.1,191.22 A100,100 0 0,1 410,150 z"/>

<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="378.07" y="182.14">15%</text>

+

<foreignObject style="display:none;" width="100" height="120">

+

<default:div>

+

<default:div style="text-align:center;">

<default:small>Africa</default:small>

<default:div>Education</default:div>

<default:small>15%</default:small>

</default:div>

[3 lines]

</default:div>

[4 lines]

<default:div class="arrow-down"> </default:div>

</foreignObject>

[6 lines]

<g/>

</g>

[11 lines]

+

<g transform="translate(402,167)">

<path stroke="white" fill="white" d="M7.918 8.414h-.879V7.342h.838c.78 0 1.348-.522 1.342-1.237 0-.709-.563-1.195-1.348-1.195-.79 0-1.312.498-1.348 1.055H5.275c.036-1.137.95-2.115 2.625-2.121 1.594-.012 2.608.885 2.637 2.062.023 1.137-.885 1.776-1.482 1.875v.07c.703.07 1.71.64 1.734 1.917.024 1.459-1.277 2.396-2.93 2.396-1.705 0-2.707-.967-2.754-2.144H6.33c.059.597.68 1.06 1.541 1.066.973.006 1.6-.563 1.588-1.354-.006-.779-.621-1.318-1.541-1.318"/>

<path stroke="white" fill="white" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8"/>

</g>

[2 lines]

</g>

[53 lines]

+

<g transform="scale(1,1)">

<circle cx="410" cy="250" r="50" fill="#f5f5f5" stroke="#000000" stroke-width="1"/>

+

<text x="410" y="250">

<tspan font-family="Arial" font-size="20" color="#000000" alignment-baseline="middle" text-anchor="middle">SDG</tspan>

</text>

[1 lines]

+

<text x="410" y="270">

<tspan font-family="Arial" font-size="14" color="#000000" alignment-baseline="middle" text-anchor="middle">Rights</tspan>

</text>

[1 lines]

</g>

[5 lines]

<style type="text/css" media="all">.svg-chart * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .svg-chart .bar { fill-opacity:1; } .svg-chart .bar:hover { fill-opacity:0.8; } .svg-chart .pie { fill-opacity:1; } /* .svg-chart .pie:hover { stroke: grey; stroke-width: 3px; } */ .pie:hover { fill-opacity:0.8; } .subpie:hover { fill-opacity:0.8; } foreignObject>div { float:left; min-width:100px; background-color:#212529;color:#ffffff;font-family:Arial;font-size:20px; padding:5px; border:1px solid white; border-radius:3px; } foreignObject div.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; } foreignObject div.arrow-down { background-color: transparent; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 20px solid black; } foreignObject div.arrow-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid black; } foreignObject div.arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid black; }</style>

</svg>

[190 lines]