Nestoria Price Sliders
Savio Dimatteo, Lokku HQ, London, 1 May 2014.
Dynamic Price Sliders
● users filter by price through a range slider
● dynamic price sliders: range changes based on resul...
Why “Potential”
● users specifies the price multiple times
○ e.g., first handle, second handle, first handle again
● the o...
The Problem
● a lot of listings falls within a certain price range
● a few listings have prices outside that range
● wide ...
Why The Problem
crazy cheap ultra expensive
300px wide !
● we would need more pixels...
Use a non linear scale.
● many listings in price sub-range -> use many pixels
● a few listings that distort the range -> u...
● are most of the listings grouped towards the beginning of the
price range?
● are they grouped around few multiple ranges...
it doesn’t matter
One answer
Solution
any distribution of listing prices pixel to value mapping
value to pixel mapping
400£ 31px
31px 400£
1) compute the price histogram
● Any number of buckets is fine, we use 128.
The Idea
price (buckets)
count
The Idea
2) extract a normalized probability density function (PDF)
from price histogram.
note: sums to sliderWidth
price ...
The Idea
3) transform PDF -> CDF , a cumulative density function.
note: doesn’t decrease
price (buckets)
sliderWidth
0
pri...
The Idea
4) use CDF to obtain the mappings
price (buckets)
sliderWidth
0
The Idea
4) pixel-to-value mapping
sliderWidth
0
price
pixel
The Idea
4) value-to-pixel mapping
sliderWidth
0
price
pixel
Awesome approach
● flat histogram -> linear increments
● two prices -> valid histogram
● one price -> a flat histogram!
● ...
Implementation is funny
● what you think you would have
● what do you actually have
price (buckets)
sliderWidth
0
36 37
34...
Sharp price distributions
0px
270px
Bucket 0 Bucket 1
Sharp price distributions
PriceBucket
Sharp price distributions
0px
270px
0 £ 2000 £
Sharp price distributions
0px
270px
0 £ 2000 £
# of pixels to cover
Solution: Interpolation
● apply a series of (linear) interpolation steps
● one step:
a : previous price (interpolate from)...
pixel-to-value
● result of the interpolation
● stored into an array for direct lookup
0 1 2 ….. sliderWidthPx
34£ 56£ 78£ ...
value-to-pixel…
1. binary search in the array of values
○ find closest known prices P1, P2 s.t. P1 <= price <= P2
2. find ...
Releasing jquery.nstSlider.js
Grunt is truly a blessing: grunt-init jquery
● Gruntfile.js with uglify, concat, clean, jshi...
Releasing jquery.nstSlider.js
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.to...
Releasing jquery.nstSlider.js
Add an addictive demo page (important!)
● commit index.html and assets in gh-pages branch of...
Releasing jquery.nstSlider.js
Test test test!
● I converted all jasmine tests into qUnit tests (crazy)
○ jQuery UI uses qU...
Releasing jquery.nstSlider.js
Testing across jQuery versions!
● Grunt is truly a blessing
● grunt-connect
○ allows to run ...
Releasing jquery.nstSlider.js
grunt.registerTask(‘test’, [‘connect’, ‘jshint’, ‘qunit’]);
qunit: {
files: ['test/**/*.html...
Conclusions
● typical example in which simple reasoning ends up in more
complex and detailed implementation
● a really exc...
Conclusions
jQuery plugin project:
● releasing the plugin was fast after all! (just one night!)
● visual projects trigger ...
the end
Thanks
github: https://github.com/lokku/jquery-nstslider/
reddit: http://www.reddit.com/r/hackernews/duplicates/24...
Upcoming SlideShare
Loading in …5
×

jquery.nstSliders.js - Nestoria range slider jQuery plugin

1,705 views

Published on

Nestoria range sliders have been reimplemented as a jQuery plugin. This is mainly because existing range sliders cannot be used comfortably when it comes to handle dynamic price ranges. At Nestoria we display properties with dynamic, wide price ranges, and our design allows to dedicate only a few pixels for the price range slider.

We needed a range slider control that could make the best out of these few available pixels.

In this talk the author explains details of the implementation of the part of jQuery.nstSlider.js that solves this porblem, and provides a more general introduction about open sourcing jQuery plugins.

Published in: Internet, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,705
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jquery.nstSliders.js - Nestoria range slider jQuery plugin

  1. 1. Nestoria Price Sliders Savio Dimatteo, Lokku HQ, London, 1 May 2014.
  2. 2. Dynamic Price Sliders ● users filter by price through a range slider ● dynamic price sliders: range changes based on result set ● calculate the potential price range The min. and max. price calculated on the listings as if the price filter wasn't set.
  3. 3. Why “Potential” ● users specifies the price multiple times ○ e.g., first handle, second handle, first handle again ● the other handle should stay fixed ● ok to move handles when other elements are used
  4. 4. The Problem ● a lot of listings falls within a certain price range ● a few listings have prices outside that range ● wide wide range! crazy cheap ultra expensive
  5. 5. Why The Problem crazy cheap ultra expensive 300px wide ! ● we would need more pixels...
  6. 6. Use a non linear scale. ● many listings in price sub-range -> use many pixels ● a few listings that distort the range -> use a few pixels Squeezing prices
  7. 7. ● are most of the listings grouped towards the beginning of the price range? ● are they grouped around few multiple ranges? ● are they evenly distributed over a certain price range in certain locations? Questions
  8. 8. it doesn’t matter One answer
  9. 9. Solution any distribution of listing prices pixel to value mapping value to pixel mapping 400£ 31px 31px 400£
  10. 10. 1) compute the price histogram ● Any number of buckets is fine, we use 128. The Idea price (buckets) count
  11. 11. The Idea 2) extract a normalized probability density function (PDF) from price histogram. note: sums to sliderWidth price (buckets) count price (buckets) sliderWidth 0
  12. 12. The Idea 3) transform PDF -> CDF , a cumulative density function. note: doesn’t decrease price (buckets) sliderWidth 0 price (buckets) sliderWidth 0
  13. 13. The Idea 4) use CDF to obtain the mappings price (buckets) sliderWidth 0
  14. 14. The Idea 4) pixel-to-value mapping sliderWidth 0 price pixel
  15. 15. The Idea 4) value-to-pixel mapping sliderWidth 0 price pixel
  16. 16. Awesome approach ● flat histogram -> linear increments ● two prices -> valid histogram ● one price -> a flat histogram! ● negative prices -> histogram is an ARRAY at the end…
  17. 17. Implementation is funny ● what you think you would have ● what do you actually have price (buckets) sliderWidth 0 36 37 340 £ 350 £ 56px 76px 56px 76px
  18. 18. Sharp price distributions 0px 270px Bucket 0 Bucket 1
  19. 19. Sharp price distributions PriceBucket
  20. 20. Sharp price distributions 0px 270px 0 £ 2000 £
  21. 21. Sharp price distributions 0px 270px 0 £ 2000 £ # of pixels to cover
  22. 22. Solution: Interpolation ● apply a series of (linear) interpolation steps ● one step: a : previous price (interpolate from) b : next price (interpolate to) n : number of intermediate pixels to “cover” 0 £ (a) 270 £ (b)
  23. 23. pixel-to-value ● result of the interpolation ● stored into an array for direct lookup 0 1 2 ….. sliderWidthPx 34£ 56£ 78£ 129£ … … … … … …. … …. … max£
  24. 24. value-to-pixel… 1. binary search in the array of values ○ find closest known prices P1, P2 s.t. P1 <= price <= P2 2. find the index of the closest known price -> place the handle at that pixel. 0 1 2 ….. sliderWidthPx 34£ 56£ 78£ 129£ … … … … … …. … …. … max£
  25. 25. Releasing jquery.nstSlider.js Grunt is truly a blessing: grunt-init jquery ● Gruntfile.js with uglify, concat, clean, jshint, watch, qunit ● manifest for jquery plugin registry ● manifest for npm package ● README/LICENCE/CONTRIBUTING.md ● provides a banner task to actually write an header in your minified javascript
  26. 26. Releasing jquery.nstSlider.js banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '<%= pkg.homepage ? "* " + pkg.homepage + "n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.company %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */n',
  27. 27. Releasing jquery.nstSlider.js Add an addictive demo page (important!) ● commit index.html and assets in gh-pages branch of your github repository ● make something that works and looks nice ● be inspired: http://kenwheeler.github.io/slick/
  28. 28. Releasing jquery.nstSlider.js Test test test! ● I converted all jasmine tests into qUnit tests (crazy) ○ jQuery UI uses qUnit ○ jQuery community traditionally uses qUnit ● qunit felt more mature and simpler than jasmine ○ less behaviour oriented
  29. 29. Releasing jquery.nstSlider.js Testing across jQuery versions! ● Grunt is truly a blessing ● grunt-connect ○ allows to run a web server that hosts the tests ○ test specific versions of jQuery in one go!
  30. 30. Releasing jquery.nstSlider.js grunt.registerTask(‘test’, [‘connect’, ‘jshint’, ‘qunit’]); qunit: { files: ['test/**/*.html'], all: { options: { urls: ['1.6.4', … , '2.0.0b1', '2.1.1-rc2'].map(function(version) { return 'http://localhost:<%= connect.server.options.port %>/test/nstSlider.html? jquery=' + version; }) } } },
  31. 31. Conclusions ● typical example in which simple reasoning ends up in more complex and detailed implementation ● a really exciting experience with open sourcing the sliders! ● 80% of people like it according to Reddit upvotes
  32. 32. Conclusions jQuery plugin project: ● releasing the plugin was fast after all! (just one night!) ● visual projects trigger peoples’ imagination when requesting new features... ● people care about accessibility ● hard to test :-) ● Grunt is truly a blessing! ○ Use Grunt for your JS projects!
  33. 33. the end Thanks github: https://github.com/lokku/jquery-nstslider/ reddit: http://www.reddit.com/r/hackernews/duplicates/249rw3/fully_customizable_jquery_sliders_singledouble/ hackernews: https://news.ycombinator.com/item?id=7665894 youtube: https://www.youtube.com/watch?v=xN5AfudLHws bower registry: jquery-nstSlider

×