Data vizualisation: d3.js + sinatra + elasticsearch
Upcoming SlideShare
Loading in...5
×
 

Data vizualisation: d3.js + sinatra + elasticsearch

on

  • 7,688 views

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

Statistics

Views

Total Views
7,688
Views on SlideShare
6,860
Embed Views
828

Actions

Likes
8
Downloads
30
Comments
0

5 Embeds 828

http://www.mathieu-elie.net 804
http://www.linkedin.com 15
http://s.medcl.net 6
http://feeds.feedburner.com 2
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Data vizualisation: d3.js + sinatra + elasticsearch Data vizualisation: d3.js + sinatra + elasticsearch Presentation Transcript

  • 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 data.»
  • 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
  • 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
  • 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; });
  • 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• 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....
  • 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 + replication)• and requested by REST / json api
  • elasticsearch• more elasticsearch pres is possible: just ask for it ;)
  • 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
  • video• check !
  • Matt• twitter @mathieuel• http://www.mathieu-elie.net