search

montera34 / pageonex

PageOneX. Analyzing front pages
http://pageonex.com
GNU Affero General Public License v3.0
54 stars 13 forks source link

Wrong alignment of grid lines in the bar chart #150

Closed numeroteca closed 10 years ago

numeroteca commented 11 years ago

These lines start at the top of the graph, and do not align with the ticks of the y axis. Besides I would like them to be white lines on top of the bars.

The base line is behind the bars, it should be on top of them.

Related to 3716902.

numeroteca commented 11 years ago

I was trying to solve this, @elplatt how is this line working? https://github.com/numeroteca/pageonex/blob/master/app/assets/javascripts/dataviz.js#L101: .attr('y1', function (ty) { return Math.floor(y(ty)) + padding.top + 0.5; })

elplatt commented 11 years ago

Math.floor rounds the y value towards 0 (top of the screen) and 0.5 is added to get a crisp line. If you draw a 1px line on an integer, it get anti-aliased between two rows of pixels.

To change the stacking, you can just change the order in which things are drawn.

elplatt commented 11 years ago

I'm not sure what you mean about the lines not being aligned with the tick marks, can you explain?

Also, I can make the lines on top of the bars, but if we make them white then they will blend in with the background. Is that what you want? Or should we keep them gray?

numeroteca commented 11 years ago
  1. The vertical axis has numbers and short black lines. The chart has grey lines that are suposed to be an extension (aligned) of the short black lines from the vertical axis.

Now, grey lines and short are not aligned.

  1. Yes, the idea is to avoid as much chart junk as possible. Lines are only visible when they are over a bar (following Tufte principles). Let's see how it looks.

On Monday, July 1, 2013, Edward L Platt notifications@github.com wrote:

I'm not sure what you mean about the lines not being aligned with the tick marks, can you explain?

Also, I can make the lines on top of the bars, but if we make them white then they will blend in with the background. Is that what you want? Or should we keep them gray?

— Reply to this email directly or view it on GitHub.

numeroteca commented 11 years ago

Grid (now white) and ticks still not aligned (marked in pink) in some threads: pageonex_wrong_alignment-ticks

Ex: http://dev.pageonex.com/numeroteca/test-2-open-thread-for-media-lab-festival/

elplatt commented 10 years ago

The alignment should be fixed now. Due to weirdness with d3 one scale was starting from the top and one from the bottom.

I'm going to push back on the white lines. I see two benefits of having lines across the entire chart:

  1. You can see where a bar falls between two lines, rather than just how far it is above one.
  2. If several bars are between two lines, the lines provide a reference, otherwise visual illusions can distort how they are perceived.
numeroteca commented 10 years ago

mmm, I still see the grid not aligned, from top to bottom http://dev.pageonex.com/numeroteca/test-2-open-thread-for-media-lab-festival/

Re: white lines, ok let's push back and see how it looks. I was trying to keep it as simple as possible, while every pixel has a meaning.

elplatt commented 10 years ago

Fixed and tested on dev.