Data vizualisation: d3.js + sinatra + elasticsearch

  • 7,150 views
Uploaded on

Live screencast on my tech blog (fr speaking): …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,150
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
31
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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