Example 1: Showing a legend
Show a legend for coloring of your data.
<div id="datadescription_example1" swa="Datadescription FROM datadescription_data"></div>
"doubleval" and "stringval" are the names of the attributes that will be descriped.
var datadescription_data = {
sourcename: "Name der Quelle",
sourcelink: "http://www.beispiel.de",
doubleval: {
txt_title: 'DoubleWert',
txt_desc: 'Ein Wert mit double Genauigkeit',
txt_uknw: 'Es wurde kein Wert angegeben',
col: 'blue',
values: {
'12.0123': {
txt: 'ein niedriger Wert',
col: 'green'
},
'19.0234': {
txt: 'ein mittlerer Wert',
col: 'yellow'
},
'42.0345': {
txt: 'ein hoher Wert',
col: 'red'
}
}
},
stringval: {
txt_title: 'Strings',
txt_desc: 'Ein Wert mit einem String.',
col: 'red',
values: {
'string': {
txt: 'erster string',
col: 'green'
},
'string2': {
txt: 'zweiter string',
col: 'yellow'
}
}
}
};
Example 2: Formatting data with use of the present component
Datadescription component can be used to color displayed data.
Data is formated on base of bindpoints, so data can be formated in any component that uses bindpoints in their template.
Some components integrate support for datadescription, even if they use other display technique. e.g. Worldmap3D.
Data that should be presented:
var exampledata_list = [
{
id: 1,
name: "Datensatz 1",
doubleval: 12.0123,
intval: 1234,
boolval: true,
stringval: 'string',
ts: '28.10.2019 7:46:59',
dateval: '28.10.2019',
refval: 'ref://exampledata/2',
mimetype: 'audio/mp3',
colval: 'blue',
urlval: 'https://somesite',
emailval: 'support@swac.de',
passwordval: 'MyUnsecurePwd',
icopath: '../../swac/components/Icon/imgs/book_checked.svg'
}, {
id: 2,
name: "Datensatz 2",
doubleval: 19.0234,
intval: 2345,
boolval: false,
stringval: 'string2',
ts: '29.10.2019 7:47:59',
dateval: '29.10.2019',
refval: 'ref://exampledata/2',
mimetype: 'audio/ogg',
colval: '#ffffff',
urlval: 'https://somesite',
emailval: 'support@swac.de',
passwordval: 'MyUnsecurePwd',
icopath: '../../swac/components/Icon/imgs/book_star.svg'
}, {
id: 3,
name: "Datensatz 3",
doubleval: 42.0345,
intval: 3456,
boolval: true,
stringval: 'string',
ts: '30.10.2019 7:48:59',
dateval: '30.10.2019',
refval: 'ref://exampledata/2',
mimetype: 'video/mpeg',
colval: '#000000',
urlval: 'https://someothersite',
emailval: 'support@swac.de',
passwordval: 'MyUnsecurePwd',
icopath: '../../swac/components/Icon/imgs/book_fail.svg'
}
];
<div id="datadescription_example1" swa="Datadescription FROM datadescription_data"></div>
<div id="datadescription_example2" swa="Present FROM exampledata_list TEMPLATE table_for_all_datasets"></div>
window.swac.reactions.addReaction(function(requestors) {
requestors['datadescription_example1'].swac_comp.formatDataElement(requestors['datadescription_example2']);
},'datadescription_example1','datadescription_example2');
Example 3: Useing class descriptions
Data can be visualised in classes useing the < calcmode. Then the data will be grouped into classes on wich the visualisation applies.Support this project to get implementation of more calcmodes.
var datadescription_data3 = {
doubleval = {
txt_title: 'DoubleWert',
txt_desc: 'Ein Wert mit double Genauigkeit',
txt_uknw: 'Es wurde kein Wert angegeben',
col: 'blue',
calcmode: '<',
values: {
'15': {
txt: 'ein niedriger Wert',
col: 'green'
},
'25': {
txt: 'ein mittelniedriger Wert',
col: 'blue'
},
'35': {
txt: 'ein mittelhoher Wert',
col: 'yellow'
},
'45': {
txt: 'ein hoher Wert',
col: 'red'
}
}
}
};
<div id="datadescription_example3" swa="Datadescription FROM datadescription_data"></div>
<div id="datadescription_example3_present" swa="Present FROM exampledata_list TEMPLATE table_for_all_datasets"></div>
// Use datadescription component "datadescription_example3" to format data in second component "datadescription_example3_present"
window.swac.reactions.addReaction(function(requestors) {
requestors['datadescription_example3'].swac_comp.formatDataElement(requestors['datadescription_example3_present']);
},'datadescription_example3','datadescription_example3_present');
Example 4: Get description for one attribute only
Sometimes you only want to only describe one attribute, or you are useing
a component, which only displays one icon for a dataset.
(See Worldmap2d or Chart components)
For this cases you can choose the attribute you want to visualise,
by specifying it in the Datadescription components options.
window["wordldmap2d_datadescription_example14_options"] = {
visuAttribute: 'pm10'
};
Example 5: Get description for a subattribute
When data is more complex and the datasets attribute is an array or object, you can also create a description for an attribute of this sub object.
Example for calculating color, description, etc. only for attribute "pm10" that is in the datasets attribute "pollution"
window["wordldmap2d_datadescription_example14_options"] = {
visuDataset: 'pollution',
visuAttribute: 'pm10'
};
Alternative possibility for objects in objects is useing:
var worldmap2d_datadescription_example22 = {
BEZ: {
txt_title: 'Bezeichnung',
txt_desc: 'Stadt oder Gemeinde',
txt_uknw: 'unknown',
col: '#7B7B7B',
values: {
'Stadt': {
txt: 'Stadt',
col: '#FF7F50'
},
'Gemeinde': {
txt: 'Gemeinde',
col: '#7FFFD4'
}
}
},
'destatis.population': { // This is access to he destatis object and looking at the population attribute.
txt_title: 'Bevölkerung',
txt_desc: 'Anzahl Einwohner',
txt_uknw: 'unknown',
col: '#7B7B7B',
calcmode: '<',
values: {
'250000': {
txt: 'unter 250.000 Einwohner',
col: '#2AAD27'
},
'500000': {
txt: '250.000 bis 500.000 Einwohner',
col: '#FFD326'
},
'1000000': {
txt: '500.000 bis 1.000.000 Einwohner',
col: '#CB2B3E'
}
}
}
};
Example 6: Useing gradient colors
Use the gradient calcmode to get colors calculated from the value that lies between fixed colors for values.
var datadescription_data6 = {
doubleval: {
txt_title: 'DoubleWert',
txt_desc: 'Ein Wert mit double Genauigkeit',
txt_uknw: 'Es wurde kein Wert angegeben',
col: 'blue',
calcmode: 'gradient',
values: {
'10': {
txt: 'ein niedriger Wert',
col: '#008000'
},
'100': {
txt: 'ein mittelniedriger Wert',
col: '#0000FF'
},
'1000': {
txt: 'ein mittelhoher Wert',
col: '#FFFF00'
},
'10000': {
txt: 'ein hoher Wert',
col: '#FF0000'
}
}
}
};
<div id="datadescription_example6" swa="Datadescription FROM datadescription_data"></div>
<div id="datadescription_example6_present" swa="Present FROM exampledata_list TEMPLATE table_for_all_datasets"></div>
// Use datadescription component "datadescription_example3" to format data in second component "datadescription_example6_present"
window.swac.reactions.addReaction(function(requestors) {
requestors['datadescription_example6'].swac_comp.formatDataElement(requestors['datadescription_example6_present']);
},'datadescription_example6','datadescription_example6_present');