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

 

type: text
datatype: color
px
type: number
°
Label
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
minOccurs: 1
datatype: color
px
type: number
°
datatype: color
datatype: color
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px
type: text
datatype: color
type: number
type: number
°
Label
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
type: text
datatype: color
datatype: number
minOccurs: 1
datatype: color
px
type: number
°
datatype: color
datatype: color
px
datatype: color
type: number
px
,px
datatype: color
type: number
px
type: number
px
FillLabel
datatype: color
type: text
datatype: color
type: text
datatype: color
type: text
minOccurs: 1
datatype: color
datatype: color
datatype: number
type: text
datatype: color
datatype: number
datatype: number
datatype: number
datatype: number
type: text
type: number
px
type: number
px
type: number
%

Stroke & fill
datatype: color
type: number
px
,px
datatype: color
Outer distance from frame to context
type: number
px
type: number
px
type: number
px
type: number
px
Inner distance from frame to diagram
type: number
px
type: number
px
type: number
px
type: number
px
Appearance
Stroke & fill
datatype: color
type: number
px
,px
pattern: \d+\,\d+
datatype: color

PovertyLandLanguage
Buddhist
Christian
Hindu
Buddhist
Christian
Hindu
Buddhist
Christian
Hindu
Asia
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Europe
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
Africa
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
datatype: integer
<?xml version="1.0" encoding="UTF-8"?>
<dia:data xmlns:dia="http://data-diagrams.com">
<row>
<cell>34</cell>
<cell>45</cell>
</row>
[2 lines]
<row>
<cell>13</cell>
<cell>67</cell>
</row>
[2 lines]
<row>
<cell>90</cell>
<cell>34</cell>
</row>
[2 lines]
<row>
<cell>50</cell>
<cell>74</cell>
</row>
[2 lines]
<row>
<cell>70</cell>
<cell>14</cell>
</row>
[2 lines]
</dia:data>
[15 lines]

 
 
 
<?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">
+
<g class="chart-grid chart-x">
<line x1="310" x2="310" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="50" y2="450" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[3 lines]
+
<g class="chart-grid chart-y">
<line x1="110" x2="710" y1="50" y2="50" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="183.3" y2="183.3" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="110" x2="710" y1="316.7" y2="316.7" stroke="#000000" stroke-dasharray="5,5" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[3 lines]
+
<g class="chart-axis-x chart-markers">
<line x1="110" x2="110" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="310" x2="310" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="510" x2="510" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="710" x2="710" y1="450.5" y2="454.5" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[4 lines]
+
<g class="chart-axis-x">
<line x1="110" x2="710" y1="450.5" y2="450.5" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1" stroke-dasharray="" stroke-dashoffset=""/>
</g>
[1 lines]
+
<g class="chart-labels chart-labels-x">
+
<text class="chart-labels" x="210" y="464" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Poverty</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="410" y="464" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Land</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="610" y="464" fill="#000000" font-family="Arial" font-size="14" text-anchor="middle">
<tspan>Language</tspan>
</text>
[1 lines]
</g>
[6 lines]
+
<g class="chart-labels chart-title-x">
+
<text class="chart-labels" x="724" y="456" fill="#000000" font-family="Arial" font-size="14" text-anchor="start">
<tspan>Rights</tspan>
</text>
[1 lines]
</g>
[2 lines]
+
<g class="chart-axis-y">
<line x1="110" x2="110" y1="450.5" y2="49.5" shape-rendering="geometricPrecision" stroke="#000000" stroke-width="1"/>
</g>
[1 lines]
+
<g class="chart-axis-y chart-markers">
<line x1="106.5" x2="109.5" y1="450" y2="450" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="106.5" x2="109.5" y1="50" y2="50" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="106.5" x2="109.5" y1="183.333" y2="183.333" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
<line x1="106.5" x2="109.5" y1="316.667" y2="316.667" stroke="#000000" stroke-width="1" shape-rendering="geometricPrecision"/>
</g>
[4 lines]
+
<g class="chart-labels chart-labels-y">
+
<text class="chart-labels" x="96" y="122.667" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>Men</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="96" y="256" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>Women</tspan>
</text>
[1 lines]
+
<text class="chart-labels" x="96" y="389.333" fill="#000000" font-family="Arial" font-size="14" text-anchor="end">
<tspan>Kids</tspan>
</text>
[1 lines]
</g>
[6 lines]
+
<g class="chart-labels chart-title-y">
+
<text class="chart-labels" x="110" y="32" fill="#000000" font-family="Arial" font-size="12" text-anchor="middle">
<tspan>Citizen</tspan>
</text>
[1 lines]
</g>
[2 lines]
+
<g>
+
<g>
+
<circle cx="210" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="22.44">
<title>33%</title>
</circle>
[1 lines]
+
<circle cx="210" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="14.96">
<title>33%</title>
</circle>
[1 lines]
+
<circle cx="210" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="7.48">
<title>33%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g>
+
<circle cx="410" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="30">
<title>20%</title>
</circle>
[1 lines]
+
<circle cx="410" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="12">
<title>20%</title>
</circle>
[1 lines]
+
<circle cx="410" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="6">
<title>60%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g>
+
<circle cx="610" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="22">
<title>30%</title>
</circle>
[1 lines]
+
<circle cx="610" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="17.6">
<title>50%</title>
</circle>
[1 lines]
+
<circle cx="610" cy="116.67" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="6.6">
<title>20%</title>
</circle>
[1 lines]
</g>
[6 lines]
</g>
[21 lines]
+
<g>
+
<g>
+
<circle cx="210" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="8.67">
<title>10%</title>
</circle>
[1 lines]
+
<circle cx="210" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="3.47">
<title>30%</title>
</circle>
[1 lines]
+
<circle cx="210" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="0.87">
<title>60%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g>
+
<circle cx="410" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="44.67">
<title>30%</title>
</circle>
[1 lines]
+
<circle cx="410" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="17.87">
<title>10%</title>
</circle>
[1 lines]
+
<circle cx="410" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="13.4">
<title>60%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g>
+
<circle cx="610" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="64.67">
<title>40%</title>
</circle>
[1 lines]
+
<circle cx="610" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="51.73">
<title>40%</title>
</circle>
[1 lines]
+
<circle cx="610" cy="250" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="25.87">
<title>20%</title>
</circle>
[1 lines]
</g>
[6 lines]
</g>
[21 lines]
+
<g>
+
<g>
+
<circle cx="210" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="16">
<title>33%</title>
</circle>
[1 lines]
+
<circle cx="210" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="10.56">
<title>33%</title>
</circle>
[1 lines]
+
<circle cx="210" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="5.28">
<title>34%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g>
+
<circle cx="410" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="16">
<title>30%</title>
</circle>
[1 lines]
+
<circle cx="410" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="8">
<title>20%</title>
</circle>
[1 lines]
+
<circle cx="410" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="4.8">
<title>50%</title>
</circle>
[1 lines]
</g>
[6 lines]
+
<g>
+
<circle cx="610" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#0d6efd" r="16">
<title>50%</title>
</circle>
[1 lines]
+
<circle cx="610" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00fcff" r="9.6">
<title>10%</title>
</circle>
[1 lines]
+
<circle cx="610" cy="383.33" stroke="" stroke-width="" stroke-dasharray="" fill="#00f900" r="8">
<title>40%</title>
</circle>
[1 lines]
</g>
[6 lines]
</g>
[21 lines]
</svg>
[108 lines]
 
 
 



Oops

Your browser is not supported

A modern browser with Javascript ES6 is required

Any major browser from 2015 onwards will be suitable