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 dat...
d3.js• data([4, 8, 15, 16, 23, 42])• array of document elements (<p>)• data[i] <=> elements[i] -> each element of  the dat...
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    dom•...
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 effort »
sinatra• quick web application without persistence   and so on (but you can too ;))• data viz with static js / css / html•...
elasticsearch• http://www.elasticsearch.org/• fast• painless setup• free search schema• JSON over http• scale to hundreds
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 really co...
video• check !
Matt• twitter @mathieuel• http://www.mathieu-elie.net
Upcoming SlideShare
Loading in …5
×

Data vizualisation: d3.js + sinatra + elasticsearch

8,360
-1

Published on

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

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,360
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
36
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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 "Im 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 withvizualiation and http REST api http querying
  14. 14. video• check !
  15. 15. Matt• twitter @mathieuel• http://www.mathieu-elie.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×