how to make a bar rating system using logarithm

Question

I want to make a bar rating system for my website and this is what i have actually:

Which doesn't look nice at all :p. I want the height to increase like a Exponential curve gradually. Not too steep at the beginning, which gradually increase afterward.

Using:

height = (Math.ceil( Math.log(i) * 10) / 10 ) + settings.height

where i is the for loop variable from 0 -> 19(number of bars) and settings.height being the base height which is 15. What should i do to correct it?

edit: Like this but upside down

Answer 1

The following is based on David Fregoli's initial comment which I expanded to get the wanted shape and correct orientation. See this fiddle (Not intended to steal his answer, so feel free to accept his)

CSS

#container {
    position: relative;
    height: 150px;
}

bar {
    position: relative;
    width: 20px;
    border: 1px solid #aaf;
    background-color: #ddf;
    margin-right: 1px;
    float: left;
    cursor: pointer;
}

JS

var baseheight = 5;
for ( var i = 0; i < 10; i++ ) {
    var h = 5*Math.pow(2,i/2) + baseheight;
    var offset = Math.ceil(150-h);
    $('#container').append($('<bar>').css('height', h).css('top', offset));
}