Appli légère avec d3.js, sinatra, elasticsearch et capucine
0 likes980 views
The document introduces the combination of d3.js, Sinatra, and Elasticsearch for data visualization and web application development. D3.js is highlighted as a JavaScript library for manipulating documents based on data, while Sinatra is described as a DSL for creating web applications in Ruby. Elasticsearch is presented as a fast, easily scalable search engine that supports JSON over HTTP for data indexing and retrieval.
![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
mardi 6 mars 12](https://image.slidesharecdn.com/dataviz-hello-world-120307152533-phpapp02/85/Appli-legere-avec-d3-js-sinatra-elasticsearch-et-capucine-4-320.jpg)
Appli légère avec d3.js, sinatra, elasticsearch et capucine
- 1. Data Vizualisation hello world with: d3.js + sinatra + elasticsearch mardi 6 mars 12
- 2. hello world :) • know this sexy technos exist... • ... and maybe learn more after ;) mardi 6 mars 12
- 3. d3.js • http://mbostock.github.com/d3/ • «D3.js is a small, free JavaScript library for manipulating documents based on data.» mardi 6 mars 12
- 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 mardi 6 mars 12
- 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 mardi 6 mars 12
- 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; }); mardi 6 mars 12
- 7. d3.js • more d3.js pres is possible: just ask for it ;) mardi 6 mars 12
- 8. sinatra • http://www.sinatrarb.com/ • « Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort » mardi 6 mars 12
- 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.... mardi 6 mars 12
- 10. elasticsearch • http://www.elasticsearch.org/ • fast • painless setup • free search schema • JSON over http • scale to hundreds mardi 6 mars 12
- 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 mardi 6 mars 12
- 12. elasticsearch • more elasticsearch pres is possible: just ask for it ;) mardi 6 mars 12
- 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 mardi 6 mars 12
- 14. video • check ! mardi 6 mars 12
- 15. Matt • twitter @mathieuel • http://www.mathieu-elie.net mardi 6 mars 12