Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Make Easy & Flexible Star Ratings

nerds.airbnb.com

Post reply on HN
Print view View original

11–20 of 40 posts

Re: How to Make Easy & Flexible Star Ratings

#12

Post by jwdunne »

I would do it another way. I'd have an on state and off state graphic as a sprite. There'd be two divisions, one laid on top of each other. The bottom layer would be the off state tiled horizontally statically at the width that is the number stars your ratings setup uses by the width of you on-off state graphic. The layer on top would be the on state with a width determined by an online style - CSS accepts percentage as a unit which can be worked out trivially. I find this is far more flexible that setting static widths in the CSS. You only haVe to set one width: the number of stars. Other things can be worked out programmatically and cached if needed.

Re: How to Make Easy & Flexible Star Ratings

#14

Post by michaeldhopkins »

funkah wrote: post #10
smackfu wrote: post #9

It's interesting that the year 2000 way to do stars would be to have a full, empty, and half star GIF, and just to display however many stars you need by doing a loop. So, when this article says "The goal is to avoid having a sprite that looks like this" where the sprite has all the values of stars in a line... why did people switch to doing it that way in the first place? Like the article says, it's a pain to mainta…

Well, if you do it that way you can change the whole rating by just changing the class name, after you set up all the background-position rules for all the different rating classes. I guess that's why?

With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.)

That's way less work than all that CSS.

Re: How to Make Easy & Flexible Star Ratings

#16

Post by nkurz »

mhartl wrote: post #3

This is a great discussion of the mechanics of rendering star ratings in a browser. I'd love to see a companion theory post on how to intelligently compute and rank such ratings. The arithmetic mean is notoriously sensitive to outliers, and the consequences are sometimes severe: I know a resort in Thailand that used to be ranked #1 on TripAdvisor on its island (Koh Phangan), only to fall to #17 after a 1-star review.…

There's some good discussion of one approach here: http://news.ycombinator.com/item?id=3046785

Re: How to Make Easy & Flexible Star Ratings

#17

Post by llgrrl_ »

This is the code that should go to the server side for calculating star ratings:

Star Ratings

I’ve been awfully busy programming lately. My Django-based side project is coming along well and I hope to have it ready for use in a few weeks. Please don’t ask more about it, that’s really all I can say for now. Anyways, I came across an interesting little math problem today and was hoping some skilled programmers out there could come up with a more elegant solution than mine.

Problem: Star Ratings

People can rate cheeseburgers on my website with a star rating of 0-5 stars (whole stars only), 5 being mighty tasty and 0 being disgusting. I would like to show the average of everyone’s ratings of a particular cheeseburger to the nearest half star. I have already calculated the average rating as a float (star_sum) and the total number of people that rated the particular cheeseburger (num_raters). The result should be stored as a float in a variable named “stars.”

My Solution (in Python):

  # round to one decimal place and
  # separate into whole and fractional parts
  parts = str(round(star_sum/num_raters, 1)).split('.')
  whole = int(parts[0])
  frac = int(parts[1])

  if frac  7:
    ___frac = 0
    ___whole += 1
  else:
    ___frac = 5

  # recombine for a star rating rounded to the half
  stars = float(str(whole)+’.'+str(frac))
Mmmm… In-N-Out Burgers… Please leave a comment if you’ve got a better solution.

Re: How to Make Easy & Flexible Star Ratings

#18

Post by nazar »

mhartl wrote: post #3

This is a great discussion of the mechanics of rendering star ratings in a browser. I'd love to see a companion theory post on how to intelligently compute and rank such ratings. The arithmetic mean is notoriously sensitive to outliers, and the consequences are sometimes severe: I know a resort in Thailand that used to be ranked #1 on TripAdvisor on its island (Koh Phangan), only to fall to #17 after a 1-star review.…

I am super surprised by your comment, because thats exactly the question I asked my friend yesterday. I am trying to implement a ranking system on my website, so I asked my more experienced friend about it and he recommended me one book: Programming Collective Intelligence Building Smart Web 2.0 Applications by Toby Segaran, O'Reilly

http://shop.oreilly.com/product/9780596529321.do

Re: How to Make Easy & Flexible Star Ratings

#19

Post by kevindication »

funkah wrote: post #10
smackfu wrote: post #9

It's interesting that the year 2000 way to do stars would be to have a full, empty, and half star GIF, and just to display however many stars you need by doing a loop. So, when this article says "The goal is to avoid having a sprite that looks like this" where the sprite has all the values of stars in a line... why did people switch to doing it that way in the first place? Like the article says, it's a pain to mainta…

Well, if you do it that way you can change the whole rating by just changing the class name, after you set up all the background-position rules for all the different rating classes. I guess that's why?

It's also only one GET request for the image instead of three.

Re: How to Make Easy & Flexible Star Ratings

#20

Post by teej »

llgrrl_ wrote: post #17

This is the code that should go to the server side for calculating star ratings: Star Ratings I’ve been awfully busy programming lately. My Django-based side project is coming along well and I hope to have it ready for use in a few weeks. Please don’t ask more about it, that’s really all I can say for now. Anyways, I came across an interesting little math problem today and was hoping some skilled programmers out ther…

Please don't do that. Here's a one liner:

    round( 2.0 * star_sum / num_raters) / 2.0
Post reply on HN