How To Use D3 Xmpro App Designer

In this video, you’ll learn how to use D3 in the XMPRO App Designer. You can download the template file here: http://xmp.ro/d3template

Need help with creating your XMPRO apps? Send an email...

Transcript

In this video, you’ll learn how to use D3 in the XMPRO App Designer. You can download the template file here: http://xmp.ro/d3template

Need help with creating your XMPRO apps? Send an email... d3 control

d3 is a javascript library which is used

to create

rich visualizations primarily using svg

if you go on to their website you will

notice that they have

comprehensive documentation here in

terms of how to script

those visualizations and transformations

they also have a long list of examples

and samples

which one can use for example

here is a sunburst visualization

which i have copied and put into our

template for d3

as you can see here and

using the script which is

roughly around 100 lines i'm able to

create this

visualization very quickly

where i can click and show a bit of

animation

drill down into items

so how do you use the d3 control

if i go to the design view

i can drag across a d3 control from the

toolbox

and then give it the t3 script

which will come from my app files if i

don't have the one i want

i can click on plus and then upload

the required script file

once it is uploaded i will be able to

choose it

in here so this is a small script which

basically displays a chart

and plots x y values on it

next step i would like to do is provide

some data source

so i've already created a data source

which is returning me some values

and if i choose that for my control and

launch the app

you would notice it will put in the

chart which came from the d3 script

and plot some values that i sent via the

data source

if you look at the script this is what

it looks like

but more importantly if you look at the

generic template we have

the script goes in here but over here

you respond to the data that is being

sent to

your script or d3 control so when the

data gets loaded

you would like to for example in this

case display those points

when the data changes you would like to

respond to those changes

and adapt so you can have a chart which

is live

so if i go ahead and make a change to

this data source which is a table

and i insert a new perhaps a new record

into it

it will then start to appear over here

and as you can see the new record just

appeared

so this is how you configure and use a

d3 script control