search

Kitware / covid-19-vis

A visualization of some COVID-19 data
https://kitware.github.io/covid-19-vis/
Other
9 stars 1 forks source link

Update html structure and add styles #10

Closed jtomeck closed 4 years ago

jtomeck commented 4 years ago

This PR updates the UI of the visualizer. This is just a WIP for now.

Reasons for WIP:

  1. I want to see about changing the visualization colors to look less Halloween-y
  2. I can't see the graph when I edit locally (CORs error), so I can't tell if the changes I made are actually looking nice or if it breaks things completely. @manthey With what I want to do, I think I will need to get nginx installed so I can see the graph properly.
  3. I need to plan for mobile. This relates to number 2 because I'm a bit blocked by not seeing everything in the UI.
waxlamp commented 4 years ago

If you need a web server, you can use the one that Python has built-in.

In the directory where the code is, run python -m http.server. That will serve on port 8000 by default, but you can supply a different port number directly after the command as well (i.e., python -m http.server 8001). If that doesn't work, you may have to use python3 instead of python.

manthey commented 4 years ago

@jtomeck I pushed a small change to fix some issues with this as checked in. @waxlamp's suggestion of a quick way to stand up a web server is a good, simple solution.

My color logic was black = death, orange = scary. The colors are set in a few places in main.js. On the graph they are in the loadChart function a css colors. On the choropleth views, they are set when countyLayer.createFeature('polygon') is called as an object with r, g, b on a scale of 0 to 1. For the markers they are set in updateMarkerStyle also as an object.

manthey commented 4 years ago

I know it is a stylistic choice, but I'd rather see the floating tools closer to the edges; they interrupt the map view less in my opinion.

Also, since you can click on the graph to select a date, we don't need the time slider (but not having it could be confusing).

manthey commented 4 years ago

Out of curiosity, what color names would you give to the new colors you selected for the data?

manthey commented 4 years ago

I'm somewhat torn about the opacity of the controls and graph. I had a lower opacity (0.75) so you could see the map better, but it makes it harder to see the controls. Since the visible area of the map drives the data in the graph, I liked seeing the map better. For a desktop system, either way seems okay. When I look at this on my phone in vertical mode, the graph fills the width of the display, and it is less obvious what part of the map is beneath it.

manthey commented 4 years ago

Overall, this looks much better than before.

jtomeck commented 4 years ago

@manthey I think I'm fine going back to .75, I just thought it made it a little less busy this way. I've got my preference, but I'm not married to it either way.

jtomeck commented 4 years ago

Oh and color names. For confirmed, "Golden Sand" and for deaths, "Eggplant."

I used https://www.color-blindness.com/color-name-hue/ for this.

manthey commented 4 years ago

@jtomeck I switched background opacity and will merge this branch.