Data vizualisation: d3.js + sinatra + elasticsearch
Download as PPT, PDF9 likes6,517 views
The document discusses the integration of d3.js, Sinatra, and Elasticsearch for data visualization. It highlights the features and functionalities of each technology, including dynamic data binding with d3.js, quick web application creation with Sinatra, and fast search capabilities with Elasticsearch. It also mentions the potential for further presentations on these tools and provides links for more information.
![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](https://image.slidesharecdn.com/dataviz-hello-world-120307134621-phpapp01/85/Data-vizualisation-d3-js-sinatra-elasticsearch-4-320.jpg)
Data vizualisation: d3.js + sinatra + elasticsearch
- 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 "I'm 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 with vizualiation and http REST api http querying
- 14. video • check !
- 15. Matt • twitter @mathieuel • http://www.mathieu-elie.net