Data vizualisation: d3.js + sinatra + elasticsearch

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

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

Data vizualisation: d3.js + sinatra + elasticsearch

by Mathieu Elie

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 407

Statistics

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