Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Appli légère avec d3.js, sinatra, elasticsearch et capucine

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 15 Publicité

Appli légère avec d3.js, sinatra, elasticsearch et capucine

Télécharger pour lire hors ligne

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

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

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Les utilisateurs ont également aimé (20)

Publicité

Similaire à Appli légère avec d3.js, sinatra, elasticsearch et capucine (20)

Plus récents (20)

Publicité

Appli légère avec d3.js, sinatra, elasticsearch et capucine

  1. 1. Data Vizualisation hello world with: d3.js + sinatra + elasticsearch mardi 6 mars 12
  2. 2. hello world :) • know this sexy technos exist... • ... and maybe learn more after ;) mardi 6 mars 12
  3. 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. 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. 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. 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. 7. d3.js • more d3.js pres is possible: just ask for it ;) mardi 6 mars 12
  8. 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. 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. 10. elasticsearch • http://www.elasticsearch.org/ • fast • painless setup • free search schema • JSON over http • scale to hundreds mardi 6 mars 12
  11. 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. 12. elasticsearch • more elasticsearch pres is possible: just ask for it ;) mardi 6 mars 12
  13. 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. 14. video • check ! mardi 6 mars 12
  15. 15. Matt • twitter @mathieuel • http://www.mathieu-elie.net mardi 6 mars 12

×