Redesign time series layout

[jacuerp]

Bring browser version out of the mobile demo phase and use all the white space!

1. Stretch out the display
2. Include Honduran average and EPA standard lines
3. Redo organization of current user interaction

[eak24]

@jacuerp Can you include a wireframe of this proposal? Just a sketch would help me know what you have in mind!

[jacuerp]

Parts 1 and 2 are up on production, part 3 to follow. @ethan92429 It will look something like this:

• clicking on either side of the 'vs.' will show a dropdown of the available parameters for comparing.
  pros: Parameter selection will be less confusing. Our graph can only compare two parameters at a time, and now that's salient. Users won't select a 3rd parameter and become confused and afraid when we automatically deselect the least-recent selection.
  cons: takes more clicks before stuff shows up on the plot
• directly underneath will be a legend with short colored lines indicating which line corresponds to which parameter
• off to the right will be a few buttons that let the user ask for different time intervals to be displayed. On the backend, this will run a new query that grabs the appropriate amount of data points and stores them locally. We should try to make this as un-clunky as possible i.e. reloading the plot without reloading the page. Not sure if this is possible.
• Monroe asked for this feature: Plot should be scrollable/zoomable. So scrolling up with the mouse over the plot will zoom in on a data point, scrolling down will zoom out. Maximum distance can be bounded by the current time-scale selection. So if the current selection is Months which on the backend we choose to mean "all data from the past two months", the furthest zoom will be all two months of data, and the closest zoom will be.... an appropriate number of data points... 20? 50? 5? I could use some suggestions on how to make the closest zoom boundary less arbitrary.