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

FillLabel
datatype: color
type: text
datatype: color
datatype: color
type: text
datatype: color
datatype: color
type: text
datatype: color
datatype: color
type: text
datatype: color
datatype: color
type: text
datatype: color
minOccurs: 3
datatype: color
datatype: number
type: boolean
datatype: color
datatype: color
ColorNameType
datatype: color
type: text
datatype: number
px
,px
datatype: color
type: text
datatype: number
px
,px
minOccurs: 2
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
%

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

type: file
AsiaEuropeAfrica
Poverty
datatype: number
datatype: number
datatype: number
Land
datatype: number
datatype: number
datatype: number
Language
datatype: number
datatype: number
datatype: number
Education
datatype: number
datatype: number
datatype: number
Health
datatype: number
datatype: number
datatype: number
type: file
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>
</row>
[2 lines]
<row>
<cell>23</cell>
<cell>34</cell>
</row>
[2 lines]
<row>
<cell>20</cell>
<cell>11</cell>
</row>
[2 lines]
<row>
<cell>44</cell>
<cell>45</cell>
</row>
[2 lines]
</dia:data>
[12 lines]
type: file
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_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="105" width="20" height="20" fill="#ffffff" y="22.5"/>
+
<text class="chart-labels" x="130" y="38.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 130 32.5)">
<tspan>Radar - Asia</tspan>
</text>
[1 lines]
<rect x="255" width="20" height="20" fill="#0432ff" y="22.5"/>
+
<text class="chart-labels" x="280" y="38.5" fill="#000000" font-family="Arial" font-size="14" text-anchor="start" transform="rotate(0 280 32.5)">
<tspan>Spy - Europe</tspan>
</text>
[1 lines]
</g>
[6 lines]
+
<g>
<polygon class="pie" fill="#0d6efd" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 410,249 0434.7,267"/>
</g>
[1 lines]
+
<g>
<polygon class="pie" fill="#00fcff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 510.8,242.2 0472.3,360.8"/>
</g>
[1 lines]
+
<g>
<polygon class="pie" fill="#00f900" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 480.5,372.1 0339.5,372.1"/>
</g>
[1 lines]
+
<g>
<polygon class="pie" fill="#ff40ff" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 358.3,346.2 0326.3,247.8"/>
</g>
[1 lines]
+
<g>
<polygon class="pie" fill="#932092" stroke="transparent" stroke-width="1" stroke-dasharray="" points="410,275 383.4,266.3 0410,247"/>
</g>
[1 lines]
+
<g>
<path stroke="#0432ff" stroke-width="6" fill="transparent" d="M429,269 L450,330 L327,390 L267,229 L410,185 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 class="123">
<line x1="410" y1="275" x2="600" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="624" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="205" text-anchor="start">
<tspan>Poverty</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g class="123">
<line x1="410" y1="275" x2="528" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="543" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="457" text-anchor="start">
<tspan>Land</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g class="123">
<line x1="410" y1="275" x2="292" y2="437" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="277" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="457" text-anchor="end">
<tspan>Language</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g class="123">
<line x1="410" y1="275" x2="220" y2="213" stroke="#000000" stroke-width="2" stroke-dasharray=""/>
+
<text x="196" alignment-baseline="middle" fill="#000000" font-family="Arial" font-size="14" font-style="none" y="205" text-anchor="end">
<tspan>Education</tspan>
</text>
[1 lines]
</g>
[3 lines]
+
<g class="123">
<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="14" font-style="none" y="50" text-anchor="middle">
<tspan>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: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>
[79 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