Vizual Data Tools Tutorial

Version 1.0


Table of Contents

Table of Contents ....................................................................................................................... 2
Overview .................................................................................................................................... 3
Geometry Plugins ........................................................................................................................ 5
Area Chart .............................................................................................................................. 5
Line Chart ............................................................................................................................... 9
Bar Chart .............................................................................................................................. 12
Pie Chart ............................................................................................................................... 16
Scatter Chart ......................................................................................................................... 19
Stock Chart ........................................................................................................................... 21
Function Plugins ....................................................................................................................... 24
Data Label ............................................................................................................................ 24
Data Fit ................................................................................................................................. 26
Data Import .......................................................................................................................... 27
Data Storage ......................................................................................................................... 28



Vizual Data Tools Tutorial
This document will guide you through the creation process of charts in Viz
Artist 3 using the latest version of the Vizual Data Tools plugins.
Overview
Viz Vizual Data Tools (VDT) were designed for Viz Artist 3 to display any kind of statistic data in
the best fitting way. All plugins use the same transport channel: Viz Artist 3 Shared Memory.
Shared Memory is a map holding user-defined variables indexed by a string this is also known
as a key-value pair.
There are 3 types of Shared Memory Maps the difference between them is their distribution
location:
Scene -
Local - (local engine, data sharing between scenes in different layers)
Distributed - Shared Memory (share data between engines connected to the same GH)
The key-value pairs of Shared Memory can be accessed via UDP(external control
applications), viz commands, viz plugin API and viz Scripting language (refer to the Script
documentation, section Data Sharing for more details). Shared memory contains functionality
which allows you register for value changes. VDT is using this functionality which means that
if a value in the shared memory map is changed the chart which is registered to the certain
shared memory key immediately redraws itself.

For example there could be a control PC running a content pilot template which sends stock
prices to a viz engine for displaying the data as a stock chart using sdi output and to
another one using hd video output. The data has to be sent only once! If you run a 3D
stereoscopic render system with 2 engines you can also just send the data to one engine.
Another way this could be used would be to display data on each renderer in a different
chart type.

The VDT plugin suite consists out of Geometry- and Function plugins. The geometry part is
responsible for drawing the chart itself while the function plugins are used for chart labeling,
data scaling, etc.


In the following sections the functionality of each plugin is described in detail. It is
recommended to go through all examples to get a feeling for how to build VDT scenes.
Before we go through each plugin in detail we start with a simple example first.

All example scenes can be imported from the archive that comes with the VDT tutorial.

Geometry Plugins
The following tutorials are for the geometry plugins provided with VDT:

Area Chart
Line Chart
Bar Chart
Pie Chart
Scatter Chart
Stock Chart
Area Chart
Description
Draws a filled XY chart.
Introduction Tutorial- Creating your first VDT Chart with the Area Chart Plugin.
In this tutorial you will learn how to create a basic chart with the VDT plugins.
1. Start with an empty scene in VizArtist.
2. In the Geometry Plugins (GP) tab > VisualDataTools folder and Drag&Drop the AreaChart
plugin into the scene.
3. Select the Container or Function Plugins (CP) tab > VizualData tools folder and drag the
DataStorage plugin into the scene.
The plugin will automatically jump to your area chart container.
4. Select your AreaChart plugin > set SharedMem. parameter to Scene.
5. Rename the Key Data Y parameter to MyDataY.
6. Select the DataStorage plugin > Enter the same key name for Key Data1 as you just did in
the AreaChart plugin MyDataY. Set SharedMem. parameter to Scene.
7. Go to the Data1 parameter in the DataStorage plugin and type the following text
sequence into the text field. 10,40,50,20,80,90,60,50.
While you are typing you can see the graph already growing. We are using , as a
delimiter sign which is the decimal sign in some countries. But you can use any delimiter
you want. Just go to the chart plugin, AreaChart in our case, and set Data Delim. to the
desired sign.


Congratulations! - you have just created your first scene with the VDT plugins. You can use the
same procedure for creating the area chart to create another of the VDT charts. The following
examples explain how to further edit the parameters of the VDT charts to achieve your desired
result.
Area Chart Tutorial/Continued
Lets continue with the introduction tutorial here, we will continue by defining the space between
points on the x axis.
8. Go to the AreaChart plugin > activate Specify X Values parameter. in order to define the
spacing between the points on the X axis.
9. Input MyDataX into the Key DataX text field.
10. Open the DataStorage plugin > set the same key name for Key Data2.
11. Enter values for Data2 like: 20,40,60,80,100,120,140,160






You see that the charts appearance has changed and it doesnt fit into the same screen
space as before. We need a way to scale the chart automatically to a certain area
independently of the data values used in the chart. This is for what the Data Fit options in
all VDT chart plugins are made for! We start with the X axis transformation:

12. Activate DataX Fit.
New parameters pop up and you can set scaling and offset values manually for the chart.
But we want the plugin to do that automatically for us.
13. Activate DataX Auto Scale.
We want to scale the whole chart so you do not need to change DataX Fit Size which is set
to Total by default. The Current option scales the chart segments which are visible at the
moment (the segment size is controlled with the Start[%, abs, #] and Stop[%, abs, #]
parameters which will be used later in that example).
14. Now set DataX Start and DataX Stop to define where the graph should start and stop in X.
E.g. you can set it to 0.0 and 400.0
When you look at the AreaChart graphic you see that it does not really start at 0.0 but it
stops at 400.0 as desired. Why is that? Go back to X Values we entered in the DataStorage
plugin before. There you see that our chart starts at position 20.0 at the X axis. This
means that there is no data in the range from 0.0 to 20.0. If you look into the
transformation editor of the container you can see that the chart width is 350.0. Also
have a look at the DataX Scale parameter value in the AreaChart. It was set automatically
to 2.5. Now this is an easy calculation 20.0 * 2.5 + 350.0 = 400.0 which means that the
correct range from 0.0 to 400.0 is used. But we also want to get rid of that 50.0 offset at
the beginning of the chart.

15. One click on DataX Detect Limits and the chart really starts at 0.0.
16. Now you can do the same for the Y-Axis by using DataY Fit (e.g. DataY Start: 0.0 and
DataY Stop: 300.0).

Now we want a smoother chart:
17. Set Type to Spline and Increase Tessellation Width to 100 for a nice look.
Until now the chart was completely flat. You can add some depth with the Chart Depth
parameter.
18. Set Chart Depth to 20.0 and rotate the chart to see the effect better.
In a last step we create an In-animation for the chart. As already mentioned you can move the
charts start and stop point with Start[%, abs, #] and Stop[%, abs, #].
19. Set Stop [%, abs, #] to 0.0 and create a keyframe in Artist (Set Key).
20. Set Stop[%, abs, #] back to 100.0 and press Set Key again.
21. Start the animation!


Line Chart
Description
Draws a XY line chart.
Tutorial
1. Follow the first 7 steps of the Area chart tutorial replacing the Area chart plugin with the
Line Chart Plugin. and input MyData into the Key Data1 parameter of the Data storage
plugin and Area Chart Plugin instead of inputting My Data Y into the Key Data Y
parameters of both plugins.
After this step you should see a basic flat line chart.
2. Set the desired width with the Chart Width parameter. We use 300.0 here.
3. Set Line Type to Constrained Spline and Tessellation Width to 50.
Using a constrained spline prevents values from overshooting.
4. Set Depth to 50.0.
Our chart has a high tessellation so we do not need to activate the Const. Thickness
feature. (This feature adapts each individual segment size to keep the line width constant.
Play around with it and use lower tessellation values to see the impacts.)
5. Activate the Bevel parameter.
6. Set Bevel Size[%] to 50.0.
This means that half of the smallest edge length of the geometry will be beveled. Bevel
Steps defines the bevels degree of tessellation. Use low values here because the amount

of vertices increases dramatically with that option. To keep the render performance high
it is always recommended to use low values for all tessellation specific settings.
7. A Bevel Steps value of 2 is adequate here.
8. Activate Bevel Start and Bevel Stop.

This adds bevels to the start- and stop-cap of your LineChart.

Now we want to mark the characteristic points of the chart like start, stop, minimum and
maximum:
9. Activate Low Pointer.
Youll see a new container parameter in the GUI.
10. Now drag a new geometry into the scene. e.g. an Arrow Plugin.
11. Then the new geometry in the scene to the Low Pointer Container parameter in the Line
Chart Plugin.
You can repeat those steps 9 -11 for High-, Start-, and Stop-Pointer as well.



12. Change Start and/or Stop position of the LineChart and you can see how the pointers will
follow the chart.
There is also a Pointer parameter which allows you to move geometry along the chart. It
has sub-parameters to control the exact position, rotation and several offsets of the
object.
In the last step of this example we want to add labels to our pointers. This means that we have to
anticipate a bit and introduce the DataLabel plugin already.
13. Create a parent container for all pointers.
14. Select the Container or Function Plugins (CP) tab > VizualData tools and drag the
DataLabel plugin into this parent container.
15. Open the DataLabel plugin editor and set Shared Mem. to Scene.
DataLabel uses also Shared Memory to get the values for its labels.
16. Name the Data parameter to MyDataY.
Now add a text object to each pointer:
17. In the Server > Font Tab (GP) tab > and Drag&Drop any font into the pointer container.
You can also create a parent container for each pointer and drag the pointer and text
geometry into that container. (Data Label is able to search for a text object within the
container groups.)
18. Go back to the LineChart plugin and set Pointers Shared Mem. to Scene.
19. Name the Key Data Pointers parameter to MyDataY.


The labels get updated automatically. You can also tweak the Start and Stop parameter in
the LineChart and follow how the labels move and update their values.
Bar Chart
Description
Draws different bar types (flat, triangle, rectangle, circle, ).
Tutorial
1. Follow the first 7 steps of the Area chart tutorial replacing the Area chart plugin with the
Bar Chart Plugin and input MyData into the Key Data1 parameter of the Data storage
plugin and Area Chart Plugin instead of inputting My Data Y into the Key Data Y
parameters of both plugins.

Now you should see something like this:


2. To make the chart 3D just increase the Corners Value in the BarChart plugin editor. We
use 4 in our example.
3. When you add or remove some Shared Mem. values youll see that the chart width varies
with the amount of values. To keep the chart width constant set Chart Width to Total and
set Bar Width to 450.0 for example.
There is also a Max. Width parameter which defines how thick a bar can become. If you
remove values from the chart youll see the bars with increasing and if there are only 2
bars left they look really big. Max. Width is useful to limit that behavior.
4. Activate Data Fit, then Data Auto Scale and adjust Data Stop to e.g. 150.0
A chart animation would be also nice:
5. Set Stop[%] to 0.0 and create a keyframe. Then set it back to 100.0 and create another
keyframe. Start the animation and have a look on how the bars animate in.


If you want a different style for the animation you can also animate the Start parameter
for example or switch the Progress Mode parameter to Chart. In that mode the bars do
not grow vertically but horizontally instead.
You can also influence the animation speed of the chart. With the current settings the
behavior is the following: the higher a chart value is the longer is its animation time. By
activating the Const. Speed setting the animation time slot for each bar will be the same.
Now we also want to add labels for this chart type:
6. Drag&Drop a DataLabel plugin into the scene and give it the same shared memory
settings as the BarChart plugin.
This way DataLabel will receive the same values as the BarChart.
7. Create a child container below the DataLabel container and drag a text geometry on it.
This container will be used for labeling the chart.
8. In the DataLabel plugin activate Copy Container.
This way DataLabel will do the work for us and we do not need to create text containers
for each label.
To see some results we need to resend the Data to Shared Memory because Shared Mem.
is optimized to listen to value changes only. We can force that with the DataStorage
plugin. Open it in the plugin editor and press Resend Data.The Labels appear but they
arent positioned correct yet.

If you want to position labels directly on a chart and not just beneath it then the chart
plugin needs to control the label positions because it is the only one who know the
internal geometry structure of the start.
9. Go back to the BarChart plugin > activate Pos. Container.
We can also center the label containers on the bars by activating Center Container.
10. Activate Use Scaling in the DataLabel plugin and turn Scaling max. down to 0.3.
You can change the text size directly or more comfortably with the DataLabel plugin.
11. Back in the BarChart plugin you can add a Container Offset around 15.0 to bring the
labels above the bars.
12. Play our previously created animation again.
See how the labels follow the bars? You can add more animation effects for the Labels
itself now.
13. Create an Animation for the Total Length[%] parameter in the DataLabel plugin from 0.0
to 100.0 and move the animation to the starting point of the BarChart animation.


Thats it the labels scale up with the bars. Also have a look on the other animation
types like Alpha or Animate Values.


Pie Chart
Description
Draws a variety of different pie charts.
Tutorial
1. Follow the first 7 steps of the Area chart tutorial replacing the Area chart plugin with the
Bar Chart Plugin and input MyData into the Key Data1 parameter of the Data storage
plugin and Area Chart Plugin instead of inputting My Data Y into the Key Data Y
parameters of both plugins.
2. Increase the Diameter of the chart: e.g. 300.0
3. Adjust Inner Cutoff to 130.0.
4. Increase the Corners (which is the tessellation in fact) to 50.0 to get a smoother
geometry.
5. Now add a bit Center Offset to make the single segments visible.
We set it to 3.0 here in this example.



Lets add an animation for the chart:
6. Set Piece Size[%] to 0.0 and add a keframe. Now set Piece Size back to 100.0 and create
another keyframe. Play the animation.

You can switch between different animation styles with the Piece Scaling parameter. By
default it is set to All. The Single option is intended for showing one piece after another
which means that each piece has its own 100% for the animation. In our example we
have 700% to show 7 pieces. The Fit option fits all pieces into the current Piece Size[%]
progress which means that all pieces will grow at the same time to their end size.
Another nice effect is to move single pieces out of the pie. The Move Piece Parameter
defines which piece should be moved. The first piece has index 0 the second 1 and so
on
7. Set Move Piece to 3.
8. Set Center Offset to 30.0 and bring the piece forward in Z by setting Height Offset to
50.0
Multiple pieces can be controlled via the Effect Range parameter.
The Pie Chart support bevels too:
9. Activate Bevel and set Bevel Steps (Tessellation) to 3.



In the last step well add labels for the chart:
10. Drag&Drop the DataLabel plugin into the scene and create a text child container.

11. Open the DataLabel plugin editor > Shared Mem. > click Scene.
12. Input MyData into Key Data parameter.
13. Activate Copy Container.
This will create multiple instances of the text containers.
14. Activate use scaling.
This will scale all Labels more easily at once.
15. Go to the DataStorage plugin and resend the data to generate the labels.
You should see multiple text containers open at this point.
16. Open the PieChart plugin editor and activate Pos. Container to rearrange the labels.
17. Activate Center Container.
18. Increase the Container offset to 180.0 and Container Pos. Z[%] to 100.
This means that the labels are positioned on the same Z position as the front surface of
the chart. 100% equals the chart depth.
19. Set Scaling max. to 0.4.
Now there is only the label animation missing:
20. Set Total Length[%] in the DataLabel plugin to 0.0, create a keyframe, set it back to 100.0
and create another keyframe. Play and watch the finished chart animation.





Scatter Chart
Description
This chart takes any kind of geometry and uses it to draw value dependent on data nodes.
Tutorial
1. Follow the first 11 steps of the Area chart tutorial replacing the Area chart plugin with the
Scatter Chart Plugin.
We have to create the geometry which will be used for the scatter nodes:
2. Drag any geometry into the scene and scale it down to X, Y, Z = 0.4
We are using spheres.
3. Hide to container because we do not want to see it in the scene. It is just a prototype.
4. Now open the ScatterChart plugin editor and drag the node container onto the Container
parameter. As soon as you assigned the container the instances will be generated and
translated on the defined X,Y position.
5. For a better arrangement activate DataX Fit, DataX Auto Scale and set DataX Stop to 500.0.
Do the same for DataY Fit but set DataY Stop to 200.0 instead.


Lets also add labels for this chart.


Here it is a bit different in comparison with the previous examples. The chart container
already occupies child containers as scatter nodes. You can add another ScatterChart
which receives the same shared memory values and use this chart for label positioning.
Or you can use the latest DataLabel plugin which is able to automatically parse for text
geometries within a sub-tree. This means you just have to add a text container to the
existing scatter node prototype.
6. Make your prototype container visible again.
7. Position the label where you want. Set the Text Orientation to Center in the text editor.
Now hide the prototype node container again.
8. Add the DataLabel plugin to the chart container and set Shared Mem. to Scene and Key
Data to MyDataY.
9. Go back to the ScatterChart and reset the Container parameter. Then reassign the node
prototype.
This way new scatter node instances (including the added text container) will be
generated.
10. Open the DataStorage plugin editor and press Resend Data to update the DataLabel
values.
11. Lets do some more DataLabel modifications: Open DataLabel and reduce Decimals to 1.
You can also add a postfix or unit to the labels e.g. set Unit to $.
If you are satisfied with the chart appearance you can add an animation now:
12. Open the ScatterChart plugin editor and create keyframes for Total Length[%] = 0.0 and
Total Length[%] = 100.0.
13. Play the animation!
You see and X,Y,Z scaling animation by default. Another interesting effect is if you
activate Animate Position by setting it to Y. This way the scatter nodes move up to their
defined value while they are growing.






Stock Chart
Description
Draws candle bar charts with open, close, min, and max values.
Tutorial
1. Add a StockChart and a DataStorage plugin to the scene.
2. Shared Mem. setup as usual. The StockChart is a candle chart which can receive up to up 4
values per candle. So we specify 4 Scene type Shared Mem. Keys for open, close, high and
low value with the following data:
MyDataOpen:
11.113#11.14254#11.20321#11.23301#11.2281#11.11988#11.14133#11.08947#11.13
013#11.13733#11.07458#11.2654#11.27853#11.34345#11.34681#11.33656#11.2832
5#11.34953#11.35833
MyDataClose:
11.14494#11.20385#11.23955#11.2165#11.12004#11.14133#11.08963#11.12997#11.
13765#11.07378#11.26877#11.27877#11.34289#11.34745#11.33632#11.28325#11.3
5449#11.38251#11.36714
MyDataHigh:
11.28702#11.26917#11.2903#11.2943#11.26892#11.21137#11.22098#11.194#11.210
73#11.20313#11.3023#11.37979#11.42925#11.46816#11.42005#11.40132#11.42877

#11.46575#11.46295
MyDataLow:
11.10107#11.09403#11.14182#11.13757#11.10875#11.08306#11.01799#11.05217#1
1.05329#11.01743#11.06401#11.18184#11.2213#11.27261#11.24635#11.21305#11.2
5612#11.22074#11.27813
Do not forget to set the Data Delim. parameter in the StockChart to #!
3. Activate Data Auto Scale and Data Detect Limits to scale the chart values to the interesting
section. Increase Data Stop to about 300.0.
4. Set Width Scaling to Fit.
To scale the chart horizontally always to the same width.
5. Adjust Candle Width to 650.0
You see that the bull candles (close value higher than open value) and bear candles (close
value lower than open value) are colored green and red automatically. You can define
those colors also by yourself. For this example we just want to use a material color for the
chart so switch off Use Vertex Colors.


6. To make the chart 3D just increase the Candle and/or Wick Corners parameter.
We use 4 Candle Corners and let the Wick Corners remain on 2.
7. Bevel the candle by activating Bevel Candle, Bevel Candle Top and Bevel Candle Bottom.
Set Bevel Candle Size[%] to 30% and Bevel Candle Steps to 2.
As we did in the previous examples we also want to add a chart animation here.

8. Just create keyframes for Total Length[%] = 0.0 and Total Length[%] = 100.0.
9. Start the animation!



Function Plugins
There are also plugins for modifying, labeling, storing or importing (Access, Excel, ) data:
Data Label
Data Fit
Data Import
Data Storage
Data Label
Description
This plugin is used to label charts.
Tutorials
In the previous chart examples youve already used the DataLabel plugin a lot but there are still
some features that can be useful to know:
1. Add an empty container to the scene.
2. Lets start with an empty scene again and Drag&Drop a DataLabel and a DataStorage
plugin on a container in the scene-tree
3. Add a Text child container
4. Go to the DataLabel plugin, set Shared Mem. to Scene and KeyData to MyData.
5. In DataStorage also set Shared Mem. to Scene, Key Data1 to MyData and Data1 to e.g.:
80,40,50,70,80,60,80
6. Go back to the DataLabel plugin and activate Copy Container to create multiple instances
of the text containers automatically.
You see all labels located on the same position now. In the previous examples always the
chart plugin was responsible for the label positioning. In this example we want to move
that responsibility to the DataLabel plugin itself.
7. Switch PosX to Range, DistanceX to 500.0 and OffsetX to -250.0.
We want to position the labels over a certain X, Y or Z range in space.
8. Set PosY to Range, OffsetY to -75.0 and DistanceY to 150.0
You can also do a value dependent translation by setting PosX, Y, or Z to Data


Now we want to sort the labels:
9. Set Sort to Ascending.
You see that there are labels with the same values. We want to get rid of them and activate
Remove Multiples for that. You can also try the Nice Numbers option now which searches
for the next logarithmic style labels. But we continue with deactivated Nice Numbers
parameter now.
In the last step we create an animation where the label values should count up to their final value.
10. Activate Animate Values and turn down Total Length[%] to 0.0. Create a keframe, set Total
Length[%] back to 100.0 and create another keyframe.
Start the animation and see the labels counting and distributing over the specified XY
range.


Data Fit
Description
Scales incoming data and resends it to other plugins.
Tutorials
DataScale listens for incoming data and modifies and redistributes it to another Shared Memory
key.
We want to feed 2 charts with data. One with the original and the other with the modified data
from DataScale.
1. Create a new container.
2. Drag&Drop a DataStorage and a DataFit plugin into this container.
3. Drag&Drop 2 Bar charts to become children of this container.
4. Open the plugin editor of the first BarChart and set Shared Mem. to Scene and KeyData to
MyData.
5. Do the same for the second BarChart but use MyDataFit as the key name.
6. Go to the DataFit plugin and set its Shared Mem. type also to Scene
7. Set Key Data Src.1 to MyData and Key Data Dest.1 to MyDataFit > set Scale to 2.0.
The input Shared Mem key is specified with Key Data Src. and the output with Key Data
Dest.

8. Now edit DataStorage for the input values: set Shared Mem. to Scene, Key Data1 to MyData
and type in some example values for Data1: 80,40,50,70,80,60,80
As soon as you start typing you see both charts building up with the different values from
DataFit.

Data Import
Description
Imports data from Access databases or Excel files and distributes it to charts or other
plugins via Shared Memory.
Tutorial
In this example we want to import data from an Excel Sheet and feed a LineChart with it through
Shared Memory:
1. Open Microsoft Excel
2. Enter ExcelDataY into the cell A1
3. Add some example values in the cells below (A2-A8: 80, 40, 50, 70, 80, 60, 80)
4. Rename this first sheet to MyTable (can be done with a double click on the sheet name at
the bottom)
5. Save the Excel file as ExcelData.xls at C:\
6. Go back to VizArtist, create a new scene and Drag&Drop a LineChart and a DataImport
plugin into it.
7. Setup a Scene Shared Mem. with MyDataY as key name in both plugins.

8. Set the parameter Data Delim. to # in each plugin.
9. In the LineChart set ChartWidth to 500.0. Activate DataY Fit, DataY Auto Scale and DataY
Detect limits. Adjust DataY Stop to 200.0.
10. Activate Const. Thickness to give the chart a constant line width.
Now we are ready for importing.
11. Open the DataImport plugin editor and choose the stored Excel file for the parameter File.
12. Enter MyTable for the Table / Sheet parameter and ExcelDataY for Column(,Col)
13. Press the GetIt push button and the chart appears.
Data Storage
Description
Stores data in the current scene and sends it to the other plugins on startup. This plugin helps
artists during scene design if there isnt any data source available.
Example
Data Storage was used in nearly all of the previous chart examples. Just have a look into one of
them to see how this plugin is used practically.