a-b-street / docs

Technical and user documentation for A/B Street
Apache License 2.0
12 stars 7 forks source link

Further motivate the Broadmoor proposal using elevation data. #7

Closed dabreegster closed 3 years ago

dabreegster commented 3 years ago

There are 3 things we might show -- the contour map, the steep street coloring, or elevation profiles. I'm guessing we want to pick just one of them. Any opinions? And is this the place in the article where this information best fits?

@eldang, your opinion is more than welcome here of course. :)

dabreegster commented 3 years ago

I don't have an easy way to deploy the changes, so here's 3 screenshots at least. The Screenshot from 2021-07-07 14-41-26 contour map one is very vertical; if we go with it, maybe should size down. Screenshot from 2021-07-07 14-41-30 Screenshot from 2021-07-07 14-41-14

eldang commented 3 years ago

Personally I find the elevation profiles the easiest to read, but it'll be more persuasive if you lock both Y axes to the same scale. I think with that the decreased steepness and total climb will be intuitive from looking at the charts.

dabreegster commented 3 years ago

but it'll be more persuasive if you lock both Y axes to the same scale.

This makes sense! The axis labels are a little too specific right now anyway. We have some code lying around for picking better intervals for axes; I'll apply it here and report back. Thanks!

michaelkirk commented 3 years ago

Personally I find the elevation profiles the easiest to read, but it'll be more persuasive if you lock both Y axes to the same scale. I think with that the decreased steepness and total climb will be intuitive from looking at the charts.

Exactly what I was thinking!

michaelkirk commented 3 years ago

re: elevation-profiles.png

Sounds like we're going to change this to adjust the axes anyway, but one more difference that we should address is the font.

dabreegster commented 3 years ago

Should I use two separate images for the two elevation profiles? I just quickly squished them together and added the header in kolourpaint. Indeed styling with CSS might be easier.

michaelkirk commented 3 years ago

Should I use two separate images for the two elevation profiles?

Oh, I didn't realize they were one image. I haven't run it locally, but I imagine the image would be pretty small on mobile.

I'd recommend doing like with the "Time Saved / Lost" diagrams so that they are side-by-side on wides screens, but one on top of the other on mobile using the "wrap-two" class.

dabreegster commented 3 years ago

PTAL: Screenshot from 2021-07-08 14-22-02

eldang commented 3 years ago

Nice! This definitely improves the impact. Can we also lock X axes to the same scale in both? That will reinforce the distance message, and sidestep a possible grumble about steepness distortion.

michaelkirk commented 3 years ago

Getting better!

Can we also lock X axes to the same scale in both? That will reinforce the distance message, and sidestep a possible grumble about steepness distortion.

Agreed that this would be nice!

I think currently it's just two different screenshots - one taken before the proposal, and one taken after. I'm not sure how trivial it would be to plumb all that through.

Using a consistent elevation was relatively easy because we used a map-wide constant to determine the max-Y, but I think we'll have to do some per-trip comparison for trip-length, so might be a relatively larger change.

I'd love to have a proper comparative elevation chart showing before vs. after in a single chart. Even with the uniform max-Y, it's a little hard to see... but that would be creeping our scope even more.

One quick compromise could be to, just for the purposes of this screenshot, hardcode the x-axis to (e.g.) 3 miles, and deliberately work on a proper comparative elevation chart for a future proposal.

y-axis ticks

As you mentioned, having an odd number of labels for the y-axis produced awkward labels.

Personally I'd favor just two, so instead of [0, 133.3, 266.7, 400], I think it would be more useful to have [0, 200, 400]. My understanding is that we're rounding the y-max to a power of ten, so dividing by 2 should always produce a nice round value.

Is it easy to remove a bucket? WDYT?

dabreegster commented 3 years ago

Screenshot from 2021-07-08 15-36-14 I just hardcoded the X-axis for the moment, as suggested. And lowered the number of buckets. Looking better?

michaelkirk commented 3 years ago

much better!

One final note: did you intentionally change trips or reverse the trip direction somehow?

dabreegster commented 3 years ago

I picked a different trip that goes in the opposite direction; agreed it looks a little funny. Let me pick a bit more carefully..

dabreegster commented 3 years ago

Screenshot from 2021-07-08 15-44-34 One more try

eldang commented 3 years ago

Nice! This makes the strongest, easiest-to-follow case yet.

michaelkirk commented 3 years ago

I noticed the y-axis of the two charts, though they had the same units, didn't align vertically (just due to how the images were cropped)

I addressed this here if you'd like to merge them in: https://github.com/a-b-street/docs/compare/main...michaelkirk:mkirk/elevation_broadmoor?expand=1

But in the process, I had the two charts overlayed in krita anyway, and thought maybe this would be a better way to compare anyway, especially on mobile where the two charts won't be side by side:

elevation-profile

WDYT?

dabreegster commented 3 years ago

I had the two charts overlayed in krita anyway, and thought maybe this would be a better way to compare anyway, especially on mobile where the two charts won't be side by side:

Thank you for the edits! Seeing the two lines together is the most clear, honestly. I think the text caption suffices to explain blue/green (along with the picture above it), so no need to squeeze in labels.

I think this looks pretty solid: Screenshot from 2021-07-08 17-49-20

eldang commented 3 years ago

Agreed. This feels like of discussion of 2 small charts, but I think each revision has successively told the story better.