Présentation lors de l'Apéro Ruby Bordelais du 6 Mars 2012 par Mathieu Elie. twitter: @mathieuel http://www.mathieu-elie.net Apéro Ruby Bordeaux ============== twitter: @rubybdx htp://rubybdx.org

1. Data Vizualisation
hello world with:
d3.js + sinatra +
elasticsearch
mardi 6 mars 12

2. hello world :)
• know this sexy technos exist...
• ... and maybe learn more after ;)
mardi 6 mars 12

3. d3.js
• http://mbostock.github.com/d3/
• «D3.js is a small, free JavaScript library for
manipulating documents based on data.»
mardi 6 mars 12

4. d3.js
• data([4, 8, 15, 16, 23, 42])
• array of document elements (<p>)
• data[i] <=> elements[i] -> each element of
the data array is binded to an element of
the document
mardi 6 mars 12

5. d3.js
• #repeat : each element of the data array is
binded to an element of the document
• foreach item of my data array:
• .enter().append("p").text(function(d)
{ return "I'm number " + d + "!"; });
• i build a <p> el and set a text with the data
value
mardi 6 mars 12

6. d3.js
• circle.exit().remove();
• when data element is removed, i just the
remove the same index element from the
dom
• if data data value is updated ? transition +
svg!
• rect.transition().duration(1000).attr("x",
function(d, i) { return x(i) - .5; });
mardi 6 mars 12

7. d3.js
• more d3.js pres is possible: just ask for it ;)
mardi 6 mars 12

8. sinatra
• http://www.sinatrarb.com/
• « Sinatra is a DSL for quickly creating web
applications in Ruby with minimal effort »
mardi 6 mars 12

9. sinatra
• quick web application without persistence
and so on (but you can too ;))
• data viz with static js / css / html
• proxy to api (here we have a proxy to the
elastic search api)
• make call to facebook / oauth api and get
token for debug....
• etc....
mardi 6 mars 12

10. elasticsearch
• http://www.elasticsearch.org/
• fast
• painless setup
• free search schema
• JSON over http
• scale to hundreds
mardi 6 mars 12

11. elasticsearch
• put json on the index
• search index
• response times are indcrebly fast
• super easy clustering (sharding +
replication)
• and requested by REST / json api
mardi 6 mars 12

12. elasticsearch
• more elasticsearch pres is possible: just ask
for it ;)
mardi 6 mars 12

13. the app
js
d3.js sinatra elasticsearch
ajax
javascript
sinatra really
contain main elasticsearch
handy for
part of app accessed via
proxying with
vizualiation and http
REST api
http querying
mardi 6 mars 12

14. video
• check !
mardi 6 mars 12

15. Matt
• twitter @mathieuel
• http://www.mathieu-elie.net
mardi 6 mars 12