<?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 nonce="" test=""> const doc = this.document; let show = false; doc.addEventListener("DOMContentLoaded", (ev) => { const svg = ev.currentTarget; /* download menu */ const menus = svg.querySelectorAll('[data-svg-dropdown]'); menus.forEach( (item) => { const g = item.closest('g'); item.addEventListener('click', (e) => { const obj = e.currentTarget; const state = obj.getAttribute('data-svg-dropdown'); console.log(state); if(state == 'collapsed') { g.querySelector('.menu').style.display = ''; obj.setAttribute('data-svg-dropdown','expanded'); } else { g.querySelector('.menu').style.display = 'none'; obj.setAttribute('data-svg-dropdown','collapsed'); } }) const downloadArr = g.querySelectorAll('[data-svg-download]'); downloadArr.forEach( (i) => { i.addEventListener('click', (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; const format = obj.getAttribute('data-svg-download'); console.log(format); }); }); }); /* interactive animations */ /* grow */ const growArr = svg.querySelectorAll("g.pie[data-transform]"); growArr.forEach(async (item) => { const svg = item.closest('svg'); /* save stroke */ await item.setAttribute('data-stroke-width', await item.style.strokeWidth); /* mouse enter */ item.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; const transform = obj.getAttribute('data-transform'); /* grow */ if( obj.hasAttribute('data-transform') ) { obj.style.transition = 'transform 500ms ease-in-out'; obj.style.transform = transform; } /* stroke obj.style.strokeWidth = '2px'; */ }, false); /* mouse leave */ item.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); const obj = e.currentTarget; /* grow */ obj.style.transform = 'translate(0,0)'; /* stroke */ obj.style.strokeWidth = obj.getAttribute('data-stroke-width');/* '1px'; */ }, false); } ) /* edge */ const edgeArr = svg.querySelectorAll("path.edge"); edgeArr.forEach(async (item) => { const g = item.closest('g'); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); /* show */ item.style.display = '' }, false); g.addEventListener("mouseleave", (e) => { e.stopPropagation(); e.preventDefault(); item.style.display = 'none'; }, false); } ) /* tooltip */ const toolArr = svg.querySelectorAll("foreignObject"); toolArr.forEach(async (foreign) => { const svg = foreign.closest('svg'); const g = foreign.closest('g'); /* https://stackoverflow.com/questions/10298658/mouse-position-inside-autoscaled-svg */ var pt = svg.createSVGPoint(); g.addEventListener("mouseenter", async (e) => { e.stopPropagation(); e.preventDefault(); /* move tooltip */ svg.appendChild(foreign); }, false); g.addEventListener("mousemove", async (e) => { e.stopPropagation(); e.preventDefault(); var loc = cursorPoint(e); const X = loc.x + 5; 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"/>

<rect x="100" width="20" height="20" fill="#0d6efd" y="32"/>

+

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

<tspan>Asian</tspan>

</text>

[1 lines]

<rect x="100" width="20" height="20" fill="#00fcff" y="54"/>

+

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

<tspan>African</tspan>

</text>

[1 lines]

<rect x="100" width="20" height="20" fill="#00f900" y="76"/>

+

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

<tspan>European</tspan>

</text>

[1 lines]

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

+

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

<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M410,50 A200,200 0 0,1 600.21,311.8"/>

+

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

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

</text>

[1 lines]

+

<g class="subpie">

<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,50 A200,200 0 0,1 600,312 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>European</default:small>

</default:div>

[1 lines]

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

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

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

+

<g class="subpie">

<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,158 A92,92 0 0,1 497,278 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>African</default:small>

</default:div>

[1 lines]

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

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

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

+

<g class="subpie">

<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,224 A26,26 0 0,1 435,258 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>Asian</default:small>

</default:div>

[1 lines]

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

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

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

</g>

[30 lines]

+

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

<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M600.21,311.8 A200,200 0 0,1 410,450"/>

+

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

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

</text>

[1 lines]

+

<g class="subpie">

<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L600,312 A200,200 0 0,1 410,450 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>European</default:small>

</default:div>

[1 lines]

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

<default:small>50 of 20%</default:small>

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

+

<g class="subpie">

<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L505,281 A100,100 0 0,1 410,350 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>African</default:small>

</default:div>

[1 lines]

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

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

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

+

<g class="subpie">

<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L448,262 A40,40 0 0,1 410,290 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>Asian</default:small>

</default:div>

[1 lines]

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

<default:small>20 of 20%</default:small>

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

</g>

[30 lines]

+

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

<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M410,450 A200,200 0 0,1 410,50"/>

+

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

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

</text>

[1 lines]

+

<g class="subpie">

<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,450 A200,200 0 0,1 410,50 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>European</default:small>

</default:div>

[1 lines]

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

<default:small>20 of 50%</default:small>

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

+

<g class="subpie">

<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,410 A160,160 0 0,1 410,90 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>African</default:small>

</default:div>

[1 lines]

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

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

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

+

<g class="subpie">

<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,350 A100,100 0 0,1 410,150 z"/>

+

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

+

<default:div>

+

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

+

<default:div>

<default:small>Asian</default:small>

</default:div>

[1 lines]

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

<default:small>50 of 50%</default:small>

</default:div>

[4 lines]

</default:div>

[5 lines]

</foreignObject>

[6 lines]

</g>

[8 lines]

</g>

[30 lines]

+

<a target="_blank" xlink:href="https://data-diagrams.com">

<text x="20" y="495" fill="grey" font-size="10" font-family="arial">data-diagrams.com</text>

</a>

[1 lines]

<style type="text/css" media="all" charset="UTF-8" nonce=""> .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; background-color:rgb(33,37,41); color:white; font-family:Arial; padding:5px; border:1px solid white; border-radius:3px; } </style>

</svg>

[108 lines]