Nestoria Price SlidersSavio 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 result set

● calculate the potential price range

The min. and max. price calculated on the listings as if the price filter wasn't set.

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

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

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 -> use a few pixels

Squeezing prices

● 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

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 Idea2) extract a normalized probability density function (PDF) from price histogram.

note: sums to sliderWidth

price (buckets)

count

price (buckets)

sliderWidth

0

The Idea3) transform PDF -> CDF , a cumulative density function.

note: doesn’t decrease

price (buckets)

sliderWidth

0price (buckets)

sliderWidth

0

The Idea4) use CDF to obtain the mappings

price (buckets)

sliderWidth

0

The Idea4) pixel-to-value mapping

sliderWidth

0

price

pixel

The Idea4) value-to-pixel mapping

sliderWidth

0

price

pixel

Awesome approach● flat histogram -> linear increments

● two prices -> valid histogram

● one price -> a flat histogram!

● negative prices -> histogram is an ARRAY at the end…

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

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)

b : next price (interpolate to)

n : number of intermediate pixels to “cover”

0 £(a)

270 £(b)

pixel-to-value● result of the interpolation● stored into an array for direct lookup

0 1 2 ….. sliderWidthPx

34£ 56£ 78£ 129£ … … … … … …. … …. … max£

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£

Releasing jquery.nstSlider.jsGrunt 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

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',

Releasing jquery.nstSlider.jsAdd 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/

Releasing jquery.nstSlider.jsTest 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

Releasing jquery.nstSlider.jsTesting 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!

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;

})

}

}

},

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

ConclusionsjQuery 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!

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