Improve trend charts

[mmontesanonyc]

Hey folks, I've been mulling over the trend charts for a while and want to brainstorm ways to improve them. There are a few challenges:

Legends/labelling. We chose to go for legends instead of the usually-preferred labels (or label-final) because we have a lot of closely-clustered data that results in overlapping labels at the final value. Legends have their own challenges, especially on mobile display, so we wind up calculating a number of columns for the legend, based on screen width, and passing that into the spec.

Tooltip. I liked the approach we chose at the time, but now I think it's overwrought and doesn't adequately identify one series. If we had highlight-one-line-on-hover, then we might not need the legend - or could greatly de-emphasize it.

A few standard approaches:

• label temporal values, which we could modify to have the series name in the tooltip, too (though this approach is good for hovering but maybe not great on mobile?)
• hover-highlight;

I think my ideal approach would be something that:

• Doesn't require a legend
• Works well on mobile (eg tap instead of hover)
• Aids individual series identification

@cgettings, @etorem what do you think?

[mmontesanonyc]

I have a spec here that is pretty different from the existing spec:

• Simplified
• Uses single-series tooltips at point
• Includes a line hover feature
• Also uses the viridis-esque colors we've been talking about

A few things I'd like to add to this:

A strokeWidth or opacity conditional that gives more weight to New York City. But every time I add a strokeWidth condition test, it doesn't work as expected. @cgettings I know your time is precious this month, but if you have a few minutes I'd love to see what you make of it. i would expect the below to work in a number of places but it does not.

    "strokeWidth": {
      "condition": {"test": "datum.properties.Geography === 'New York City'", "value": 5}, 
      "value": 3
    },

Label final value on hover. Adding the below gets us part of the way there, but not quite. (Shelving this until we figure out the x-axis thing, and picking up from there, might let us use end_period which can probably aggregate in a way that TimePeriod can't.)

    {
      "encoding": {
        "x": {"aggregate": "max", "field": "TimePeriod"},
        "y": {"aggregate": {"argmax": "TimePeriod"}, "field": "Value"}
      },
      "layer": [
        {
          "mark": {"type": "text", "align": "left", "dx": 4},
          "encoding": {
            "text": {
              "condition": {"param": "hover", "field": "Geography"},
              "value": ""
            }
          }
        }
      ]
    }

[mmontesanonyc]

In this I've incorporated our new approaches for x-axis labelling and scaling. I also got a start on label-final-value, but despite what the code is telling me, it's labelling every value and not triggering on hover.

[mmontesanonyc]

Updated spec with the hover working as intended. Thoughts on this as a replacement? I might need to back this in to comparisons.js to test it out with a variety of datasets for us to properly evaluate. @cgettings @etorem

May be easier to do left-side labels without overlap or padding issues. One issue re: using this approach is the lack of legend for screenshot/re-use purposes.

[etorem]

I think I like it with a slightly thinner line, like this (line 664, strokeWidth: 3). Or 3.5. What do you think? @mmontesanonyc

I think it looks great, I'm glad we can display single borough values now and the palette is really nice.

[mmontesanonyc]

@etorem agreed! thinned. I also revised dimensions, changed "For" to "Group" and did a little management of the x-axis labels as they respond to width. A bit of "manual responsiveness" built in.

I'm going to let this marinate for a bit.

Semi-related - since this work is taking place on a branch initially about reviewing colors - @cgettings and I talked about using viridis for the maps. I speculate that the colors don't have built-in judgement and we may not need to have the red and blue alternates. Will make for an interesting conversation.

[mmontesanonyc]

A few issues:

• [ ] AQ action days and ozone actions days don't have the right info in their tooltip prompt, which may be a metadata-grammer issue
• [x] Difficulty selecting on mobile - add legend on mobile?
• [x] Hover is sometimes causing the title and subtitle to move to the left (!)
• [ ] Possible layered labels.

Add to color, on mobile:

        "legend": {
          "orient": "bottom",
          "columns": 3
        }

[mmontesanonyc]

@cgettings this is exposing a metadata-grammar problem that we have on AQ Action Days (3 indicators: 92, 57, 55). I feel like how measure name, measurement type, and display type are handled on these are out of sync with the rest of our indicators and are leading to this issue.