Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Admin Choropleth Completion Map #622

Closed
jonfroehlich opened this issue May 30, 2017 · 40 comments
Closed

Admin Choropleth Completion Map #622

jonfroehlich opened this issue May 30, 2017 · 40 comments
Assignees
@misaugstad
Labels
Admin Interface UI Design UI Update

Comments

@jonfroehlich
Copy link
Member

For the admin page (and possibly for public facing part of webpage too), I'd like a choropleth map that is colored by % of neighborhood complete. Kind of like this:

image
@manaswisaha
Copy link
Member

Good idea!

@manaswisaha
Copy link
Member

Could be a potential intern task for the admin page? Maybe for Steven?

@misaugstad misaugstad mentioned this issue Jun 6, 2017
Closed
@misaugstad misaugstad self-assigned this Jun 17, 2017
@misaugstad
Copy link
Member

misaugstad commented Jun 17, 2017 •
edited
Loading

So we have a choropleth! Picture below. The legend needs to be fixed, and I want to add some information on mouse hover, but I want to get some feedback on what's there now.

choropleth

  1. How do we like this grayscale background?
  2. How do we like the current color scheme? I was using Color Brewer to get what I have now.
  3. How do we feel about the discrete set of colors? There are currently 5 levels; do we like 5 or would 4 or 10 be better? Or would we want to get it on a continuous scale?
  4. How do we like the outlining of a neighborhood that is being hovered over? (you can't see my cursor but there is one neighborhood that is clearly outlined in the image.
  5. All the other comments you have :)

@misaugstad
Copy link
Member

And instead of having different colors for different levels, do we want to just pick one color and just modify its transparency to indicate coverage?

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 17, 2017 via email

@maddalihanumateja
Copy link
Contributor

maddalihanumateja commented Jun 17, 2017 via email

@manaswisaha
Copy link
Member

Amazing @misaugstad! :)

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 17, 2017 via email

@maddalihanumateja
Copy link
Contributor

maddalihanumateja commented Jun 17, 2017 via email

@misaugstad
Copy link
Member

10 discrete levels (color varies, not transparency):
choropleth-10lvls-clr

10 discrete levels (transparency varies, not color):
choroplet-10lvls-op

continous scale (transparency varies):
choropleth-cts

@jonfroehlich
Copy link
Member Author

Thanks @misaugstad. I think I like 1 and 3 the best (with a slight preference towards 1 though the mapping between colors and values isn't as clear--e.g., is the dark gray blue the highest completion rate?). What do others think? As an aside, the legend in bottom-left on 3 is wrong, right? We will have to generate a nice looking legend for whatever option we choose.

How much more effort would it require to:

  1. Add in neighborhood names (I'd like to see what this looks like)
  2. Add in hover interactivity with a pop-up or something that shows neighborhood name and completion rate and asks whether the user wants to "audit" (or "explore" or whatever term we think is fun and exciting) this neighborhood.

For 1, you can see that the AccessScore prototype shows some neighborhood names (though it's unclear how leaflet/mapbox determines what neighborhood names to show).

image

Once we do 2., then we can add this visualization to the landing page and allow people to more easily select their audit neighborhoods. We've talked about this before and I think everyone thought it was a good idea.

@misaugstad
Copy link
Member

w.r.t. legend, yeah the legend is incorrect and I forgot to crop it out for that image. I am holding off on legend until we pick a design for it to go with.

  1. adding in neighborhood names: not sure, will look into that. I am guessing that the neighborhood names are a result of the underlying map tile, which I replaced with the more grayscale one. The one used on the demo page is something of Kotaro's design possibly? So maybe if I just modified that design to be grayscale then we would have neighborhood names.

  2. Hover and click interactivity should be super easy.

So there are two ways that the user can interact...

  • hovering over the neighborhood
  • clicking on the neighborhood

And there are a few pieces of information that we may want to add...

  • neighborhood name
  • completion percentage
  • distance remaining
  • invite to audit that neighborhood

My question is: which of these pieces of information do we want to show, and which pieces should show up as a result of which interaction? I would want to show neighborhood name and completion percentage on mouse hover. The issue is that having something pop up on the hover might make one think that there is no reason to click on the neighborhood, while outlining it with no pop up seems to invite the user to click.

@maddalihanumateja
Copy link
Contributor

I think option 1 (10 discrete color levels and constant transparency) looks good. I cant really make out any visible difference between options 2 and 3 other than the sizes being different.

For neighborhood names you should probably disable any mapbox labels that you think would interfere first.

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 17, 2017 via email

@misaugstad
Copy link
Member

I am having a hard time finding a color scheme with 10 levels where the color->value mapping is actually clear, though the color variation looks slightly cooler than the transparency variation IMO. I am leaning towards the transparency since it is more clear, but if we think that graph 1 (in the comment w/ 3 graphs) looks cooler we can use that in the mailchimp headers?

@misaugstad
Copy link
Member

And here is a combination... modifying color and transparency:

choropleth-10lvls-clr-op

@misaugstad
Copy link
Member

Suggestions for improving the popup?

choropleth-popup-1

@misaugstad
Copy link
Member

Added these other situations in appropriately as well:

less-than-mile
100-complete

@manaswisaha manaswisaha mentioned this issue Jun 17, 2017
Closed
@misaugstad
Copy link
Member

And what do we want to do about multiple "regions" or "neighborhoods" that have the same name? There are at least 3 regions right next to each other that all have the name Bellevue, which really confused me for a minute!

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 17, 2017 via email

@misaugstad
Copy link
Member

Here are a few:

  1. "Do you want to help us finish this neighborhood?"
  2. "Do you want to help us finish auditing this neighborhood?"
  3. "Do you want to help in auditing this neighborhood?"
  4. "Click here to help finish this neighborhood!"
  5. "Click here to help audit this neighborhood!""
  6. "Click here to help find accessibility issues in this neighborhood!"

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 18, 2017 via email

@misaugstad
Copy link
Member

I am not totally against letting them do that.

I like number 4 as well.

The database updates mentioned in #691 are done! Choropleth now loads in less than a second instead of in 10-15 seconds :) Will work on the legend now.

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 19, 2017 via email

@misaugstad
Copy link
Member

Here is the full look right now! I'll draw up a version with 10 discrete colours on the legend too, but I don't think it will be necessary.

full-choropleth

@misaugstad
Copy link
Member

And here it is with 10 levels in the legend:

full-choropleth-10lvls

@misaugstad misaugstad mentioned this issue Jun 19, 2017
Merged
@ghost ghost assigned manaswisaha Jun 19, 2017
@jonfroehlich
Copy link
Member Author

I think if we use 10-levels for discretization, then the legend should accurately portray that. However, to reduce visual clutter. Perhaps you only label 10% 50% and 100%?

And 0% is not on the legend because it's an implicit range, [0-10%) ... (90 - 100%] or something?

@misaugstad
Copy link
Member

@jonfroehlich

And 0% is not on the legend because it's an implicit range, [0-10%) ... (90 - 100%] or something?

That is correct. So here is a new legend that isn't... it isn't exactly accurate, but it gets across what we want to get across. I just don't know how to freely move around the exact placement of the text.

new-legend

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 19, 2017 via email

@misaugstad
Copy link
Member

Brilliant idea! They know that 50 is between 0 and 100. Looks good without the 50.
legend-no-50

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 19, 2017 via email

@manaswisaha manaswisaha removed their assignment Jun 21, 2017
@misaugstad
Copy link
Member

@jonfroehlich

Are we sure we don't want to allow people to audit neighborhoods that are 100% complete? Yes, this is redundant (and inefficient) but perhaps local DC folks want to audit their own neighborhoods or at least look at them via our interface... We could also track how often this happens.

Have you come to a conclusion on this? I don't really feel strongly in either direction.
Pros to letting them re-audit:

  • letting people audit their own neighbourhoods
  • the tool is capable of re-auditing so why not let it happen?
  • it isn't unlikely that we are going to want things audited multiple times in the future

Cons:

  • we would need to test the behaviour of the system under this condition (e.g., what does the interface look like when the complete a mission, does it say "yay you finished this neighborhood" and then to do another mission in that neighorhood, they have to go through the choropleth again..?)
  • we may have users redoing streets that have already been audited when we haven't even audited all of DC yet, and maybe we should make sure we are on track to actually get 100% by the end of the summer.

@jonfroehlich
Copy link
Member Author

jonfroehlich commented Jun 22, 2017 •
edited
Loading

I'm leaning towards allowing them to do it. We already allow it, actually, in the user dashboard because they can select previously audited neighborhoods. I have tested this behavior too, although not comprehensively.

Oh, and thanks for the pro/con list. I love this kind of analytical thinking. Keep it up!

@misaugstad
Copy link
Member

misaugstad commented Jun 22, 2017 •
edited by manaswisaha
Loading

Does it change your mind at all, since in this issue we were thinking that the user dashboard should have the same text as on the admin page's choropleth? So this decision applies to both situations.

If we want to allow them to re-audit a neighbourhood, I'm having trouble thinking of nice wording to use. Right now the first line of text is:
"Neighbourhood Name: 100% complete!"

For the 2nd line, here are some thoughts:

  1. "Click here to add even more labels to this neighborhood!"
  2. "Click here to audit this neighborhood anyway!"
  3. "Click here to audit this neighborhood yourself!"
  4. "Click here to add some labels to this neighborhood yourself!"

@manaswisaha
Copy link
Member

I vote for 3 and change the word "audit"

@manaswisaha
Copy link
Member

manaswisaha commented Jun 22, 2017 •
edited
Loading

Maybe replace "audit" with "find issues"

@misaugstad
Copy link
Member

Thanks! I think this looks pretty good:

100-text-change

It was already going to spread to a 2nd line anyway, so I added the word 'accessibility'

@manaswisaha
Copy link
Member

I like it.

@misaugstad misaugstad mentioned this issue Jun 22, 2017
Merged
@jonfroehlich
Copy link
Member Author

For the 100% complete case, may I suggest:

neighborhood: 100% Complete!
This neighborhood complete (woohoo!). If you still want to explore this neighborhood for accessibility problems, click here.

Or something...

@manaswisaha
Copy link
Member

Closed via #742

@ghost ghost removed the pull-request-submitted label Jun 29, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@misaugstad misaugstad

Labels
Admin Interface UI Design UI Update
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jonfroehlich @manaswisaha @maddalihanumateja @misaugstad