Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Data Vizualisationhello
     world with:

   d3.js + sinatra +
    elasticsearch
hello world :)


• know this sexy technos exist...
• ... and maybe learn more after ;)
d3.js
• http://mbostock.github.com/d3/
• «D3.js is a small, free JavaScript library for
  manipulating documents based on ...
d3.js
• data([4, 8, 15, 16, 23, 42])
• array of document elements (<p>)
• data[i] <=> elements[i] -> each element of
  the...
d3.js
• #repeat : each element of the data array is
  binded to an element of the document
• foreach item of my data array...
d3.js
• circle.exit().remove();
• when data element is removed, i just the
    remove the same index element from the
    ...
d3.js


• more d3.js pres is possible: just ask for it ;)
sinatra


• http://www.sinatrarb.com/
• « Sinatra is a DSL for quickly creating web
  applications in Ruby with minimal ef...
sinatra
• quick web application without persistence
   and so on (but you can too ;))
• data viz with static js / css / ht...
elasticsearch
• http://www.elasticsearch.org/
• fast
• painless setup
• free search schema
• JSON over http
• scale to hun...
elasticsearch
• put json on the index
• search index
• response times are indcrebly fast
• super easy clustering (sharding...
elasticsearch


• more elasticsearch pres is possible: just ask
  for it ;)
the app
    js
   d3.js              sinatra           elasticsearch

   ajax

   javascript
                   sinatra re...
video


• check !
Matt


• twitter @mathieuel
• http://www.mathieu-elie.net
Próximo SlideShare
Cargando en…5
×

de

Data vizualisation: d3.js + sinatra + elasticsearch Slide 1 Data vizualisation: d3.js + sinatra + elasticsearch Slide 2 Data vizualisation: d3.js + sinatra + elasticsearch Slide 3 Data vizualisation: d3.js + sinatra + elasticsearch Slide 4 Data vizualisation: d3.js + sinatra + elasticsearch Slide 5 Data vizualisation: d3.js + sinatra + elasticsearch Slide 6 Data vizualisation: d3.js + sinatra + elasticsearch Slide 7 Data vizualisation: d3.js + sinatra + elasticsearch Slide 8 Data vizualisation: d3.js + sinatra + elasticsearch Slide 9 Data vizualisation: d3.js + sinatra + elasticsearch Slide 10 Data vizualisation: d3.js + sinatra + elasticsearch Slide 11 Data vizualisation: d3.js + sinatra + elasticsearch Slide 12 Data vizualisation: d3.js + sinatra + elasticsearch Slide 13 Data vizualisation: d3.js + sinatra + elasticsearch Slide 14 Data vizualisation: d3.js + sinatra + elasticsearch Slide 15
Próximo SlideShare
dataviz on d3.js + elasticsearch
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

9 recomendaciones

Compartir

Descargar para leer sin conexión

Data vizualisation: d3.js + sinatra + elasticsearch

Descargar para leer sin conexión

Live screencast on my tech blog (fr speaking):
http://www.mathieu-elie.net/screencast-video-d3-js-sinatra-elasticsearch-capucine/

other tech slides at my blog: http://www.mathieu-elie.net

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Data vizualisation: d3.js + sinatra + elasticsearch

  1. 1. Data Vizualisationhello world with: d3.js + sinatra + elasticsearch
  2. 2. hello world :) • know this sexy technos exist... • ... and maybe learn more after ;)
  3. 3. d3.js • http://mbostock.github.com/d3/ • «D3.js is a small, free JavaScript library for manipulating documents based on data.»
  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
  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
  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; });
  7. 7. d3.js • more d3.js pres is possible: just ask for it ;)
  8. 8. sinatra • http://www.sinatrarb.com/ • « Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort »
  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....
  10. 10. elasticsearch • http://www.elasticsearch.org/ • fast • painless setup • free search schema • JSON over http • scale to hundreds
  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
  12. 12. elasticsearch • more elasticsearch pres is possible: just ask for it ;)
  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
  14. 14. video • check !
  15. 15. Matt • twitter @mathieuel • http://www.mathieu-elie.net
  • ext

    Mar. 27, 2015
  • chikayukihayashi

    Feb. 19, 2015
  • thomasparry75

    Nov. 4, 2014
  • ksampatk

    Sep. 20, 2014
  • kawasakikohei

    Aug. 5, 2014
  • sbaetov

    Feb. 26, 2013
  • duydo

    Jan. 17, 2013
  • mebeta

    Nov. 14, 2012
  • suzukimilanpaak

    Sep. 30, 2012

Live screencast on my tech blog (fr speaking): http://www.mathieu-elie.net/screencast-video-d3-js-sinatra-elasticsearch-capucine/ other tech slides at my blog: http://www.mathieu-elie.net

Vistas

Total de vistas

10.192

En Slideshare

0

De embebidos

0

Número de embebidos

1.584

Acciones

Descargas

39

Compartidos

0

Comentarios

0

Me gusta

9

×