I know you've missed the Hello! Ranking shots, so here's one to whet your appetite. It's been a slow and steady process, but I've been having a lot of fun coding this up! (Why yes, I'm at that stage, again!)
It's not the sexiest graph in the world by today's Dribbble standards (and the styling of say, the headers isn't done yet), but I enjoyed figuring out how exactly to display the data for the ever changing leaders of Morning Musume. With the help of Django's magnificent {% widthratio %} tag, I came up with this simple visualization.
My litmus test succeeded as Jen immediately understood what was going on when she caught sight of it. Now that makes me happy. :)
My first thought is to suggest that each person go in a single row, with three columns (name, bar, number of days) so you can have the bars line up more directly. But you've really got a good use of space here, and doing what I was thinking would make it a lot wider for very little benefit.
And then you mentioned {% widthratio %} which is completely unusable for trying to make bars line up with each other with any kind of precision. Trust me, I've tried! :) It works well enough as long as they're separated, but you've have gaps and overlap if you tried to line them up too closely.
In a way, it kinda throws me that the most recent is off to the right, because I'm used to top-to-bottom, left-to-right. But you are talking time, which usually goes off to the right for recency, and this is a site for a trend in Japan, where they're used to reading right-to-left anyway. :)
2 Responses
Pro
Bryan Veloso
I know you've missed the Hello! Ranking shots, so here's one to whet your appetite. It's been a slow and steady process, but I've been having a lot of fun coding this up! (Why yes, I'm at that stage, again!)
It's not the sexiest graph in the world by today's Dribbble standards (and the styling of say, the headers isn't done yet), but I enjoyed figuring out how exactly to display the data for the ever changing leaders of Morning Musume. With the help of Django's magnificent
{% widthratio %}tag, I came up with this simple visualization.My litmus test succeeded as Jen immediately understood what was going on when she caught sight of it. Now that makes me happy. :)
over 1 year ago
My first thought is to suggest that each person go in a single row, with three columns (name, bar, number of days) so you can have the bars line up more directly. But you've really got a good use of space here, and doing what I was thinking would make it a lot wider for very little benefit.
And then you mentioned
{% widthratio %}which is completely unusable for trying to make bars line up with each other with any kind of precision. Trust me, I've tried! :) It works well enough as long as they're separated, but you've have gaps and overlap if you tried to line them up too closely.In a way, it kinda throws me that the most recent is off to the right, because I'm used to top-to-bottom, left-to-right. But you are talking time, which usually goes off to the right for recency, and this is a site for a trend in Japan, where they're used to reading right-to-left anyway. :)
Okay, enough analysis. Well done!
over 1 year ago