jdhenke / celestrium

A javascript library to visualize graphs.
MIT License
2 stars 1 forks source link

link strength pdf styling #75

Closed jdhenke closed 10 years ago

jdhenke commented 11 years ago

@haosharon @jhelbert

how do you guys feel about this look and feel for the link strength pdf helper?

image

not sure if the link threshold color should be different or not... make it gray?

haosharon commented 11 years ago

I think it looks great - I agree, the threshold should be a different color. gray or black? (probs gray)

jdhenke commented 11 years ago

Here's gray and black.

image

image

IMO, black has better contrast - the gray seems to blend in with the faded blue to the left.

haosharon commented 11 years ago

Yea, I like black as well - how would it look if it were thinner? Since it's a threshold, it is more of a label vs actual data value, so maybe should be more along the lines of the axis labels width. (I don't have a strong opinion on this, just a thought)

jdhenke commented 11 years ago

Good thought. Two issues come to mind:

1px.

image

Subject to both points above.

2px.

image

Easier to click and drag, but still subject to granularity problems.

3px. (current)

image

Very easy to click and drag, but still granularity problems.

Bottom Line

I like the 2px the best, granularity aside, so I'll look into fixing this in the algorithm that renders the cdf calculates the cdf and renders the pdf and post back here with results.

jdhenke commented 11 years ago

Alright, I think I fixed it!

First try was to add a point at the threshold. So the x value was easy to determine, but the y value proved problematic, and here's why. d3's svg.area.interpolate smooths things out between points, so when I just used the same y value as this right neighbor of this prepended point, filtering on a slope looks pretty poor.

image

Second try was then to average the y values of the points to the left and right of this new point. Note that the point to the left is not part of the visible pdf, but the point to the right is since the new point is at the threshold.

While this isn't exactly the same as the interpolated value, it looks better.

image

I couldn't figure out how to use the area object to get the interpolated y value based on an x value, but that would be ideal. In the meantime, I don't think anyone else cares about this as much as I do, I'm just proud I got this far :smile:

@haosharon: anything else i should try out?