Circle Layer Population Visualization

[tgilcrest]

We want to make layers available that visualize the demographic variables as choropleth maps of the geounits.

[tgilcrest]

@jfrankl: I got a couple of pieces of feedback on the demographic choropleth layers:

1. When you're drawing on the map with the demographic choropleth on, the gray selection on gray choropleth can make it kind of hard to distinguish between what is selected and what is just higher population. Any ideas that might make them more distinguishable?

e.g.
Selection with choropleth on:

Same selection with choropleth off:

2. The scale for the every demographic seems to be the same so in parts where there are a lot of one demographic or not a lot of a demographic, you get something either all dark gray or all white. Do you think it would improve if we used color gradients that are relative to the demographic's scale? Not sure if that would help or if it would just introduce it's own problems.

e.g.

or

[jfrankl]

Good question. I'll explore during this sprint.

[jfrankl]

I think our best option for showing demographic data on the map would be using proportional circles. Circles allow us to distinguish from the fill color we use on the map to represent highlighted geounits.

To create these circles, we could use the same features that we currently use for population labels. Our vector tiles contain populations in string format (e.g. 245.6K), but we will need a different format for this sizing. One option would be to include the exact population (hispanic: 42112). An alternative is to preprocess the sizes; for example, we could give each feature a value from 0–9 (hispanic: 2 would be a smaller circle, hispanic: 9 would be the largest possible circle). The former would show more variation between sizes. The latter might the vector tiles smaller, but I'm not sure by how much. I suspect either would be fine, but we want might to test them.

We would also need a UI for toggling this layer, which is being designed by #477.

Mockups

[jfrankl]

Why use circles instead of choropleth:

Remove visual conflict with selection

A choropleth layer conflicts with selecting geounits on the map. Both the selection and choropleth are indicated by shades of gray fill in the geounits. When both are present on the map, it's unclear which is selected and which is. See the screenshot below for an example of the confusion—it's unclear which geounits are selected and which are shaded by the choropleth.

Proportional circles get around this issue. The circles are visually distinct from the selected geounits, making it possible to read both on the same map.

Better representation across geographic sizes

A downside to a choropleth visualization is that it can be difficult to read smaller geographic areas, and it can misrepresent larger geographic areas as having larger populations. In Pennsylvania, for example, the rural blockgroups of the state have larger area, and the urban blockgroups are smaller. When zoomed out, it can be difficult to see the smaller blockgroups, and any shading in that area can be difficult to read. On the other hand, circles are not constrained by geounits, allowing them to be visualized consistently across the state.

In the screenshot below, compare these representations of Black population as a choropleth and as circles. With the choropleth, it is difficult to see the areas with higher concentration, because they are geographically smaller geounits. The circles, on the other hand, stand out on the map.

[tgilcrest]

Designs can be found here: https://app.abstract.com/share/09034d14-15e5-4ccb-8dbd-8d246f4a079c