programacion reactiva y d3js

UnabreveintroducciónalaUnabreveintroducciónalaprogramaciónreactivayd3.jsprogramaciónreactivayd3.js

ByAlejandroVidal@doblepensador

https://twitter.com/doblepensador

¿Quéeslaprogramación¿Quéeslaprogramaciónreactiva?reactiva?

Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare


https://double-thinker.github.io/talks/programacion-reactiva-d3js/

https://double-thinker.github.io/talks/programacion-reactiva-d3js/programacion-reactiva-d3js.pdf

http://es.slideshare.net/AlejandroVidal26/programacion-reactiva-y-d3js

¿Quéeslaprogramación¿Quéeslaprogramaciónreactiva?reactiva?

Mejordicho:Quéesversusalaprogramaciónimperativa






Formaimperativa:d3

Laformatradicionaldehacerloesconprogramaciónimperativa.






Formaimperativa:d3


varcircles=g.selectAll("circle").data(data);

//Entertext.enter().append("circle").attr("x",function(d){returnd.something;});






Formaimperativa:d3




Esdecir,programasiterativamenteelprocesoquerealizaelordenador:






Formaimperativa:d3





1. "Hey!Ordenador,seleccionaloscírculosexistentes"






Formaimperativa:d3





1. "Hey!Ordenador,seleccionaloscírculosexistentes"2. "Añadelosnuevoselementosqueexistanenlosdatos"






Formaimperativa:d3





1. "Hey!Ordenador,seleccionaloscírculosexistentes"2. "Añadelosnuevoselementosqueexistanenlosdatos"3. "Ponsuxsegúnelvalordesomething"






Formaimperativa:d3

Ysiqueremosquelosdatosseandinámicostenemosqueimplementarunalógicaparaelflujodeinformación.






Formaimperativa:d3


Enelcasoded3.jsestalógicasesueleimplementarconelcicloupdate,enteryexit.Esdecir,utilizarenter(),exit().






Formaimperativa:d3


Enelcasoded3.jsestalógicasesueleimplementarconelcicloupdate,enteryexit.Esdecir,utilizarenter(),exit().

//Joinvarcircles=g.selectAll("circle").data(data);

//Updatecircles.attr("x",function(d){returnd.something;});

//Entertext.enter().append("circle").attr("x",function(d){returnd.someting;});

//Exittext.exit().remove();






Formaimperativa:d3

ytodavíapuedecomplicarsemás...






Formaimperativa:d3

ytodavíapuedecomplicarsemás...¿interacción?






Formaimperativa:d3

ytodavíapuedecomplicarsemás...¿interacción?¿streaming?






Formaimperativa:d3

ytodavíapuedecomplicarsemás...¿interacción?¿streaming?¿widgets?






Formaimperativa:d3


-"Hey!Ordenador,cuandopongaelratónencima¿podríashacerloscírculosmásgrandes?"






Formaimperativa:d3



circles.on('mouseover',function(d){d3.select(this).transition().attr("r",15)})






Formaimperativa:d3




-Ya...bien,pero...siquitoelratón¿Podríashacerlodenuevopequeño?

circles.on('mouseout',function(d){d3.select(this).transition().attr("r",3)})






Formaimperativa:d3




-Ya...bien,pero...siquitoelratón¿Podríashacerlodenuevopequeño?


¡Exactamenteelmismocódigo!






Formaimperativa:problemas

RepitescódigoPuedesequivocarte







RepitescódigoPuedesequivocarte;-)











RepitescódigoPuedesequivocarte;-)





Cuandolosflujosdeinformaciónaumentanelcódigoempiezaacomplicarse






La"otraforma":Programaciónreactiva

Imaginemosunalibrería...








quenotieneunflujodegestión,sólodeclarasloquenecesitas












//Nonecesitamosjoinniupdatenienterniexitcircles.attr("x",function(d){returnd.something;});










-"Ordenador,dibujaunoscírculosconlascoordenadasxsegúnsomething"










-"Ordenador,dibujaunoscírculosconlascoordenadasxsegúnsomething"(Implicitamente:ycuandohayadatosnuevos,añadelos;cuandodesaparezcan,eliminalos)










-"Ordenador,dibujaunoscírculosconlascoordenadasxsegúnsomething"(Implicitamente:ycuandohayadatosnuevos,añadelos;cuandodesaparezcan,eliminalos)

Conquedeclaresunavezelmapeadosomething->xseríasuficiente,¿no?








quemepermitahacerinteraccionessintenerquemetermeenlagráficadelvecino








quemepermitahacerinteraccionessintenerquemetermeenlagráficadelvecino

circles.on("mouseclick",function(d){//filtrolosdatosdeotragráficamyNewFilteredData=amazingFilter(oldData);otherGraphic.selectAll("bars").data(myNewFilteredData);

otherGraphic.attr("y",function(...))//etc,etc,etc....








quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)









circles.attr("x",function(d){returnd.something;});











circles.attr("x",function(d){returnd.something;});.attr("r",if(this.ishovered){return15}else{return3})










Noestamosimperandolasoperacionesquehayquehacerenelcasodecadaevento.











=programaciónimperativa












Estamosdeclarandocuáleselresultadoquequeremossinpreocuparnosdelflujodeprogramación(sinhandlers,programaciónasíncrona,nidoloresdecabeza)












Estamosdeclarandocuáleselresultadoquequeremossinpreocuparnosdelflujodeprogramación(sinhandlers,programaciónasíncrona,nidoloresdecabeza)

=programacióndeclarativa≃reactiva







Disclaimerheexageradounpocolasproblemáticas.







Disclaimerheexageradounpocolasproblemáticas.

-Perdone,ud¡Yoprogramobien!-Micódigoespoesía-Miscallbackssonpreciosos






https://youtu.be/uK9GGFkxXHs?t=49s

Playbackisn'tsupportedonthisdevice.

Top5-Funnygameglitches

0:49/3:24


https://www.youtube.com/watch?v=uK9GGFkxXHs

https://youtu.be/uK9GGFkxXHs?t=49s





Googleglitches;-)






CómohacerunavisualizaciónCómohacerunavisualizaciónreactivareactiva






Visualizacionesreactivas:

Opción1:utilizarlibreríasdiseñadasparacrearvisualizacionesdeformadeclarativa/reactiva.








ggplot2esunbuenejemplo(implementaGrammarofGraphics)








ggplot2esunbuenejemplo(implementaGrammarofGraphics)ggvisesunintentodeimplementarunagramáticasimilarperoreaccionesbásicasanteinteracciones.


http://ggvis.rstudio.com/







ggplot2esunbuenejemplo(implementaGrammarofGraphics)ggvisesunintentodeimplementarunagramáticasimilarperoreaccionesbásicasanteinteracciones.Muypocodesarrollada









ggplot2esunbuenejemplo(implementaGrammarofGraphics)ggvisesunintentodeimplementarunagramáticasimilarperoreaccionesbásicasanteinteracciones.MuypocodesarrolladaVegaesunlenguajedeclarativo(enJSON)yunconjuntodeherramientas.DesarrolladoporInteractiveDataLabdelaUniversidaddeWashington







Vega-lite


Becker's Barley Trellis Plot Format Parse

Edit Vega spec

Renderer CanvasVega-lite

Vega compiled from Vega-Lite (read-only)

Visualization

{ "description": "The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison." "data": {"url": "data/barley.json"}, "mark": "point", "encoding": { "row": {"field": "site", "type": "ordinal"}, "x": {"aggregate": "mean", "field": "yield", "type": "quantitative"}, "y": { "field": "variety", "type": "ordinal", "sort": {"field": "yield","op": "mean"}, "scale": {"bandSize": 12} }, "color": {"field": "year", "type": "nominal"} }}

123456789

10111213141516





Vega


wordcloud Format Parse Vega Visualization

{ "name": "wordcloud", "width": 800, "height": 400, "padding": {"top":0, "bottom":0, "left":0, "right":0}, "data": [ { "name": "table", "values": [ "Declarative visualization grammars can accelerate development, facilitate retargeting across platforms, and allow language-level optimizations. However, existing declarative visualization languages are primarily concerned with visual encoding, and rely on imperative event handlers for interactive behaviors. In response, we introduce a model of declarative interaction design for data visualizations. Adopting methods from reactive programming, we model low-level events as composable data streams from which we form higher-level semantic signals. Signals feed predicates and scale inversions, which allow us to generalize interactive selections at the level of item geometry (pixels) into interactive queries over the data domain. Production rules then use these queries to manipulate the visualization’s appearance. To facilitate reuse and sharing, these constructs can be encapsulated as named interactors: standalone, purely declarative specifications of interaction techniques. We assess our model’s feasibility and expressivity by instantiating it with extensions to the Vega visualization grammar. Through a diverse range of examples, we demonstrate coverage over an established taxonomy of visualization interaction techniques." "We present Reactive Vega, a system architecture that provides the first robust and comprehensive treatment of declarative visual and interaction design for data visualization. Starting from a single declarative specification, Reactive Vega constructs a dataflow graph in which input data, scene graph elements, and interaction events are all treated as first-class streaming data sources. To support expressive interactive visualizations that may involve time-varying scalar, relational, or hierarchical data, Reactive Vega’s dataflow graph can dynamically re-write itself at runtime by extending or pruning branches in a data-driven fashion. We discuss both compile- and run-time optimizations applied within Reactive Vega, and share the results of benchmark studies that indicate superior interactive performance to both D3 and the original, non-reactive Vega system." ], "transform": [ { "type": "countpattern", "field": "data", "case": "upper", "pattern": "[\\w']{3,}", "stopwords": "(i|me|my|myself|we|us|our|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his|himself|she|her|hers|herself|it|its|itself|they|them|their|theirs|themselves|what|which|who|whom|whose|this|that|these|those|am|is|are|was|were|be|been|being|have|has|had|having|do|does|did|doing|will|would|should|can|could|ought|i'm|you're|he's|she's|it's|we're|they're|i've|you've|we've|they've|i'd|you'd|he'd|she'd|we'd|they'd|i'll|you'll|he'll|she'll|we'll|they'll|isn't|aren't|wasn't|weren't|hasn't|haven't|hadn't|doesn't|don't|didn't|won't|wouldn't|shan't|shouldn't|can't|cannot|couldn't|mustn't|let's|that's|who's|what's|here's|there's|when's|where's|why's|how's|a|an|the|and|but|if|or|because|as|until|while|of|at|by|for|with|about|against|between|into|through|during|before|after|above|below|to|from|up|upon|down|in|out|on|off|over|under|again|further|then|once|here|there|when|where|why|how|all|any|both|each|few|more|most|other|some|such|no|nor|not|only|own|same|so|than|too|very|say|says|said|shall)" }, { "type": "formula", "field": "angle", "expr": "[-45, 0, 45][~~(random() * 3)]" }, { "type": "formula", "field": "weight", "expr": "if(datum.text=='VEGA', 600, 300)" }, { "type": "wordcloud", "size": [800, 400], "text": {"field": "text"},

123456789

10111213141516171819202122232425262728293031323334





Ejemplosdeuso

WikipediahaincluídográficasinteractivashecahsconVega(ej)VoyageresunsistemadeexploracióninteractivaconrecomendacionesdevisualizacionesLyraesuneditordevisualizacionesavanzadas(intentaimitarTableauysimilares)


https://www.mediawiki.org/wiki/Extension:Graph/Demo

https://vega.github.io/voyager/

https://idl.cs.washington.edu/projects/lyra/app/#?example=napoleon





Ejemplosdeuso


Pero...

Tienesqueaprenderunnuevolenguaje/framework









Ejemplosdeuso


Pero...


Noestanpotentecomod3









Ejemplosdeuso


Pero...



Porahorasonproyectosrelativamentemarginales









Ejemplosdeuso


Pero...



Porahorasonproyectosrelativamentemarginales

Todaslasinteraccionesestándentrodelavisualización.Nohayreactividad"externa"









Combinard3conunframeworkCombinard3conunframeworkreactivoreactivo






Frameworks

ElframeworkmásconocidoesReact(https://facebook.github.io/react/)


https://facebook.github.io/react/





Frameworks

ElframeworkmásconocidoesReact(https://facebook.github.io/react/)

MantenidoporFacebookHapopularizadolaprogramacióndeclarativa/reactivaenelmundofront-end


https://facebook.github.io/react/





Frameworks

Existenotrasalternativasinteresantescomovue.js(https://vuejs.org/)


https://vuejs.org/





Frameworks

Existenotrasalternativasinteresantescomovue.js(https://vuejs.org/)

MuybuensoporteparaanimacionesNoesnecesariousarJSXCurvadeaprendizajemássuave


https://vuejs.org/





¿React¿React♥♥d3.js?d3.js?






CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM






CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM.append()






CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM.append(),.attr(),.text(),.insert(),...






CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM.append(),.attr(),.text(),.insert(),...

¡d3.jsinclusoloutilizaparaeldatajoin!






CombinandoReact.jsyd3







Tenemosun"falsoDOM"enjavascript(principalrazón:esmásrápido)







Tenemosun"falsoDOM"enjavascript(principalrazón:esmásrápido)AdemássirvedeSinglesourceofTruth.







Llamamosalasfuncionesqueseencargandegenerarelcontenidodeestoselementos(renders)







Llamamosalasfuncionesqueseencargandegenerarelcontenidodeestoselementos(renders)

Y"enviamos"alDOMelfakeDOMqueteníamosenJavascript







ReactloquehaceescogeresteárbolycalcularladiferenciaentreelDOMantiguoyelnuevo







ReactloquehaceescogeresteárbolycalcularladiferenciaentreelDOMantiguoyelnuevo

DespuésaplicaloscambiosmínimosalDOMparaactualizarlainterfaz






CreemosunminiejemplodeReactdesde0SeethePenSimpleReactbyAlejandroVidal(@double-thinker)onCodePen.


http://codepen.io/double-thinker/pen/NbwBem/

http://codepen.io/double-thinker

http://codepen.io/





CombinandoReact.jsyd3Elproblemaesquehaydosagentes(elmotordeReactyelusuarioded3)quequierenmanipularelDOM.






CombinandoReact.jsyd3Elproblemaesquehaydosagentes(elmotordeReactyelusuarioded3)quequierenmanipularelDOM.Yestonoesbuenaidea....






CombinandoReact.jsyd3:enfoques

DOMPlayground

CrearenelárbolDOMuncontenerdorqueseamanipuladoporD3Cuandod3acabedecrearelelementoleerestecontenedoreintegrarloenD3.






CombinandoReact.jsyd3:enfoques

DOMPlayground

CrearenelárbolDOMuncontenerdorqueseamanipuladoporD3Cuandod3acabedecrearelelementoleerestecontenedoreintegrarloenD3.Seutilizaenreact-d3-wrapNorecomendado


https://www.npmjs.com/package/react-d3-wrap





FakeDOMIntermedio

importd3Wrapfrom'react-d3-wrap'

constMyChart=d3Wrap({initialize(svg,data,options){},

update(svg,data,options){constchart=d3.select(svg).append('g').attr('transform',translate(${options.margin.left},${options.margin.top})`)

},

destroy(){}})






IntermediatefakeDOM

¿YsiusamosunárbolDOMficticiocomohaceReact?






IntermediatefakeDOM


functionrender(){varlist=ReactFauxDOM.createElement('ul')

d3.select(list).selectAll('li').data(this.props.data).enter().append('li').text(function(d){returnd})

returnlist.toReact()}






IntermediatefakeDOM


functionrender(){varlist=ReactFauxDOM.createElement('ul')

d3.select(list).selectAll('li').data(this.props.data).enter().append('li').text(function(d){returnd})

returnlist.toReact()}

UsasunimplementacióndelDOMficticiaparaqued3"crea"quetrabajasobreeldocumentoHTMLrealCuandoacabaslalibreríarecogetodoeseárbolyloconsolidaEslaqueseusaenreact-faux-dom


https://github.com/Olical/react-faux-dom





IntermediatefakeDOM






d3'ssubsetformaths






d3'ssubsetformaths

LagestióndelárbolDOMsedelegaenReactParacálculos(d3.path,d3.scale,d3.geo,...)seusad3Tienemuchosentidoconladivisiónded3enmódulos(v4)






d3'ssubsetformaths


Quizáeslamáselegante,peroutilizaelalgoritmodediferenciasdeReact


https://facebook.github.io/react/docs/reconciliation.html





d3'ssubsetformaths


Quizáeslamáselegante,peroutilizaelalgoritmodediferenciasdeReactYpierdes(enparteeldatajoiningded3)


https://facebook.github.io/react/docs/reconciliation.html





Islandofd3insidetheapp







CremosparalasvisualizacionessegmentosdelárbolDOMnogobernadosporReactEsunodelosacercamientosmásfrecuentesahora







vard3Chart=require('./d3Chart');varChart=React.createClass({propTypes:{data:React.PropTypes.array},

componentDidMount:function(){varel=this.getDOMNode();d3Chart.create(el,{width:'100%',height:'300px'},this.getChartState());},

componentWillUnmount:function(){varel=this.getDOMNode();d3Chart.destroy(el);},

render:function(){return(<divclassName="Chart"></div>);}});







componentDidUpdate:function(){varel=this.getDOMNode();d3Chart.update(el,this.getChartState());},

getChartState:function(){return{data:this.props.data};},









InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOM









InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOMNoestanmalaideacomoparece









InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOMNoestanmalaideacomopareceHayqueevitaratodacosalosefectossecundarios









InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOMNoestanmalaideacomopareceHayqueevitaratodacosalosefectossecundariosHacerfuncionespuras






RecapLibreríasespecializadas







Vega







VegaIntegraciónconotrosframeworks

React.jsVue.js






RecapEstrategias

DOMPlayground

MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones






RecapEstrategias

DOMPlayground


FakeDOM

Relativamentepocofluidaparaelojoexperto






RecapEstrategias

DOMPlayground


FakeDOM

RelativamentepocofluidaparaelojoexpertoPuedesusarcódigod3antiguo






RecapEstrategias

DOMPlayground


FakeDOM



Rompeelflujodereact






RecapEstrategias

DOMPlayground


FakeDOM



RompeelflujodereactRequieremodificaciones






RecapEstrategias

DOMPlayground


FakeDOM



RompeelflujodereactRequieremodificacionesPorahora,creoqueeslamáseleganteyveloz






RecapEstrategias

DOMPlayground


FakeDOM



RompeelflujodereactRequieremodificacionesPorahora,creoqueeslamáseleganteyvelozTefuerzaacrearaplicacionesconestadosbiendefinidosysinefectossecundarios(esoesbueno)






RecapEstrategias






RecapEstrategias

d3'ssubset

Pierdeseldatajoiningded3ylosustituyesporeldiffdeReactProbablementetengamenorrendimiento(reactmáslento)






RecapEstrategias

d3'ssubset


Pierdesanimation()ysusutilidades






RecapEstrategias

d3'ssubset


Pierdesanimation()ysusutilidades

Launiónesmuchamáslimpia.






MáscosasparainvestigarAnimaciones

Probarvue.js[react-motion]https://github.com/chenglou/react-motion


https://github.com/chenglou/react-motion







CanvasyWebGLreact-canvasEstrategiade"isla"



https://github.com/Flipboard/react-canvas








GráficosisométricosClient-sideyserver-sideson"idénticos"Terminalestontosyprerenderizado












MixinsenlasvisualizacionesEjemplodereac-d3:ScatterChart




https://github.com/esbullington/react-d3/blob/master/src/scatterchart/ScatterChart.jsx









MixinsenlasvisualizacionesEjemplodereac-d3:ScatterChart

MejorarelalgoritmodediffdeReact.jsparalasvisualizaciones




https://github.com/esbullington/react-d3/blob/master/src/scatterchart/ScatterChart.jsx





ReferenciasQuickstartdeReact.js

GuidedeReact-js

IntegratingD3.jsvisualizationsinaReactapp(Recomendado)

HowtocreatereusablechartswithReactandD3(MUYRecomendado)

D3withinreact:therightway.Autordereact-faux-dom

react-faux-dom

VegaEcosystem

LibreríasdecomponentesparaReact

react-d3react-d3-components


https://facebook.github.io/react/docs/hello-world.html

https://vuejs.org/v2/guide/

http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/

http://www.adeveloperdiary.com/react-js/create-reusable-charts-react-d3-part1/

http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/

https://github.com/Olical/react-faux-dom

https://vega.github.io/

https://github.com/esbullington/react-d3

https://codesuki.github.io/react-d3-components/example.html





Muchasgracias=)Muchasgracias=)GraciasaFernando,Beatrizyelrestodelaorganización.

GraciasaShuttlecloudporelespacio

@doblepensador







Muchasgracias=)Muchasgracias=)GraciasaFernando,Beatrizyelrestodelaorganización.

GraciasaShuttlecloudporelespacio

@doblepensador

¿Dudas?¿Dudas?







programacion reactiva y d3js

Software