Data Visualization Diagrams, Data Tableau, Bar Charts, Line Charts, Function Charts, Point Charts, Area Charts, Spider Webs, Radar Webs, Donut Charts, Pie Charts, Bubble Charts, Gauge Charts

Data Diagrams

Label
type: text
datatype: color
type: text
datatype: color
type: text
datatype: color
type: text
datatype: color
type: text
datatype: color
minOccurs: 3
datatype: color
datatype: number
px
ColorNameWeightDashes
datatype: color
type: text
datatype: number
px
type: text
px
datatype: color
type: text
datatype: number
px
type: text
px
datatype: color
type: text
datatype: number
px
type: text
px
Declare the sources
datatype: number
px
datatype: number
px
datatype: number
px
datatype: color
px
datatype: number
datatype: number
datatype: number
type: text
datatype: color
datatype: number
px
type: text
px
type: text
datatype: color
px
datatype: number
°
datatype: number
px

datatype: number
px
datatype: number
px
datatype: number
°
type: text
%
Will not show the path on picture downloads when animated.
type: boolean

Stroke & fill
datatype: color
datatype: number
px
,px
datatype: color
Outer distance from frame to context
datatype: number
px
datatype: number
px
datatype: number
px
datatype: number
px
Inner distance from frame to diagram
datatype: number
px
datatype: number
px
datatype: number
px
datatype: number
px
datatype: number
px
datatype: color
datatype: color
datatype: number
px
,px
datatype: color
datatype: number
px
,px

AsiaEuropeAfrica
Poverty
datatype: integer
datatype: integer
datatype: integer
Land
datatype: integer
datatype: integer
datatype: integer
Language
datatype: integer
datatype: integer
datatype: integer
Education
datatype: integer
datatype: integer
datatype: integer
Health
datatype: integer
datatype: integer
datatype: integer
CSV, XML or JSON
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:dia="http://data-diagrams.com">
<row>
<cell>13</cell>
<cell>10</cell>
<cell>60</cell>
</row>
[3 lines]
<row>
<cell>53</cell>
<cell>34</cell>
<cell>64</cell>
</row>
[3 lines]
<row>
<cell>60</cell>
<cell>71</cell>
<cell>21</cell>
</row>
[3 lines]
<row>
<cell>44</cell>
<cell>75</cell>
<cell>35</cell>
</row>
[3 lines]
<row>
<cell>14</cell>
<cell>45</cell>
<cell>15</cell>
</row>
[3 lines]
</dia:data>
[20 lines]
CSV, XML or JSON

 
type: boolean
 
 
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" class="svg-chart" viewBox="0 0 820 500" id="svgz222_idm140149831982704" xmlns:ds="http://www.bootstrap-data.org">
<script type="application/javascript">(function () { const id = 'svgz222_idm140149831982704'; const doc = this.document; doc.addEventListener("DOMContentLoaded", (ev) => { const svg = document.getElementById(id); 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(); const viewBox = svg.getAttribute('viewBox'); const vBArr = viewBox.split(' '); const vBWidth = vBArr[2]; foreign.style.display = ''; const W = foreign.clientWidth; const H = foreign.clientHeight; const inner = foreign.querySelector('div.tool-outer'); const w = inner.clientWidth; var loc = cursorPoint(e); const X = loc.x; const Y = loc.y; let cX = X - w / 2; let cY = Y - H - 2; if(Y < H + 10) { cY = Y + 10; foreign.querySelector('.arrow-up').style.display = ''; foreign.querySelector('.arrow-down').style.display = 'none'; } else { foreign.querySelector('.arrow-up').style.display = 'none'; foreign.querySelector('.arrow-down').style.display = ''; } if(X < w / 2) { } if(X < vBWidth - w / 2) { } foreign.setAttribute('x',parseInt(cX)); foreign.setAttribute('y',parseInt(cY)); 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>
<rect x="100" width="20" height="20" fill="#0d6efd" y="34.5"/>
+
<text class="chart-labels" x="125" y="50.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 44.5)">
<tspan>Asia</tspan>
</text>
[1 lines]
<rect x="100" width="20" height="20" fill="#00fcff" y="56.5"/>
+
<text class="chart-labels" x="125" y="72.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 66.5)">
<tspan>Europe</tspan>
</text>
[1 lines]
<rect x="100" width="20" height="20" fill="#00f900" y="78.5"/>
+
<text class="chart-labels" x="125" y="94.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 88.5)">
<tspan>Africa</tspan>
</text>
[1 lines]
<rect x="100" width="20" height="20" fill="#ff1900" y="100.5"/>
+
<text class="chart-labels" x="125" y="116.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 125 110.5)">
<tspan>Russia</tspan>
</text>
[1 lines]
</g>
[12 lines]
+
<g>
+
<path stroke="#0d6efd" stroke-width="5" fill="transparent" d="M435,267 L472,361 L339,372 L326,248 L410,247 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>13%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>53%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>60%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>44%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>14%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<path stroke="#00fcff" stroke-width="5" fill="transparent" d="M429,269 L450,330 L327,390 L267,229 L410,185 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>10%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>34%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>71%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>75%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>45%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<path stroke="#00f900" stroke-width="5" fill="transparent" d="M524,238 L485,379 L385,309 L343,253 L410,245 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>60%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>64%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>21%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>35%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>15%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 lines]
+
<g>
+
<path stroke="#ff1900" stroke-width="5" fill="transparent" d="M505,244 L469,356 L351,356 L315,244 L410,175 Z">
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Poverty</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Land</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="123" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Language</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="138" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Education</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
+
<foreignObject style="display:none;" width="120" height="100">
+
<default:div class="tool-hold">
<default:div class="arrow-up" style="display:none;"> </default:div>
<default:div class="arrow-left" style="display:none;"> </default:div>
</default:div>
[2 lines]
+
<default:div class="tool-outer">
+
<default:div class="tool-inner">
<default:div>Health</default:div>
<default:small>50%</default:small>
</default:div>
[2 lines]
</default:div>
[3 lines]
+
<default:div class="tool-hold">
<default:div class="arrow-down" style="display:none;"> </default:div>
<default:div class="arrow-right" style="display:none;"> </default:div>
</default:div>
[2 lines]
</foreignObject>
[10 lines]
</path>
[55 lines]
</g>
[56 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 x="">Poverty</tspan>
</text>
[1 lines]
</g>
[3 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 x="">Land</tspan>
</text>
[1 lines]
</g>
[3 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 x="">Language</tspan>
</text>
[1 lines]
</g>
[3 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 x="">Education</tspan>
</text>
[1 lines]
</g>
[3 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 x="">Health</tspan>
</text>
[1 lines]
</g>
[3 lines]
</g>
[20 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:#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>
[302 lines]
 
 

The link only works for 24 hours. Sign Up for permanent link.

 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable