Visualizaciones gráficas con js

Visualizaciones en JS

Abril 2013

Propósito?
Presentar clientside gráficas informativa y de media y alta complejidad y calidad
Uso
Representaciones estadísticas / matemáticas
Animaciones complejas interactivas

Técnicas empleadas
SVG
Canvas 2D
Canvas "3D" (webgl)
Plugins que hacen uso de estas tecnologías

SVG
Soportado por todos los navegadores principales
Bastante intuitivo para gráficas básicas
Poco amigable para manipulación de código

EJEMPLO

<v>
sg
<icec=10 c=5"r"0 srk=bak srk-it=2 fl=rd /
crl x"0" y"0 =4" toe"lc" toewdh"" il"e" >
<sg
/v>

Más ejemplos básicos

Librerías / frameworks para SVG
D3.js
Colección de gráficas de todo tipo (barras, tortas, heatmaps, etc)
Provee una interfaz similar a jquery, para reunir funcionalidad común a las gráficas
Manual Introductorio
Manual paso a paso

1,500

1,000

500

S&P 500
0
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010

vrmri ={o:2,rgt 4,bto:2,lf:0,
a agn tp 0 ih: 0 otm 0 et2}
wdh=90-mri.ih -mri.et
it 6 agnrgt agnlf,
hih =10-mri.o -mri.otm
egt 4 agntp agnbto,
pre=d.iefra(% %".as;
as 3tm.omt"b Y)pre

/ Sae.Nt teivre rnefrteysae bge i u!
/ cls oe h netd ag o h -cl: igr s p
vrx=d.iesae)
a 3tm.cl(
.ag(0 wdh)
rne[, it];

vry=d.cl.ier)
a 3saelna(
.ag(hih,0)
rne[egt ];

/ Ae
/ xs
vrxxs=d.v.xs)
a Ai 3sgai(
.cl()
saex
.ikie-egt
tcSz(hih)
.ikudvd(re;
tcSbiietu)

vryxs=d.v.xs)
a Ai 3sgai(
.cl()
saey
.ik()
tcs4
.ret"ih";
oin(rgt)

/ A ae gnrtr frtelgtfl.
/ n ra eeao, o h ih il
vrae =d.v.ra)
a ra 3sgae(

.neplt(mntn"
itroae"oooe)
.(ucind {rtr xddt) }
xfnto() eun (.ae; )
.0hih)
y(egt
.1fnto(){rtr ydpie;};
y(ucind eun (.rc) )

/ Aln gnrtr frtedr srk.
/ ie eeao, o h ak toe
vrln =d.v.ie)
a ie 3sgln(
.neplt(mntn"
itroae"oooe)
.(ucind {rtr xddt) }
xfnto() eun (.ae; )
.(ucind {rtr ydpie;};
yfnto() eun (.rc) )

d.s(./aasok.s" fnto(aa {
3cv".dt/tcscv, ucindt)

/ Fle t oesmo;teSP50
/ itr o n ybl h & 0.
vrvle =dt.itrfnto(){
a aus aafle(ucind
rtr dsmo = "& 50;
eun .ybl = SP 0"
};
)

/ Predtsadnmes W asm vle aesre b dt.
/ as ae n ubr. e sue aus r otd y ae
vle.oEc(ucind {
ausfrahfnto()
ddt =preddt)
.ae as(.ae;
dpie=+.rc;
.rc dpie
};
)

/ Cmuetemnmmadmxmmdt,adtemxmmpie
/ opt h iiu n aiu ae n h aiu rc.
xdmi(vle[]dt,vle[auslnt -1.ae)
.oan[aus0.ae ausvle.egh ]dt];
ydmi(0 d.a(aus fnto(){rtr dpie }];
.oan[, 3mxvle, ucind eun .rc; ))

/ Ada SGeeetwt tedsrddmnin admri.
/ d n V lmn ih h eie iesos n agn
vrsg=d.eet"oy)apn(sg)
a v 3slc(bd".ped"v"
.tr"it" wdh+mri.ih +mri.et
at(wdh, it agnrgt agnlf)
.tr"egt,hih +mri.o +mri.otm
at(hih" egt agntp agnbto)
.ped""
apn(g)
.tr"rnfr" "rnlt( +mri.et+""+mri.o +"";
at(tasom, tasae" agnlf , agntp ))

/ Adteci pt.
/ d h lp ah
sgapn(ciPt"
v.ped"lpah)
.tr"d,"lp)
at(i" ci"
.ped"et)
apn(rc"
.tr"it" wdh
at(wdh, it)
.tr"egt,hih)
at(hih" egt;

/ Adteae pt.
/ d h ra ah
sgapn(pt"
v.ped"ah)
.tr"ls" "ra)
at(cas, ae"
.tr"lppt" "r(ci))
at(ci-ah, ul#lp"
.tr"" ae(aus)
at(d, ravle);

/ Adtexai.
/ d h -xs
sgapn(g)
v.ped""
.tr"ls" " ai"
at(cas, x xs)
.tr"rnfr" "rnlt(, +hih +""
at(tasom, tasae0" egt ))
.alxxs;
cl(Ai)

/ Adteyai.
/ d h -xs
sgapn(g)
v.ped""
.tr"ls" " ai"
at(cas, y xs)
.tr"rnfr" "rnlt( +wdh+"0"
at(tasom, tasae" it ,))
.alyxs;
cl(Ai)

/ Adteln pt.
/ d h ie ah
sgapn(pt"
v.ped"ah)
.tr"ls" "ie)
at(cas, ln"
.tr"lppt" "r(ci))
at(ci-ah, ul#lp"
.tr"" ln(aus)
at(d, ievle);

/ Adasallblfrtesmo nm.
/ d ml ae o h ybl ae
sgapn(tx"
v.ped"et)
.tr"" wdh-6
at(x, it )
.tr"" hih -6
at(y, egt )
.tr"etaco" "n"
at(tx-nhr, ed)
.etvle[]smo)
tx(aus0.ybl;

/ O cik udt texai.
/ n lc, pae h -xs
sgo(cik,fnto( {
v.n"lc" ucin)
vrn=vle.egh-1
a auslnt ,
i=Mt.lo(ahrno( *n/2,
ahforMt.adm) )
j=i+Mt.lo(ahrno( *n/2 +1
ahforMt.adm) ) ;
xdmi(vle[]dt,vle[]dt];
.oan[ausi.ae ausj.ae)
vrt=sgtasto(.uain70;
a v.rniin)drto(5)
tslc(..xs)cl(Ai)
.eet"xai".alxxs;

tslc(.ra)at(d,ae(aus)
.eet"ae".tr"" ravle);
tslc(.ie)at(d,ln(aus)
.eet"ln".tr"" ievle);
};
)
};
)

Azimuthal Projection

stereographic

origin.longitude: 0
origin.latitude: 0
scale: 240
translate.x: 480
translate.y: 250

vrx =d.e.zmta(.cl(4)md(seegahc)
a y 3goaiuhl)sae20.oe"trorpi",
crl =d.e.raCrl(,
ice 3gogetice)
pt =d.e.ah)poeto(y,
ah 3gopt(.rjcinx)
sg=d.eet"oy)apn(sg)
v 3slc(bd".ped"v";

d.sn".dt/ol-onre.sn,fnto(olcin {
3jo(./aawrdcutisjo" ucincleto)
sgslcAl"ah)
v.eetl(pt"
.aacleto.etrs
dt(olcinfaue)
.ne(.ped"ah)
etr)apn(pt"
.tr"" fnto(){rtr pt(iceci();}
at(d, ucind eun ahcrl.lpd) )
.ped"il"
apn(tte)
.etfnto(){rtr dpoete.ae };
tx(ucind eun .rprisnm; )
};
)

fnto rfehdrto){
ucin ers(uain
vrp=sgslcAl"ah)
a v.eetl(pt";
i (uain p=ptasto(.uaindrto)
f drto) .rniin)drto(uain;
pat(d,fnto(){rtr pt(iceci();};
.tr"" ucind eun ahcrl.lpd) )
d.eet"lnsa"
3slc(#o pn)
.etx.rgn)0)
tx(yoii([];
d.eet"ltsa"
3slc(#a pn)
.etx.rgn)1)
tx(yoii([];
d.eet"saesa"
3slc(#cl pn)
.etx.cl()
tx(ysae);
d.eet"tasaexsa"
3slc(#rnlt- pn)
.etx.rnlt([];
tx(ytasae)0)
d.eet"tasaeysa"
3slc(#rnlt- pn)
.etx.rnlt([];
tx(ytasae)1)
}

1.0

0.9

0.8

0.7

0.6

0.5

0.4

0.3

0.2

0.1

0.0
0. 0 0. 1 0. 2 0. 3 0. 4 0. 5 0. 6 0. 7 0. 8 0. 9 1. 0

vrrno =d.admnra(5 .)
a adm 3rno.oml., 1,
dt =d.ag(0)mpfnto( {rtr [adm) rno(] };
aa 3rne80.a(ucin) eun rno(, adm); )

vrmri ={o:1,rgt 1,bto:2,lf:4}
a agn tp 0 ih: 0 otm 0 et 0,
wdh=90-mri.ih -mri.et
it 6 agnrgt agnlf,
hih =50-mri.o -mri.otm
egt 0 agntp agnbto;

vrx=d.cl.ier)
a 3saelna(
.ag(0 wdh)
rne[, it];

vry=d.cl.ier)
a 3saelna(
.ag(hih,0)
rne[egt ];

vrsg=d.eet"oy)apn(sg)
a v 3slc(bd".ped"v"
.ped""
apn(g)
.tr"rnfr" "rnlt( +mri.et+""+mri.o +"";
at(tasom, tasae" agnlf , agntp ))

sgapn(g)
v.ped""
.tr"ls" " ai"
at(cas, x xs)
.tr"rnfr" "rnlt(, +hih +""
at(tasom, tasae0" egt ))
.ald.v.xs)saex.ret"otm);
cl(3sgai(.cl()oin(bto")

sgapn(g)
v.ped""
.tr"ls" " ai"
at(cas, y xs)
.ald.v.xs)saey.ret"et);
cl(3sgai(.cl()oin(lf")

vrcrl =sgapn(g)slcAl"ice)
a ice v.ped"".eetl(crl"
.aadt)
dt(aa
.ne(.ped"ice)
etr)apn(crl"
.tr"rnfr" fnto(){rtr "rnlt( +xd0)+""+yd1)+"" }
at(tasom, ucind eun tasae" ([] , ([] ); )
.tr"" 35;
at(r, .)

sgapn(g)
v.ped""
.tr"ls" "rs"
at(cas, buh)
.ald.v.rs(.()yy
cl(3sgbuh)xx.()
.n"rssat,buhtr)
o(buhtr" rssat
.n"rs" buhoe
o(buh, rsmv)
.n"rsed,buhn);
o(buhn" rsed)

fnto buhtr( {
ucin rssat)
sgcasd"eetn" tu)
v.lse(slcig, re;
}

fnto buhoe){
ucin rsmv(
vre=d.vn.agtetn(;
a 3eettre.xet)
crl.lse(slce" fnto(){
icecasd"eetd, ucind
rtr e0[]< d0 & d0 < e1[]
eun []0 = [] & [] = []0
& e0[]< d1 & d1 < e1[]
& []1 = [] & [] = []1;
};
)
}

fnto buhn( {
ucin rsed)
sgcasd"eetn" !3eettre.mt()
v.lse(slcig, d.vn.agtepy);
}

1997 1996 1995 1994 1993

vrmri ={o:1,rgt 2,bto:2,lf:1}
a agn tp 9 ih: 0 otm 0 et 9,
wdh=90-mri.ih -mri.et / wdh
it 6 agnrgt agnlf, / it
hih =16-mri.o -mri.otm / hih
egt 3 agntp agnbto, / egt
clSz =1;/ cl sz
elie 7 / el ie

vrdy=d.iefra(%",
a a 3tm.omt"w)
we =d.iefra(%",
ek 3tm.omt"U)
fra =d.iefra(%-m%";
omt 3tm.omt"Y%-d)

vrclr=d.cl.unie)
a oo 3saeqatl(
.ag(3rne9.ees()
rned.ag()rvre);

vrsg=d.eet"cat)slcAl"v"
a v 3slc(#hr".eetl(sg)
.aad.ag(93 21)
dt(3rne19, 01)
.ne(.ped"v"
etr)apn(sg)
.tr"ls" "dln)
at(cas, RYG"
.ped""
apn(g)
.tr"rnfr" "rnlt( +(agnlf +(it -clSz *5)/2 +""+(agntp+(egt-clSz *7 /2 +"";
at(tasom, tasae" mri.et wdh elie 3 ) , mri.o hih elie ) ) ))

sgapn(tx"
v.ped"et)
.tr"rnfr" "rnlt(6"+clSz *35+"rtt(9))
at(tasom, tasae-, elie . )oae-0"
.tr"etaco" "ide)
at(tx-nhr, mdl"
.etSrn)
tx(tig;

vrrc =sgslcAl"etdy)
a et v.eetl(rc.a"
.aafnto(){rtr d.iedy(e Dt(,0 1,nwDt( +1 0 1) }
dt(ucind eun 3tm.asnw aed , ) e aed , , ); )
.ne(.ped"et)
etr)apn(rc"
.tr"ls" "a"
at(cas, dy)
.tr"it" clSz)
at(wdh, elie
.tr"egt,clSz)
at(hih" elie
.tr"" fnto(){rtr we()*clSz;}
at(x, ucind eun ekd elie )
.tr"" fnto(){rtr dyd *clSz;}
at(y, ucind eun a() elie )
.au(omt;
dtmfra)

rc.ped"il"
etapn(tte)
.etfnto(){rtr d };
tx(ucind eun ; )

sgslcAl"ahmnh)
v.eetl(pt.ot"
.aafnto(){rtr d.iemnh(e Dt(,0 1,nwDt( +1 0 1) }
dt(ucind eun 3tm.otsnw aed , ) e aed , , ); )
.ne(.ped"ah)
etr)apn(pt"
.tr"ls" "ot"
at(cas, mnh)
.tr"" mnhah;
at(d, otPt)

d.s(vxcv,fnto(s){
3cv"i.s" ucincv
vrdt =d.et)
a aa 3ns(
.e(ucind {rtr dDt;}
kyfnto() eun .ae )
.olpfnto(){rtr d0.pn }
rlu(ucind eun []Oe; )
.a(s)
mpcv;

clrdmi(3vle(aa)
oo.oand.ausdt);

rc.itrfnto(){rtr di dt;}
etfle(ucind eun n aa )
.tr"ls" fnto(){rtr "a q +clrdt[] +"9;}
at(cas, ucind eun dy " oo(aad) -" )
.eet"il"
slc(tte)
.etfnto(){rtr d+" "+dt[] };
tx(ucind eun : aad; )
};
)

fnto mnhaht){
ucin otPt(0
vrt =nwDt(0gtuler) t.eMnh)+1 0,
a 1 e aet.eFlYa(, 0gtot( , )
d =+a(0,w =+ekt)
0 dyt) 0 we(0,
d =+a(1,w =+ekt)
1 dyt) 1 we(1;
rtr ""+(0+1 *clSz +""+d *clSz
eun M w ) elie , 0 elie
+""+w *clSz +""+7*clSz
H 0 elie V elie
+""+w *clSz +""+(1+1 *clSz
H 1 elie V d ) elie
+""+(1+1 *clSz +""+0
H w ) elie V
+""+(0+1 *clSz +""
H w ) elie Z;
}

analytics

animate

data

display

flex

flare

physics

query

scale

util

Canvas 2D
se define un tag CANVAS html en el dom
altamente ligado a JS
muchas primitivas similares a svg, pero con métodos más descriptivos (dibujar línea, rellenar, etc)
otras funciones como aplicar matriz de transformación
Dibujar imágenes existentes dentro del canvas
Tratar el canvas como una imagen (por ej, recuperar el contenido dentro de un área)

<AVShih=20x wdh"0p"i=cna1>/AVS
CNA egt"0p" it=20x d"avs"<CNA>

vrcna1=dcmn.eEeetyd"avs";
a avs ouetgtlmnBI(cna1)
vrcxcna1gtotx(2";
a t=avs.eCnet"d)
cxbgnah)
t.eiPt(;
cxmvT(01)
t.oeo1,0;
cxlnT(,9)
t.ieo010;
cxlnT(0,0)
t.ieo2020;
cxlnT(9,)
t.ieo100;

cxcoeah)
t.lsPt(;
cxsrkSye="f"
t.toetl 00;
cxsrk(;
t.toe)

cxflSye=f0;
t.iltl "0"
cxfl(;
t.il)

<AVShih=20x wdh"0p"sye"akrudwie i=cna1>/AVS
CNA egt"0p" it=20x tl=bcgon:ht" d"avs"<CNA>

vrcna2=dcmn.eEeetyd"avs";
a avs ouetgtlmnBI(cna2)
vrcxcna2gtotx(2";
a t=avs.eCnet"d)
vrig nwIae)
a m= e mg(;
igsc"mgso.n"
m.r=iae/kpg;
igola=ucin)
m.nodfnto({
cxdaIaeig 1,1)
t.rwmg(m, 0 0;
};

Principales métodos del contexto
vi sv()
od ae
vi rsoe )
od etr(

/Tasomcoe
/rnfrains
vi sae fotx foty
od cl( la , la )
vi rtt(fotage
od oae la nl)
vi tasae fotx foty
od rnlt( la , la )

vi tasomfotm1 fotm2fotm1 fotm2fotd,fotd)
od rnfr(la 1, la 1,la 2, la 2,la x la y
vi strnfr(la m1 fotm2fotm1 fotm2fotd,fotd)
od eTasomfot 1, la 1,la 2, la 2,la x la y

/Rcágls
/etnuo
vi ceretfotx foty fotw foth
od laRc(la , la , la , la )
vi flRc(la x foty fotw foth
od iletfot , la , la , la )
vi srkRc(la x foty fotw foth
od toeetfot , la , la , la )

Path (trazas)
vi bgnah )
od eiPt(
vi coeah )
od lsPt(
vi fl()
od il
vi srk()
od toe
vi ci()
od lp
vi mvT(fotx foty
od oeo la , la )
vi lnT(fotx foty
od ieo la , la )
vi qartcuvT(la cx fotcyfotx foty)
od udaiCreofot p, la p,la , la

vi bzeCreofotc1,fotc1,la c2,fotc2,la x foty)
od eiruvT(la px la pyfot px la pyfot , la

vi acofotx,foty,la x,foty,fotrdu )
od rT(la 1 la 1fot 2 la 2 la ais

vi acfotx foty fotrdu,la satnl,fotednl,ola atcokie)
od r(la , la , la aisfot trAge la nAgeboen nilcws

vi rc(fotx foty fotw foth
od et la , la , la , la )

boeniPitnah fotx foty
ola sonIPt( la , la )

Manipulación a nivel de px
IaeaacetIaeaa fots,fots)
mgDt raemgDt( la w la h
IaeaacetIaeaa Iaeaaiaeaa
mgDt raemgDt( mgDt mgdt)
IaeaagtmgDt(la s,fots,fots,fots)
mgDt eIaeaafot x la y la w la h

vi ptmgDt(mgDt iaeaafotd,fotd,Otoa]fotdry,fotdry,la dryit,fotdryegt
od uIaeaaIaeaa mgdt,la x la y[pinl la itX la itYfot itWdh la itHih)

/Iaeaaitraewdh
/mgDt nefc it
usge ln [edny
nind og raol]
hih usge ln [edny
egt nind og raol]
dt CnaPxlra [edny
aa avsieAry raol]

/CnaPxlra itrae
/avsieAry nefc
lnt usge ln [edny
egh nind og raol]

Canvas "3D"/WebGL
Basado en OpenGL
Accede directamente a GPU
Sintaxis poco familiar y conceptos específicos de cálculos de matrices orientados a transformaciones

Ejemplo de uso (MDN)
<oyola=sat)>
bd nod"tr("
<avsi=gcna"wdh"4"hih=40>
cna d"lavs it=60 egt"8"
Yu bosrdentapa t spotteHM5<avs eeet
or rwe os' per o upr h TL cna> lmn.
<cna>
/avs
<bd>
/oy

Inicialización del contexto
fnto sat){
ucin tr(
vrcna =dcmn.eEeetyd"lavs)
a avs ouetgtlmnBI(gcna";

iiWbLcna)
nteG(avs; / Iiilz teG cnet
/ ntaie h L otx

/ Ol cniu i WbLi aalbeadwrig
/ ny otne f eG s vial n okn

i (l {
f g)
g.laClr00 00 00 10;/ Stcerclrt bak flyoau
lceroo(., ., ., .) / e la oo o lc, ul pqe
g.nbeg.ET_ET;
leal(lDPHTS) / Eal dphtsig
/ nbe et etn
g.etFn(lLQA)
ldphucg.EUL; / Na tig osuefrtig
/ er hns bcr a hns
g.la(lCLRBFE_I|lDPHBFE_I)
lcerg.OO_UFRBTg.ET_UFRBT;
/ Certeclra wl a tedphbfe.
/ la h oo s el s h et ufr
}
}
fnto iiWbLcna){
ucin nteG(avs
/ Iiilz tegoa vral g t nl.
/ ntaie h lbl aibe l o ul
g =nl;
l ul

ty{
r
/ Tyt ga tesadr cnet I i fis flbc t eprmna.
/ r o rb h tnad otx. f t al, alak o xeietl
g =cna.eCnet"eg" | cna.eCnet"xeietlwbl)
l avsgtotx(wbl) | avsgtotx(eprmna-eg";
}
cthe {
ac() }

/ I w dnthv aG cnet gv u nw
/ f e o' ae L otx, ie p o
i (g){
f !l
aet"nbet iiilz WbL Yu bosrmyntspoti.)
lr(Ual o ntaie eG. or rwe a o upr t";
}
}

Shaders
fnto iiSaes){
ucin nthdr(
vrfamnSae =gthdrg,"hdrf";
a rgethdr eSae(l sae-s)
vrvreSae =gthdrg,"hdrv";
a etxhdr eSae(l sae-s)

/ Cet tesae porm
/ rae h hdr rga

vrsaePorm=g.raerga(;
a hdrrga lcetPorm)
g.tahhdrsaePorm vreSae)
latcSae(hdrrga, etxhdr;
g.tahhdrsaePorm famnSae)
latcSae(hdrrga, rgethdr;
g.ikrga(hdrrga)
llnPormsaePorm;

/ I cetn tesae pormfie,aet
/ f raig h hdr rga ald lr

i (g.ePormaaee(hdrrga,g.IKSAU) {
f !lgtrgaPrmtrsaePorm lLN_TTS)
aet"nbet iiilz tesae porm";
lr(Ual o ntaie h hdr rga.)
}

g.sPormsaePorm;
luerga(hdrrga)

vrePstoAtiue=g.eAtiLcto(hdrrga,"VrePsto";
etxoiintrbt lgttrboainsaePorm aetxoiin)
g.nbeetxtrbra(etxoiintrbt)
lealVreAtiAryvrePstoAtiue;
}

/Tegthdr)ruiefthsasae pormwt teseiidnm fo teDM rtrigtecmie sae pormt tecle,o nl i i cud' b lae o cmie.
/h eSae( otn ece hdr rga ih h pcfe ae rm h O, eunn h opld hdr rga o h alr r ul f t olnt e odd r opld

fnto gthdrg,i){
ucin eSae(l d
vrsaeSrp,teore crethl,sae;
a hdrcit hSuc, urnCid hdr

saeSrp =dcmn.eEeetydi)
hdrcit ouetgtlmnBI(d;

i (saeSrp){
f !hdrcit
rtr nl;
eun ul
}

teore=";
hSuc "
crethl =saeSrp.isCid
urnCid hdrcitfrthl;

wiecrethl){
hl(urnCid
i (urnCidndTp = crethl.ETND){
f crethl.oeye = urnCidTX_OE
teore+ crethl.etotn;
hSuc = urnCidtxCnet
}

crethl =crethl.etiln;
urnCid urnCidnxSbig
}

/Oc teeeetwt teseiidI i fud istx i ra it tevral teore
/ne h lmn ih h pcfe D s on, t et s ed no h aibe hSuc

i (hdrcittp = "-hdrxfamn" {
f saeSrp.ye = xsae/-rget)
sae =g.raehdrg.RGETSAE)
hdr lcetSae(lFAMN_HDR;
}es i (hdrcittp = "-hdrxvre" {
le f saeSrp.ye = xsae/-etx)
sae =g.raehdrg.ETXSAE)
hdr lcetSae(lVRE_HDR;
}es {
le
/ Ukonsae tp
/ nnw hdr ye
rtr nl;
eun ul
}

g.hdroresae,teore;
lsaeSuc(hdr hSuc)

/ Cmietesae porm
/ opl h hdr rga
g.oplSae(hdr;
lcmiehdrsae)

/ Sei i cmie scesul
/ e f t opld ucsfly
i (g.eSaePrmtrsae,g.OPL_TTS){
f !lgthdraaee(hdr lCMIESAU)
aet"nerrocre cmiigtesaes "+g.eSaeIfLgsae);
lr(A ro curd opln h hdr: lgthdrnoo(hdr)
rtr nl;
eun ul
}

rtr sae;
eun hdr
}

Definiendo los shaders (en el DOM)
<citi=sae-s tp=xsae/-rget>
srp d"hdrf" ye"-hdrxfamn"
vi mi(od {
od anvi)
g_rgoo =vc(.,10 10 10;
lFaClr e410 ., ., .)
}
<srp>
/cit

<citi=sae-s tp=xsae/-etx>
srp d"hdrv" ye"-hdrxvre"
atiuevc aetxoiin
trbt e3 VrePsto;

uiommt uVarx
nfr a4 MMti;
uiommt uMti;
nfr a4 Parx

vi mi(od {
od anvi)
g_oiin=uMti *uVarx*vc(VrePsto,10;
lPsto Parx MMti e4aetxoiin .)
}
<srp>
/cit

Inicializando, creando un cuadrado y dibujando

vrhrzset=400600
a oiApc 8./4.;

fnto iiBfes){
ucin ntufr(
surVrieBfe =g.raeufr)
qaeetcsufr lcetBfe(;
g.idufrg.RA_UFR surVrieBfe)
lbnBfe(lARYBFE, qaeetcsufr;

vrvrie =[
a etcs
10 10 00
., ., .,
-.,10 00
10 ., .,
10 -.,00
., 10 .,
-.,-.,00
10 10 .
];

g.ufraag.RA_UFR nwFot2ra(etcs,g.TTCDA)
lbfeDt(lARYBFE, e la3Aryvrie) lSAI_RW;
}

fnto daSee){
ucin rwcn(
g.la(lCLRBFE_I |g.ET_UFRBT;
lcerg.OO_UFRBT lDPHBFE_I)

prpciearx=mkPrpcie4,600400 01 100;
esetvMti aeesetv(5 4./8., ., 0.)

laIett(;
oddniy)
mTasae[00 00 -.];
vrnlt(-., ., 60)

g.idufrg.RA_UFR surVrieBfe)
lbnBfe(lARYBFE, qaeetcsufr;
g.etxtrbone(etxoiintrbt,3 g.LA,fle 0 0;
lvreAtiPitrvrePstoAtiue , lFOT as, , )
starxnfrs)
eMtiUiom(;
g.rwrasg.RAGESRP 0 4;
ldaAry(lTINL_TI, , )
}

Agregar un cubo al contexto
vrvrie =[
a etcs
/ Fotfc
/ rn ae
-.,-., 10
10 10 .,
10 -., 10
., 10 .,
10 10 10
., ., .,
-., 10 10
10 ., .,

/ Bc fc
/ ak ae
-.,-.,-.,
10 10 10
-., 10 -.,
10 ., 10
10 10 -.,
., ., 10
10 -.,-.,
., 10 10

/ Tpfc
/ o ae
-., 10 -.,
10 ., 10
-., 10 10
10 ., .,
10 10 10
., ., .,
10 10 -.,
., ., 10

/ Bto fc
/ otm ae
-.,-.,-.,
10 10 10
10 -.,-.,
., 10 10
10 -., 10
., 10 .,
-.,-., 10
10 10 .,

/ Rgtfc
/ ih ae
10 -.,-.,
., 10 10
10 10 -.,
., ., 10
10 10 10
., ., .,
10 -., 10
., 10 .,

/ Lf fc
/ et ae
-.,-.,-.,
10 10 10
-.,-., 10
10 10 .,
-., 10 10
10 ., .,
-., 10 -.
10 ., 10
];
vrclr =[
a oos
[., 10 10 10,
10 ., ., .] / Fotfc:wie
/ rn ae ht
[., 00 00 10,
10 ., ., .] / Bc fc:rd
/ ak ae e
[., 10 00 10,
00 ., ., .] / Tpfc:gen
/ o ae re
[., 00 10 10,
00 ., ., .] / Bto fc:bu
/ otm ae le
[., 10 00 10,
10 ., ., .] / Rgtfc:ylo
/ ih ae elw
[., 00 10 10
10 ., ., .] / Lf fc:prl
/ et ae upe
];

vrgnrtdoos=[;
a eeaeClr ]

fr(=;j6 j+ {
o j0 <; +)
vrc=clr[]
a oosj;

fr(a i0 i4 i+ {
o vr =; <; +)
gnrtdoos=gnrtdooscna()
eeaeClr eeaeClr.octc;
}
}

cbVrieClrufr=g.raeufr)
ueetcsooBfe lcetBfe(;
g.idufrg.RA_UFR cbVrieClrufr;
lbnBfe(lARYBFE, ueetcsooBfe)
g.ufraag.RA_UFR nwFot2ra(eeaeClr) g.TTCDA)
lbfeDt(lARYBFE, e la3Arygnrtdoos, lSAI_RW;

/Oc tevre ary aegnrtd w ne t bidteeeetary
/ne h etx ras r eeae, e ed o ul h lmn ra.
cbVrieIdxufr=g.raeufr)
ueetcsneBfe lcetBfe(;
g.idufrg.LMN_RA_UFR cbVrieIdxufr;
lbnBfe(lEEETARYBFE, ueetcsneBfe)

/ Ti arydfnsec fc a totinls uigte
/ hs ra eie ah ae s w rage, sn h
/ idcsit tevre aryt seiyec tinl'
/ nie no h etx ra o pcf ah rages
/ psto.
/ oiin

vrcbVreIdcs=[
a ueetxnie
0 1 2
, , , 0 2 3
, , , / fot
/ rn
4 5 6
, , , 4 6 7
, , , / bc
/ ak

8 9 1,
, , 0 8 1,1, / tp
, 0 1 / o
1,1,1,
2 3 4 1,1,1, / bto
2 4 5 / otm
1,1,1,
6 7 8 1,1,1, / rgt
6 8 9 / ih
2,2,2,
0 1 2 2,2,2
0 2 3 / lf
/ et
]

/ Nwsn teeeetaryt G
/ o ed h lmn ra o L

g.ufraag.LMN_RA_UFR
lbfeDt(lEEETARYBFE,
nwUn1ArycbVreIdcs,g.TTCDA)
e it6ra(ueetxnie) lSAI_RW;

fnto daSee){
ucin rwcn(
/ Certecna bfr w satdaigo i.
/ la h avs eoe e tr rwn n t

g.la(lCLRBFE_I |g.ET_UFRBT;
lcerg.OO_UFRBT lDPHBFE_I)

/ Etbihteprpciewt wihw wn t ve te
/ sals h esetv ih hc e at o iw h
/ see Orfedo ve i 4 dges wt awdhhih
/ cn. u il f iw s 5 ere, ih it/egt
/ rtoo 6040 adw ol wn t seojcsbten01uis
/ ai f 4:8, n e ny at o e bet ewe . nt
/ ad10uisaa fo tecmr.
/ n 0 nt wy rm h aea

prpciearx=mkPrpcie4,600400 01 100;
esetvMti aeesetv(5 4./8., ., 0.)

/ Sttedaigpsto t te"dniy pit wihi
/ e h rwn oiin o h iett" on, hc s
/ tecne o tesee
/ h etr f h cn.

laIett(;
oddniy)

/ Nwmv tedaigpsto abtt weew wn t sat
/ o oe h rwn oiin i o hr e at o tr
/ daigtecb.
/ rwn h ue

mTasae[00 00 -.];
vrnlt(-., ., 60)

/ Sv tecretmti,te rtt bfr w da.
/ ae h urn arx hn oae eoe e rw

mPsMti(;
vuharx)
mRtt(ueoain [,1 1)
voaecbRtto, 1 , ];
mTasae[ueOfe,cbYfst cbZfst)
vrnlt(cbXfst ueOfe, ueOfe];

/ Da tecb b bnigtearybfe t tecb' vrie
/ rw h ue y idn h ra ufr o h ues etcs
/ ary stigatiue,adpsigi t G.
/ ra, etn trbts n uhn t o L

g.idufrg.RA_UFR cbVrieBfe)
lbnBfe(lARYBFE, ueetcsufr;
g.etxtrbone(etxoiintrbt,3 g.LA,fle 0 0;
lvreAtiPitrvrePstoAtiue , lFOT as, , )

/ Stteclr atiuefrtevrie.
/ e h oos trbt o h etcs

g.idufrg.RA_UFR cbVrieClrufr;
lbnBfe(lARYBFE, ueetcsooBfe)
g.etxtrbone(etxooAtiue 4 g.LA,fle 0 0;
lvreAtiPitrvreClrtrbt, , lFOT as, , )

/ Da tecb.
/ rw h ue

g.idufrg.LMN_RA_UFR cbVrieIdxufr;
lbnBfe(lEEETARYBFE, ueetcsneBfe)
starxnfrs)
eMtiUiom(;
g.rwlmnsg.RAGE,3,g.NINDSOT 0;
ldaEeet(lTINLS 6 lUSGE_HR, )

/ Rsoeteoiia mti
/ etr h rgnl arx

mPparx)
voMti(;

/ Udt tertto frtenx da,i i' tm t d s.
/ pae h oain o h et rw f ts ie o o o

vrcretie=(e Dt)gtie)
a urnTm nw ae.eTm(;
i (atuepaeie {
f lsCbUdtTm)
vrdla=cretie-lsCbUdtTm;
a et urnTm atuepaeie

cbRtto + (0*dla /10.;
ueoain = 3 et) 000
/cbXfst+ xnVle*(3 *dla /10.)
/ueOfe = Icau (0 et) 000;
/cbYfst+ ynVle*(3 *dla /10.)
/cbZfst+ znVle*(3 *dla /10.)

/i (ahascbYfst >25 {
*f Mt.b(ueOfe) .)
xnVle=-Icau;
Icau xnVle
ynVle=-Icau;
Icau ynVle
znVle=-Icau;
Icau znVle
}/
*
}

lsCbUdtTm =cretie
atuepaeie urnTm;
}

Frameworks que hacen uso de Canvas
Three.js
PhiloGL
GLGE

Three.js
genera sencillamente contextos de 2d y webgl
los usa transparentemente, son intercambiables
explicita conceptos ímplícitos en webGL propios del modelado en 3D (render, cámara, escena,iluminación, etc)

vrrne;
a edr
vrcnaWdh=50
a avsit 0;
vrcnaHih =50
a avsegt 0;

rne =nwTREWbLedrr) / tminspraCnaRnee( yDmedrr)
edr e HE.eGRnee(; / abé oot avsedrr) oRnee(
rne.eCerooHx0000,1;
edrstlaClre(x000 )
rne.eSz(avsit,cnaHih)
edrstiecnaWdh avsegt;

/ l cmr d l ecn.L hmspet e FVa4 º e rtod apcoqeteee cna dnes dbjr e rne,ytminl dcmsqen s dbjnlsojtsqeetnamnsd 01oamsd 1
/ a áaa e a sea e eo uso l O 5 , l ai e set u in l avs od e iuaá l edr abé e eio u o e iue o beo u sá eo e . á e
vrcmr;
a aaa
cmr =nwTREPrpcieaea4,cnaWdh/cnaHih,01 10;
aaa e HE.esetvCmr(5 avsit avsegt ., 0)
ecn.d(aaa;
seaadcmr)
cmr.oiinst0 0 0;
aaapsto.e(, , )
cmr.oktecn.oiin;
aaaloA(seapsto)

/Dfned u mtra pr ojtsaargral ecn
/eiino n aeil aa beo gea a sea

vrmtra =nwTREMsBscaeil{
a aeil e HE.ehaiMtra(
clr0FFF,
oo:xFFF
sd:HE.obeie /e si e vsbedsecaqirágl
ieTREDulSd /l kn s iil ed ulue nuo
};
)

/Dfned goerad u ojt
/eiino emti e n beo

vrcardGoera=nwTREGoer(;
a udaoemti e HE.emty)
cardGoeravrie.uhnwTREVco3-., 10 00)
udaoemti.etcsps(e HE.etr(10 ., .);
cardGoeravrie.uhnwTREVco3 10 10 00)
udaoemti.etcsps(e HE.etr( ., ., .);
cardGoeravrie.uhnwTREVco3 10 -.,00)
udaoemti.etcsps(e HE.etr( ., 10 .);
cardGoeravrie.uhnwTREVco3-.,-.,00)
udaoemti.etcsps(e HE.etr(10 10 .);
cardGoerafcsps(e TREFc40 1 2 3)
udaoemti.ae.uhnw HE.ae(, , , );

card.oiinst15 00 -.)
udaopsto.e(., ., 70;
ecn.d(udao;
seaadcard)

rne.edrecn,cmr)
edrrne(sea aaa;

Ejemplo del cubo con three
vrcnanr
a otie;

vrcmr,see rnee;
a aea cn, edrr

vrcb,pae
a ue ln;

vrcbRtto =0
a ueoain ;

vrwnoHlX=wno.neWdh/2
a idwaf idwinrit ;
vrwnoHlY=wno.neHih /2
a idwaf idwinregt ;

ii(;
nt)
aiae)
nmt(;

fnto ii( {
ucin nt)

cnanr=dcmn.raelmn('i')
otie ouetcetEeet dv ;
dcmn.oyapnCid cnanr)
ouetbd.pedhl( otie ;

cmr =nwTREPrpcieaea 7,wno.neWdh/wno.neHih,1 10 )
aea e HE.esetvCmr( 0 idwinrit idwinregt , 00 ;
cmr.oiiny=10
aeapsto. 5;
cmr.oiinz=50
aeapsto. 0;

see=nwTRESee)
cn e HE.cn(;

/ Cb
/ ue

vrgoer =nwTRECbGoer(20 20 20)
a emty e HE.ueemty 0, 0, 0 ;

goer.ae[0]clrste(0fff )
emtyfcs .oo.eHx xfff ;
goer.ae[1]clrste(0f00 )
emtyfcs .oo.eHx xf00 ;
goer.ae[2]clrste(00f0 )
emtyfcs .oo.eHx x0f0 ;
goer.ae[3]clrste(000f )
emtyfcs .oo.eHx x00f ;
goer.ae[4]clrste(0ff0 )
emtyfcs .oo.eHx xff0 ;
goer.ae[5]clrste(0f0f )
emtyfcs .oo.eHx xf0f ;

vrmtra =nwTREMsBscaeil {vreClr:TREFcClr })
a aeil e HE.ehaiMtra( etxoos HE.aeoos ;

cb =nwTREMs(goer,mtra )
ue e HE.eh emty aeil ;
cb.oiiny=10
uepsto. 5;
seead cb )
cn.d( ue ;

rnee =nwTRECnaRnee(;
edrr e HE.avsedrr)
rnee.eSz(wno.neWdh wno.neHih )
edrrstie idwinrit, idwinregt ;

cnanrapnCid rnee.oEeet)
otie.pedhl( edrrdmlmn ;

}

fnto aiae){
ucin nmt(

rqetnmtoFae aiae)
eusAiainrm( nmt ;

rne(;
edr)

}

fnto rne( {
ucin edr)

cbRtto =1 /10.;
ueoain 5 000

cb.oainy+ cbRtto;
uertto. = ueoain
cb.oainx+ cbRtto;
uertto. = ueoain
cb.oainz+ cbRtto;
uertto. = ueoain
rnee.edr see cmr )
edrrrne( cn, aea ;

}

Frameworks varios
Google Charts
js-sequence-diagrams
TeeChart (versión para html5)
MathBox.js

TeeChart
Use WebGL ™ Drag mouse and wheel to rotate, pan and zoom.

vrtre Cat;
a he, hr1

fnto da( {
ucin rw)

/ Cet 3 WbLcnet
/ rae D eG otx:
tre =nwTeTre"avs";
he e e.he(cna1)

/Eape saos
/xml, hdw:
tresthwhdw(re;
he.eSoSaostu)

/ Cet Cat
/ rae hr:
Cat =nwTeCattre;
hr1 e e.hr(he)

/ AdBrsre t Cat
/ d a eis o hr:
Cat.dSre(e TeBr[,,,,],[Oe,"w" "he" "or,"ie ] )
hr1adeisnw e.a(53271 "n" To, Tre, Fu" Fv" ) ;

Cat.il.et"eCatfrWbL(m"
hr1ttetx=Tehr o eG t);
Cat.otrtx=Md wt Trej"
hr1foe.et"ae ih he.s;

Cat.al.aksz=.;
hr1wlsbc.ie02
Cat.al.etsz=0
hr1wlslf.ie1;
Cat.al.otmsz=0
hr1wlsbto.ie1;
Cat.al.akfra.rnprny02
hr1wlsbc.omttasaec=.;

/ VldwbL?
/ ai eG

i (he.snbe(){
f treiEald)
Cat.rw)
hr1da(;
aiae)
nmt(;
}
es
le
{
/ So msae(eG ntaalbe :
/ hw esg WbL o vial)
Dtco.dGteGMsae)
eetradeWbLesg(;

/ DsbeWbLadueHM52 Cna:
/ ial eG n s TL D avs
trestnbe(as,Cat)
he.eEaldfle hr1;
}

/ Lo
/ op
fnto aiae){
ucin nmt(
treudt(;
he.pae)
rqetnmtoFae aiae)
eusAiainrm( nmt ;
}
}

Map:
World
Africa
Asia
Australia
Europe 27
Europe
South America
USA States

Walls
Axes
Borders
Geo Location
Cities

Use WebGL™

Floor

Depth:
Enable
Variable

Time: 742

CatSye
hr tl: Eal Trej WbL
nbe he.s eG™
Ae
ra
Br
a Lgt:
ihs
Bbl
ube Abet
min
Cnl
ade Lgt0
ih
Dnt
ou
Lgt1
ih
Hrz Br
oi. a
Lgt2
ih
Ln
ie
GoMp
e a Cmr:
aea
Pe
i Prpcie
esetv
PitX
on Y
FV
O:
Plr
oa
Tx 3:
et D
Srae
ufc
So For
hw lo
So:
hw MueTakal
os rcBl
Ae
xs Gis
rd Wrfae
ierm
Foe
otr So Lgt
hw ihs
Lgn
eed Saos
hdw
Tte
il Full Screen
Wls
al So Sas
hw tt
FPS
Sre 1
eis
Sre 2
eis
Otos
pin:
Mrs
ak
S y e Cylinder
tl:
S a k d No
tce:

/*
*
*Bosrp
otta
*/
Dmed.ed(ucin){
oRayrayfnto(
Treo.rla(
heBxpeod[
'.saessipt.llhm'
./hdr/npesgs.tl,
] fnto ( {
, ucin )

/ MtBxbiepae
/ aho olrlt
vrmtbx=wno.aho =mtBx{
a aho idwmtbx aho(
cmrCnrl:tu,
aeaotos re
cro:
usr tu,
re
cnrlls: Treo.riCnrl,
otoCas heBxObtotos
eeeteie tu,
lmnRsz: re
flsre:
ulcen tu,
re
sreso:
cenht tu,
re
sas
tt: fle
as,
sae
cl: 1,
}.tr(;
)sat)

/ Vepr cmr/eu
/ iwot aeastp
mtbx
aho
/ Plrvepr
/ oa iwot
.iwot{
vepr(
tp:'oa'
ye plr,
rne [-,π,[3 6,[1 1]
ag: [π ] -, ] -, ],
sae [,1 1,
cl: 1 , ]
plr 0
oa: ,
})
.aea{
cmr(
obt 4
ri: ,
pi τ4.,
h: /-8
tea 11
ht: .,
})
.rniin30
tasto(0)

/ Sraefnto
/ ufc ucin
.ufc(
srae{
sae:tu,
hdd re
dmi:[-,π,[1 1]
oan [π ] -, ],
n [8 3]
: 4, 2,
epeso:sraeuc
xrsin ufcFn,
})

/ Aiaevepr btenplradcrein
/ nmt iwot ewe oa n atsa
mtbxwrd)lo(.okrRne(ucin( {
aho.ol(.op)hoPeedrfnto )
vrt=+e Dt( *.03
a nw ae) 00;
mtbxst'iwot,{plr Mt.i()*. +. };
aho.e(vepr' oa: ahsnt 5 5 )
};
)
};
)
};
)

/ Abtayfnto (ucinisl)
/ rirr ucin fnto tef
fnto sraeucx y {
ucin ufcFn(, )

rtr [,4+- +Mt.o(*)+Mt.o(*) y;
eun x 1 ahcsx2 ahcsy5, ]
}

2

1.5

1

0.5

0

–0.5

–1

–1.5
1
–2 0.5
3
2 0
1
0
–1 –0.5
–2
–3

/*
*
*Bosrp
otta
*/
Dmed.ed(ucin){
oRayrayfnto(
Treo.rla(
heBxpeod[
'.saessipt.llhm'
./hdr/npesgs.tl,
] fnto ( {
, ucin )

/ MtBxbiepae
/ aho olrlt
vrmtbx=wno.aho =mtBx{
a aho idwmtbx aho(
cmrCnrl:tu,
aeaotos re
cro:
usr tu,
re
cnrlls: Treo.riCnrl,
otoCas heBxObtotos
eeeteie tu,
lmnRsz: re
flsre:
ulcen tu,
re
sreso:
cenht tu,
re
sas
tt: fle
as,
sae
cl: 1,
}.tr(;
)sat)

/ Vepr cmr/eu
/ iwot aeastp
mtbx
aho
/ Creinvepr
/ atsa iwot
.iwot{
vepr(
tp:'atsa'
ye crein,
rne [-,3,[2 2,[1 1]
ag: [3 ] -, ] -, ],
sae [,1 1,
cl: 1 , ]
})
.aea{
cmr(
obt 35
ri: .,
pi τ6
h: /,
tea 03
ht: .,
})
.rniin30
tasto(0)

/ Ae
/ xs
.xs{
ai(
i:''
d a,
ai:0
xs ,
clr 0aaa,
oo: x000
tcs 5
ik: ,
lnWdh 2
ieit: ,
sz:.5
ie 0,
lbl:tu,
aes re
})
.xs{
ai(
i:''
d b,
ai:1
xs ,
clr 0aaa,
oo: x000
tcs 5
ik: ,
lnWdh 2
ieit: ,
sz:.5
ie 0,
zr:fle
eo as,
lbl:tu,
aes re
})
.xs{
ai(
i:''
d c,
ai:2
xs ,
clr 0aaa,
oo: x000
tcs 5
ik: ,
lnWdh 2
ieit: ,
sz:.5
ie 0,
zr:fle
eo as,
lbl:tu,
aes re
})

/ Gi
/ rd
.rd{
gi(
ai:[,2,
xs 0 ]
clr 0ccc,
oo: x000
lnWdh 1
ieit: ,
})

/ Mv ai
/ oe xs
stieu(ucin( {
eTmotfnto )
mtbxst'c,{zr:tu };
aho.e(#' eo re )
mtbxaiae'a,{
aho.nmt(#'
ofe:[,0 -]
fst 0 , 1,
} {drto:10 };
, uain 50 )
mtbxaiae'b,{
aho.nmt(#'
ofe:[3 0 -]
fst -, , 1,
} {drto:10 };
, uain 50 )
mtbxaiae'c,{
aho.nmt(#'
ofe:[3 0 0,
fst -, , ]
} {drto:10 };
, uain 50 )
} 30)
, 00;

/ Mv ai +gi
/ oe xs rd
stieu(ucin( {
eTmotfnto )
mtbxst'b,{lbl:fle arw fle};
aho.e(#' aes as, ro: as )
mtbxai(
aho.xs{
i:''
d d,
ai:1
xs ,
ofe:[,0 -]
fst 3 , 1,
tcs 5
ik: ,
lnWdh 2
ieit: ,
clr 0aaa,
oo: x000
lbl:tu,
aes re
arw fle
ro: as,
};
)
mtbxai(
aho.xs{
i:''
d e,
ai:1
xs ,
ofe:[3 0 1,
fst -, , ]
tcs 5
ik: ,
lnWdh 2
ieit: ,
arw fle
ro: as,
clr 0aaa,
oo: x000
};
)
mtbxai(
aho.xs{
i:''
d f,
ai:1
xs ,
ofe:[,0 1,
fst 3 , ]
tcs 5
ik: ,
lnWdh 2
ieit: ,
arw fle
ro: as,
clr 0aaa,
oo: x000
};
)
mtbxaiae'rd,{
aho.nmt(gi'
ofe:[,-,0,
fst 0 2 ]
} {drto:10 };
, uain 50 )
mtbxgi(
aho.rd{
ai:[,2,
xs 0 ]
tcs [,1,
ik: 2 ]
ofe:[,2 0,
fst 0 , ]
clr 0ccc,
oo: x000
lnWdh 1
ieit: ,
};
)
mtbxaiae'aea,{obt 7 pi τ58+. } {drto:20 };
aho.nmt(cmr' ri: , h: */ 2 , uain 50 )
mtbxaiae'a,{
aho.nmt(#'
ofe:[,-,-]
fst 0 2 1,
} {drto:10 };
, uain 50 )
mtbxaiae'c,{
aho.nmt(#'
ofe:[3 -,0,
fst -, 2 ]
} {drto:10 };
, uain 50 )

mtbxvco(
aho.etr{
n 2
: ,
dt:[0 0 0,[,1 1,[1 -,-] [,1 .],
aa [, , ] 1 , ] -, 1 1, 0 , 5]
};
)
} 60)
, 00;

};
)
};
)

Preguntas?

facundo.a.ferrero@accenture.com

@facundo_ferrero

Visualizaciones gráficas con js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Andere mochten auch

Andere mochten auch (7)

Visualizaciones gráficas con js