<?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>
<path stroke="#00f900" stroke-width="5" fill="transparent" d="M475,254 L425,296 L304,421 L324,247 L410,123 Z"/>
</g>
[1 lines]
+
<g>
+
<g>
<line x1="410" y1="235" x2="448" y2="263" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="448" y1="263" x2="434" y2="307" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="434" y1="307" x2="386" y2="307" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="386" y1="307" x2="372" y2="263" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="372" y1="263" x2="410" y2="235" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="236" text-anchor="end" alignment-baseline="auto">20%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="195" x2="486" y2="250" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="486" y1="250" x2="457" y2="340" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="457" y1="340" x2="363" y2="340" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="363" y1="340" x2="334" y2="250" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="334" y1="250" x2="410" y2="195" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="196" text-anchor="end" alignment-baseline="auto">40%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="155" x2="524" y2="238" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="524" y1="238" x2="481" y2="372" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="481" y1="372" x2="339" y2="372" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="339" y1="372" x2="296" y2="238" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="296" y1="238" x2="410" y2="155" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="156" text-anchor="end" alignment-baseline="auto">60%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="115" x2="562" y2="226" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="562" y1="226" x2="504" y2="404" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="504" y1="404" x2="316" y2="404" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="316" y1="404" x2="258" y2="226" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="258" y1="226" x2="410" y2="115" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="116" text-anchor="end" alignment-baseline="auto">80%</text>
</g>
[6 lines]
+
<g>
<line x1="410" y1="75" x2="600" y2="213" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="600" y1="213" x2="528" y2="437" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="528" y1="437" x2="292" y2="437" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="292" y1="437" x2="220" y2="213" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<line x1="220" y1="213" x2="410" y2="75" stroke="#c0c0c0" stroke-width="1" stroke-dasharray=""/>
<text class="percent" fill="#000000" font-size="12" font-family="Arial" x="406" y="76" text-anchor="end" alignment-baseline="auto">100%</text>
</g>
[6 lines]
</g>
[35 lines]
+
<g>
+
<g>
<line x1="410" y1="275" x2="600" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="619" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="207" text-anchor="start">
<tspan>Poverty</tspan>
<tspan> - 34%</tspan>
</text>
[2 lines]
</g>
[4 lines]
+
<g>
<line x1="410" y1="275" x2="528" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="540" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="453" text-anchor="start">
<tspan>Land</tspan>
<tspan> - 13%</tspan>
</text>
[2 lines]
</g>
[4 lines]
+
<g>
<line x1="410" y1="275" x2="292" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="280" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="453" text-anchor="end">
<tspan>Language</tspan>
<tspan> - 90%</tspan>
</text>
[2 lines]
</g>
[4 lines]
+
<g>
<line x1="410" y1="275" x2="220" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="201" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="207" text-anchor="end">
<tspan>Education</tspan>
<tspan> - 45%</tspan>
</text>
[2 lines]
</g>
[4 lines]
+
<g>
<line x1="410" y1="275" x2="410" y2="75" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="410" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="20" font-style="none" y="55" text-anchor="middle">
<tspan>Health</tspan>
<tspan> - 76%</tspan>
</text>
[2 lines]
</g>
[4 lines]
</g>
[25 lines]
<circle cx="410" cy="275" r="5" stroke="" stroke-width="" fill="#000000"/>
<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:rgb(33,37,41);color:white;font-family:Arial;font-size:14px;
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 rgb(33,37,41);
}
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 rgb(33,37,41);
}
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 rgb(33,37,41);
}
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 rgb(33,37,41);
}
</style>
</svg>
[67 lines]
The link only works for 24 hours. Sign Up for permanent link.