<?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="">
const doc = this.document;
doc.addEventListener("DOMContentLoaded", (ev) => {
const svg = ev.currentTarget;
/* 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 + 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"/>
<circle cx="410" cy="250" r="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.76px,-4.82px)">
<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M410,50 A200,200 0 0,1 578.87,357.17"/>
<path class="pie" fill="#0d6efd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L410,50 A200,200 0 0,1 578.87,357.17 z"/>
+
<text x="607.1676675" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="141.6061575" text-anchor="start">
<tspan x="607.1676675">Poverty</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="497.63" y="201.82">34%</text>
</g>
[5 lines]
+
<g class="pie" data-animation="|grow||edge|" data-transform="translate(5.36px,8.44px)">
<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M578.87,357.17 A200,200 0 0,1 447.48,446.46"/>
<path class="pie" fill="#00fcff" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L578.87,357.17 A200,200 0 0,1 447.48,446.46 z"/>
+
<text x="530.56567" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="439.9781975" text-anchor="start">
<tspan x="530.56567">Land</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="463.58" y="334.43">13%</text>
</g>
[5 lines]
+
<g class="pie" data-animation="|grow||edge|" data-transform="translate(-9.3px,3.68px)">
<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M447.48,446.46 A200,200 0 0,1 292.44,88.2"/>
<path class="pie" fill="#00f900" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L447.48,446.46 A200,200 0 0,1 292.44,88.2 z"/>
+
<text x="200.7955875" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="332.823115" text-anchor="end">
<tspan x="200.7955875">Language</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="317.02" y="286.81">43%</text>
</g>
[5 lines]
+
<g class="pie" data-animation="|grow||edge|" data-transform="translate(-3.09px,-9.51px)">
<path style="display:none;" class="edge" fill="transparent" stroke="yellow" stroke-width="15" stroke-dasharray="" d="M292.44,88.2 A200,200 0 0,1 410,50"/>
<path class="pie" fill="#fd0dbd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L292.44,88.2 A200,200 0 0,1 410,50 z"/>
+
<text x="340.474575" fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" y="36.0135875" text-anchor="end">
<tspan x="340.474575">Education</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="379.1" y="154.89">10%</text>
</g>
[5 lines]
<circle cx="410" cy="250" r="50" fill="#f5f5f5" stroke="#000000" stroke-width="1"/>
+
<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>
[31 lines]
The link only works for 24 hours. Sign Up for permanent link.