Una breve introducción a la Una breve introducción a la programación reactiva y d3.js programación reactiva y d3.js By Alejandro Vidal @doblepensador
UnabreveintroducciónalaUnabreveintroducciónalaprogramaciónreactivayd3.jsprogramaciónreactivayd3.js
ByAlejandroVidal@doblepensador
¿Quéeslaprogramación¿Quéeslaprogramaciónreactiva?reactiva?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
¿Quéeslaprogramación¿Quéeslaprogramaciónreactiva?reactiva?
Mejordicho:Quéesversusalaprogramaciónimperativa
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Laformatradicionaldehacerloesconprogramaciónimperativa.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Laformatradicionaldehacerloesconprogramaciónimperativa.
varcircles=g.selectAll("circle").data(data);
//Entertext.enter().append("circle").attr("x",function(d){returnd.something;});
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Laformatradicionaldehacerloesconprogramaciónimperativa.
varcircles=g.selectAll("circle").data(data);
//Entertext.enter().append("circle").attr("x",function(d){returnd.something;});
Esdecir,programasiterativamenteelprocesoquerealizaelordenador:
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Laformatradicionaldehacerloesconprogramaciónimperativa.
varcircles=g.selectAll("circle").data(data);
//Entertext.enter().append("circle").attr("x",function(d){returnd.something;});
Esdecir,programasiterativamenteelprocesoquerealizaelordenador:
1. "Hey!Ordenador,seleccionaloscírculosexistentes"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Laformatradicionaldehacerloesconprogramaciónimperativa.
varcircles=g.selectAll("circle").data(data);
//Entertext.enter().append("circle").attr("x",function(d){returnd.something;});
Esdecir,programasiterativamenteelprocesoquerealizaelordenador:
1. "Hey!Ordenador,seleccionaloscírculosexistentes"2. "Añadelosnuevoselementosqueexistanenlosdatos"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Laformatradicionaldehacerloesconprogramaciónimperativa.
varcircles=g.selectAll("circle").data(data);
//Entertext.enter().append("circle").attr("x",function(d){returnd.something;});
Esdecir,programasiterativamenteelprocesoquerealizaelordenador:
1. "Hey!Ordenador,seleccionaloscírculosexistentes"2. "Añadelosnuevoselementosqueexistanenlosdatos"3. "Ponsuxsegúnelvalordesomething"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Ysiqueremosquelosdatosseandinámicostenemosqueimplementarunalógicaparaelflujodeinformación.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Ysiqueremosquelosdatosseandinámicostenemosqueimplementarunalógicaparaelflujodeinformación.
Enelcasoded3.jsestalógicasesueleimplementarconelcicloupdate,enteryexit.Esdecir,utilizarenter(),exit().
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
Ysiqueremosquelosdatosseandinámicostenemosqueimplementarunalógicaparaelflujodeinformación.
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();
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?¿streaming?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?¿streaming?¿widgets?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?¿streaming?¿widgets?
-"Hey!Ordenador,cuandopongaelratónencima¿podríashacerloscírculosmásgrandes?"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?¿streaming?¿widgets?
-"Hey!Ordenador,cuandopongaelratónencima¿podríashacerloscírculosmásgrandes?"
circles.on('mouseover',function(d){d3.select(this).transition().attr("r",15)})
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?¿streaming?¿widgets?
-"Hey!Ordenador,cuandopongaelratónencima¿podríashacerloscírculosmásgrandes?"
circles.on('mouseover',function(d){d3.select(this).transition().attr("r",15)})
-Ya...bien,pero...siquitoelratón¿Podríashacerlodenuevopequeño?
circles.on('mouseout',function(d){d3.select(this).transition().attr("r",3)})
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:d3
ytodavíapuedecomplicarsemás...¿interacción?¿streaming?¿widgets?
-"Hey!Ordenador,cuandopongaelratónencima¿podríashacerloscírculosmásgrandes?"
circles.on('mouseover',function(d){d3.select(this).transition().attr("r",15)})
-Ya...bien,pero...siquitoelratón¿Podríashacerlodenuevopequeño?
circles.on('mouseout',function(d){d3.select(this).transition().attr("r",3)})
¡Exactamenteelmismocódigo!
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:problemas
RepitescódigoPuedesequivocarte
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:problemas
RepitescódigoPuedesequivocarte;-)
//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();
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Formaimperativa:problemas
RepitescódigoPuedesequivocarte;-)
//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();
Cuandolosflujosdeinformaciónaumentanelcódigoempiezaacomplicarse
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotieneunflujodegestión,sólodeclarasloquenecesitas
//Joinvarcircles=g.selectAll("circle").data(data);
//Updatecircles.attr("x",function(d){returnd.something;});
//Entertext.enter().append("circle").attr("x",function(d){returnd.someting;});
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotieneunflujodegestión,sólodeclarasloquenecesitas
//Nonecesitamosjoinniupdatenienterniexitcircles.attr("x",function(d){returnd.something;});
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotieneunflujodegestión,sólodeclarasloquenecesitas
//Nonecesitamosjoinniupdatenienterniexitcircles.attr("x",function(d){returnd.something;});
-"Ordenador,dibujaunoscírculosconlascoordenadasxsegúnsomething"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotieneunflujodegestión,sólodeclarasloquenecesitas
//Nonecesitamosjoinniupdatenienterniexitcircles.attr("x",function(d){returnd.something;});
-"Ordenador,dibujaunoscírculosconlascoordenadasxsegúnsomething"(Implicitamente:ycuandohayadatosnuevos,añadelos;cuandodesaparezcan,eliminalos)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotieneunflujodegestión,sólodeclarasloquenecesitas
//Nonecesitamosjoinniupdatenienterniexitcircles.attr("x",function(d){returnd.something;});
-"Ordenador,dibujaunoscírculosconlascoordenadasxsegúnsomething"(Implicitamente:ycuandohayadatosnuevos,añadelos;cuandodesaparezcan,eliminalos)
Conquedeclaresunavezelmapeadosomething->xseríasuficiente,¿no?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quemepermitahacerinteraccionessintenerquemetermeenlagráficadelvecino
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quemepermitahacerinteraccionessintenerquemetermeenlagráficadelvecino
circles.on("mouseclick",function(d){//filtrolosdatosdeotragráficamyNewFilteredData=amazingFilter(oldData);otherGraphic.selectAll("bars").data(myNewFilteredData);
otherGraphic.attr("y",function(...))//etc,etc,etc....
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
circles.attr("x",function(d){returnd.something;});
circles.on('mouseover',function(d){d3.select(this).transition().attr("r",15)})
circles.on('mouseout',function(d){d3.select(this).transition().attr("r",3)})
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
circles.attr("x",function(d){returnd.something;});.attr("r",if(this.ishovered){return15}else{return3})
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
circles.attr("x",function(d){returnd.something;});.attr("r",if(this.ishovered){return15}else{return3})
Noestamosimperandolasoperacionesquehayquehacerenelcasodecadaevento.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
circles.attr("x",function(d){returnd.something;});.attr("r",if(this.ishovered){return15}else{return3})
Noestamosimperandolasoperacionesquehayquehacerenelcasodecadaevento.
=programaciónimperativa
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
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)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Imaginemosunalibrería...
quenotengaquehacerdoscallbacksparahacereventossimples(MUYsimples)
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)
=programacióndeclarativa≃reactiva
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Disclaimerheexageradounpocolasproblemáticas.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
La"otraforma":Programaciónreactiva
Disclaimerheexageradounpocolasproblemáticas.
-Perdone,ud¡Yoprogramobien!-Micódigoespoesía-Miscallbackssonpreciosos
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
https://youtu.be/uK9GGFkxXHs?t=49s
Playbackisn'tsupportedonthisdevice.
Top5-Funnygameglitches
0:49/3:24
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Googleglitches;-)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CómohacerunavisualizaciónCómohacerunavisualizaciónreactivareactiva
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Visualizacionesreactivas:
Opción1:utilizarlibreríasdiseñadasparacrearvisualizacionesdeformadeclarativa/reactiva.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Visualizacionesreactivas:
Opción1:utilizarlibreríasdiseñadasparacrearvisualizacionesdeformadeclarativa/reactiva.
ggplot2esunbuenejemplo(implementaGrammarofGraphics)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Visualizacionesreactivas:
Opción1:utilizarlibreríasdiseñadasparacrearvisualizacionesdeformadeclarativa/reactiva.
ggplot2esunbuenejemplo(implementaGrammarofGraphics)ggvisesunintentodeimplementarunagramáticasimilarperoreaccionesbásicasanteinteracciones.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Visualizacionesreactivas:
Opción1:utilizarlibreríasdiseñadasparacrearvisualizacionesdeformadeclarativa/reactiva.
ggplot2esunbuenejemplo(implementaGrammarofGraphics)ggvisesunintentodeimplementarunagramáticasimilarperoreaccionesbásicasanteinteracciones.Muypocodesarrollada
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Visualizacionesreactivas:
Opción1:utilizarlibreríasdiseñadasparacrearvisualizacionesdeformadeclarativa/reactiva.
ggplot2esunbuenejemplo(implementaGrammarofGraphics)ggvisesunintentodeimplementarunagramáticasimilarperoreaccionesbásicasanteinteracciones.MuypocodesarrolladaVegaesunlenguajedeclarativo(enJSON)yunconjuntodeherramientas.DesarrolladoporInteractiveDataLabdelaUniversidaddeWashington
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Vega-lite
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
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
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
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)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Ejemplosdeuso
WikipediahaincluídográficasinteractivashecahsconVega(ej)VoyageresunsistemadeexploracióninteractivaconrecomendacionesdevisualizacionesLyraesuneditordevisualizacionesavanzadas(intentaimitarTableauysimilares)
Pero...
Tienesqueaprenderunnuevolenguaje/framework
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Ejemplosdeuso
WikipediahaincluídográficasinteractivashecahsconVega(ej)VoyageresunsistemadeexploracióninteractivaconrecomendacionesdevisualizacionesLyraesuneditordevisualizacionesavanzadas(intentaimitarTableauysimilares)
Pero...
Tienesqueaprenderunnuevolenguaje/framework
Noestanpotentecomod3
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Ejemplosdeuso
WikipediahaincluídográficasinteractivashecahsconVega(ej)VoyageresunsistemadeexploracióninteractivaconrecomendacionesdevisualizacionesLyraesuneditordevisualizacionesavanzadas(intentaimitarTableauysimilares)
Pero...
Tienesqueaprenderunnuevolenguaje/framework
Noestanpotentecomod3
Porahorasonproyectosrelativamentemarginales
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Ejemplosdeuso
WikipediahaincluídográficasinteractivashecahsconVega(ej)VoyageresunsistemadeexploracióninteractivaconrecomendacionesdevisualizacionesLyraesuneditordevisualizacionesavanzadas(intentaimitarTableauysimilares)
Pero...
Tienesqueaprenderunnuevolenguaje/framework
Noestanpotentecomod3
Porahorasonproyectosrelativamentemarginales
Todaslasinteraccionesestándentrodelavisualización.Nohayreactividad"externa"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Combinard3conunframeworkCombinard3conunframeworkreactivoreactivo
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Frameworks
ElframeworkmásconocidoesReact(https://facebook.github.io/react/)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Frameworks
ElframeworkmásconocidoesReact(https://facebook.github.io/react/)
MantenidoporFacebookHapopularizadolaprogramacióndeclarativa/reactivaenelmundofront-end
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Frameworks
Existenotrasalternativasinteresantescomovue.js(https://vuejs.org/)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Frameworks
Existenotrasalternativasinteresantescomovue.js(https://vuejs.org/)
MuybuensoporteparaanimacionesNoesnecesariousarJSXCurvadeaprendizajemássuave
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
¿React¿React♥♥d3.js?d3.js?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM.append()
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM.append(),.attr(),.text(),.insert(),...
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3d3utilizaintensivamenteelárbolDOM.append(),.attr(),.text(),.insert(),...
¡d3.jsinclusoloutilizaparaeldatajoin!
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Tenemosun"falsoDOM"enjavascript(principalrazón:esmásrápido)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Tenemosun"falsoDOM"enjavascript(principalrazón:esmásrápido)AdemássirvedeSinglesourceofTruth.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Llamamosalasfuncionesqueseencargandegenerarelcontenidodeestoselementos(renders)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
Llamamosalasfuncionesqueseencargandegenerarelcontenidodeestoselementos(renders)
Y"enviamos"alDOMelfakeDOMqueteníamosenJavascript
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
ReactloquehaceescogeresteárbolycalcularladiferenciaentreelDOMantiguoyelnuevo
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3
ReactloquehaceescogeresteárbolycalcularladiferenciaentreelDOMantiguoyelnuevo
DespuésaplicaloscambiosmínimosalDOMparaactualizarlainterfaz
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CreemosunminiejemplodeReactdesde0SeethePenSimpleReactbyAlejandroVidal(@double-thinker)onCodePen.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3Elproblemaesquehaydosagentes(elmotordeReactyelusuarioded3)quequierenmanipularelDOM.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3Elproblemaesquehaydosagentes(elmotordeReactyelusuarioded3)quequierenmanipularelDOM.Yestonoesbuenaidea....
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3:enfoques
DOMPlayground
CrearenelárbolDOMuncontenerdorqueseamanipuladoporD3Cuandod3acabedecrearelelementoleerestecontenedoreintegrarloenD3.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
CombinandoReact.jsyd3:enfoques
DOMPlayground
CrearenelárbolDOMuncontenerdorqueseamanipuladoporD3Cuandod3acabedecrearelelementoleerestecontenedoreintegrarloenD3.Seutilizaenreact-d3-wrapNorecomendado
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
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(){}})
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
IntermediatefakeDOM
¿YsiusamosunárbolDOMficticiocomohaceReact?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
IntermediatefakeDOM
¿YsiusamosunárbolDOMficticiocomohaceReact?
functionrender(){varlist=ReactFauxDOM.createElement('ul')
d3.select(list).selectAll('li').data(this.props.data).enter().append('li').text(function(d){returnd})
returnlist.toReact()}
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
IntermediatefakeDOM
¿YsiusamosunárbolDOMficticiocomohaceReact?
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
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
IntermediatefakeDOM
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
d3'ssubsetformaths
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
d3'ssubsetformaths
LagestióndelárbolDOMsedelegaenReactParacálculos(d3.path,d3.scale,d3.geo,...)seusad3Tienemuchosentidoconladivisiónded3enmódulos(v4)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
d3'ssubsetformaths
LagestióndelárbolDOMsedelegaenReactParacálculos(d3.path,d3.scale,d3.geo,...)seusad3Tienemuchosentidoconladivisiónded3enmódulos(v4)
Quizáeslamáselegante,peroutilizaelalgoritmodediferenciasdeReact
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
d3'ssubsetformaths
LagestióndelárbolDOMsedelegaenReactParacálculos(d3.path,d3.scale,d3.geo,...)seusad3Tienemuchosentidoconladivisiónded3enmódulos(v4)
Quizáeslamáselegante,peroutilizaelalgoritmodediferenciasdeReactYpierdes(enparteeldatajoiningded3)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
CremosparalasvisualizacionessegmentosdelárbolDOMnogobernadosporReactEsunodelosacercamientosmásfrecuentesahora
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
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>);}});
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
componentDidUpdate:function(){varel=this.getDOMNode();d3Chart.update(el,this.getChartState());},
getChartState:function(){return{data:this.props.data};},
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
componentDidUpdate:function(){varel=this.getDOMNode();d3Chart.update(el,this.getChartState());},
getChartState:function(){return{data:this.props.data};},
InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOM
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
componentDidUpdate:function(){varel=this.getDOMNode();d3Chart.update(el,this.getChartState());},
getChartState:function(){return{data:this.props.data};},
InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOMNoestanmalaideacomoparece
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
componentDidUpdate:function(){varel=this.getDOMNode();d3Chart.update(el,this.getChartState());},
getChartState:function(){return{data:this.props.data};},
InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOMNoestanmalaideacomopareceHayqueevitaratodacosalosefectossecundarios
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Islandofd3insidetheapp
componentDidUpdate:function(){varel=this.getDOMNode();d3Chart.update(el,this.getChartState());},
getChartState:function(){return{data:this.props.data};},
InterceptasellifecycledeReactyenloselementosquetúquieresdejasqued3manipuleelDOMNoestanmalaideacomopareceHayqueevitaratodacosalosefectossecundariosHacerfuncionespuras
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapLibreríasespecializadas
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapLibreríasespecializadas
Vega
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapLibreríasespecializadas
VegaIntegraciónconotrosframeworks
React.jsVue.js
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
FakeDOM
Relativamentepocofluidaparaelojoexperto
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
FakeDOM
RelativamentepocofluidaparaelojoexpertoPuedesusarcódigod3antiguo
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
FakeDOM
RelativamentepocofluidaparaelojoexpertoPuedesusarcódigod3antiguo
Islandofd3insidetheapp
Rompeelflujodereact
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
FakeDOM
RelativamentepocofluidaparaelojoexpertoPuedesusarcódigod3antiguo
Islandofd3insidetheapp
RompeelflujodereactRequieremodificaciones
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
FakeDOM
RelativamentepocofluidaparaelojoexpertoPuedesusarcódigod3antiguo
Islandofd3insidetheapp
RompeelflujodereactRequieremodificacionesPorahora,creoqueeslamáseleganteyveloz
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
DOMPlayground
MUYLentaPuedestomarantiguasvisualizacionesconapenasmodificaciones
FakeDOM
RelativamentepocofluidaparaelojoexpertoPuedesusarcódigod3antiguo
Islandofd3insidetheapp
RompeelflujodereactRequieremodificacionesPorahora,creoqueeslamáseleganteyvelozTefuerzaacrearaplicacionesconestadosbiendefinidosysinefectossecundarios(esoesbueno)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
d3'ssubset
Pierdeseldatajoiningded3ylosustituyesporeldiffdeReactProbablementetengamenorrendimiento(reactmáslento)
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
d3'ssubset
Pierdeseldatajoiningded3ylosustituyesporeldiffdeReactProbablementetengamenorrendimiento(reactmáslento)
Pierdesanimation()ysusutilidades
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
RecapEstrategias
d3'ssubset
Pierdeseldatajoiningded3ylosustituyesporeldiffdeReactProbablementetengamenorrendimiento(reactmáslento)
Pierdesanimation()ysusutilidades
Launiónesmuchamáslimpia.
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
MáscosasparainvestigarAnimaciones
Probarvue.js[react-motion]https://github.com/chenglou/react-motion
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
MáscosasparainvestigarAnimaciones
Probarvue.js[react-motion]https://github.com/chenglou/react-motion
CanvasyWebGLreact-canvasEstrategiade"isla"
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
MáscosasparainvestigarAnimaciones
Probarvue.js[react-motion]https://github.com/chenglou/react-motion
CanvasyWebGLreact-canvasEstrategiade"isla"
GráficosisométricosClient-sideyserver-sideson"idénticos"Terminalestontosyprerenderizado
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
MáscosasparainvestigarAnimaciones
Probarvue.js[react-motion]https://github.com/chenglou/react-motion
CanvasyWebGLreact-canvasEstrategiade"isla"
GráficosisométricosClient-sideyserver-sideson"idénticos"Terminalestontosyprerenderizado
MixinsenlasvisualizacionesEjemplodereac-d3:ScatterChart
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
MáscosasparainvestigarAnimaciones
Probarvue.js[react-motion]https://github.com/chenglou/react-motion
CanvasyWebGLreact-canvasEstrategiade"isla"
GráficosisométricosClient-sideyserver-sideson"idénticos"Terminalestontosyprerenderizado
MixinsenlasvisualizacionesEjemplodereac-d3:ScatterChart
MejorarelalgoritmodediffdeReact.jsparalasvisualizaciones
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
ReferenciasQuickstartdeReact.js
GuidedeReact-js
IntegratingD3.jsvisualizationsinaReactapp(Recomendado)
HowtocreatereusablechartswithReactandD3(MUYRecomendado)
D3withinreact:therightway.Autordereact-faux-dom
react-faux-dom
VegaEcosystem
LibreríasdecomponentesparaReact
react-d3react-d3-components
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Muchasgracias=)Muchasgracias=)GraciasaFernando,Beatrizyelrestodelaorganización.
GraciasaShuttlecloudporelespacio
@doblepensador
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare
Muchasgracias=)Muchasgracias=)GraciasaFernando,Beatrizyelrestodelaorganización.
GraciasaShuttlecloudporelespacio
@doblepensador
¿Dudas?¿Dudas?
Programaciónreactivayd3.js (Madridd3meetup,30Nov2016) @doblepensador Web PDF Slideshare