<?xml version="1.0" encoding="UTF-8"?>
−
<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" id="svgz222_id1" xmlns:ds="http://www.bootstrap-data.org">
<rect class="chart-frame" x="0" y="0" width="820" height="500" fill="#ffffff" stroke="#000000" stroke-width="0" stroke-dasharray="5,5"/>
+
<g>
<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]
</g>
[9 lines]
<circle cx="410" cy="250" r="200" fill-opacity="0.5" stroke="#000000" stroke-width="1" fill="whiteSmoke"/>
+
<g class="pie" data-animation="|move||edge|" data-transform="translate(16.18px,-11.76px)">
<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M410,50 A200,200 0 0,1 600.21,311.8"/>
<path class="pie" fill="#ff40ff" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L410,50 A200,200 0 0,1 600.21,311.8 z"/>
+
<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="592.025" y="117.745" text-anchor="start">
<tspan x="592.03">Poverty</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="551.58" y="147.14">30%</text>
+
<g>
+
<g>
<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,100 A150,150 0 0,1 447.3,104.71 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="425.98" y="123.51">13%</text>
</g>
[2 lines]
+
<g>
<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L447.3,104.71 A150,150 0 0,1 525.58,154.39 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="478.32" y="142.35">33%</text>
</g>
[2 lines]
+
<g>
<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L525.58,154.39 A150,150 0 0,1 552.66,296.35 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="535.24" y="226.11">54%</text>
</g>
[2 lines]
</g>
[9 lines]
</g>
[15 lines]
+
<g class="pie" data-animation="|move||edge|" data-transform="translate(11.76px,16.18px)">
<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M600.21,311.8 A200,200 0 0,1 410,450"/>
<path class="pie" fill="#932092" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L600.21,311.8 A200,200 0 0,1 410,450 z"/>
+
<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="542.255" y="432.025" text-anchor="start">
<tspan x="542.25">Land</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="512.86" y="391.58">20%</text>
+
<g>
+
<g>
<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L552.66,296.35 A150,150 0 0,1 536.65,330.37 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="525.37" y="304.29">20%</text>
</g>
[2 lines]
+
<g>
<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L536.65,330.37 A150,150 0 0,1 498.17,371.35 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="502.94" y="337.28">30%</text>
</g>
[2 lines]
+
<g>
<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L498.17,371.35 A150,150 0 0,1 410,400 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="449.4" y="371.26">50%</text>
</g>
[2 lines]
</g>
[9 lines]
</g>
[15 lines]
+
<g class="pie" data-animation="|move||edge|" data-transform="translate(-20px,0px)">
<path style="display:none;" class="edge" fill="transparent" stroke="#fbff05" stroke-width="20" d="M410,450 A200,200 0 0,1 410,50"/>
<path class="pie" fill="#6d0dfd" stroke="#000000" stroke-width="1" stroke-dasharray="" opacity="" d="M410,250 L410,450 A200,200 0 0,1 410,50 z"/>
+
<text fill="#000000" font-family="Arial" font-size="20" alignment-baseline="middle" x="185" y="250" text-anchor="end">
<tspan x="185">Language</tspan>
</text>
[1 lines]
<text class="value" fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="235" y="250">50%</text>
+
<g>
+
<g>
<path class="subpie" fill="#0d6efd" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L410,400 A150,150 0 0,1 259.999,250 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="317.06" y="337.28">50%</text>
</g>
[2 lines]
+
<g>
<path class="subpie" fill="#00fcff" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L260,250 A150,150 0 0,1 321.829,128.65 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="298.27" y="188.58">30%</text>
</g>
[2 lines]
+
<g>
<path class="subpie" fill="#00f900" fill-opacity="1" stroke="#000000" stroke-width="1" d="M410,250 L321.83,128.65 A150,150 0 0,1 409.999,100 z"/>
<text fill="#ffffff" font-family="Arial" font-size="14" alignment-baseline="middle" text-anchor="middle" x="370.6" y="128.74">20%</text>
</g>
[2 lines]
</g>
[9 lines]
</g>
[15 lines]
<circle cx="410" cy="250" r="100" 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]
<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 {
/* position:relative; */
}
foreignObject>div.tool-outer
{
/* float:left; */
min-width:120px;
background-color:#212529;color:#ffffff;font-family:Arial;font-size:20px;
padding:5px;
border:1px solid grey;
border-radius:3px;
}
foreignObject>div>div.tool-inner
{
text-align:center;
}
foreignObject>div>div.arrow-up {
position:relative;
top:2px;
margin-left:auto;
margin-right:auto;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #212529;
}
foreignObject>div.tool-hold {
background-color: transparent;
/* width:100%;
height:100%; */
/* position:relative; */
/*top:-2px; */
}
foreignObject>div>div.arrow-down {
position:relative;
top:-2px;
margin-left:auto;
margin-right:auto;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #212529;
}
foreignObject>div>div.arrow-right {
position:absolute;
margin-top:auto;
margin-bottom:auto;
margin-left:auto;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #212529;
}
foreignObject>div>div.arrow-left {
position:absolute;
left:-10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #212529;
}
</style>
</svg>
[66 lines]
The link only works for 24 hours. Sign Up for permanent link.