Add timeseries to region detail #9
Conversation
…ail-timeseries
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
So cool to see this wired up, the tool already feels so much richer!
On your questions:
-
I'm coloring the lines based on the selected portion's average value... Would be cooler to implement a gradient sort of effect, but seems much more complex. Is the color worthwhile as is?
- I like the color as-is! But the gradient idea is a cool one -- maybe something to explore as a follow-up?
-
I threaded through the time horizon clipping, but we don't necessarily need to do that here and is maybe a bit odd since that filter is not accessible here currently. I'm also clipped the available years in the slider for consistency.
- I don't feel very strongly either way on this one, but I did notice a couple of small bugs with the current clipping behavior:
- open region details => set
elapsedTime=15 years=> close region details => settimeHorizon=10 years=> open region details (current:elapsedTime=15 years, expected:elapsedTime=0 OR elaspedTime=10 years - because we're rendering the time series with two different
Lines, there's a gap around thetimeHorizon. This is especially noticeable in the regional time series, but also present in the overview time series. -
- open region details => set
- I don't feel very strongly either way on this one, but I did notice a couple of small bugs with the current clipping behavior:
-
maybe we should get some react-spring magic going here for the axis changes/point locations?
- Yeah I think that'd be great for the axis changes! For the point locations, the lines, and the
Rects, we could consider just using a basic CSS transition. I think that got us pretty far in animating the year-to-year changes in the CMIP6 time series for monthly data.
- Yeah I think that'd be great for the axis changes! For the point locations, the lines, and the
-
should we add an interaction where you can click the line and that would set the elapsedTime?
- Addressed inline in my comment about
regionOptions
- Addressed inline in my comment about
-
loading state definitely needed but maybe that's a different pr?
- 👍 different PR sounds good to me
-
seeing some footer jank (so far just in Arc on the vercel preview) when opening the timeseries for the first time - are you also noticing that?
- Hmm I haven't yet noticed that, but I can try testing some more.
|
|
||
| const handleMonthChange = useCallback( | ||
| (month) => { | ||
| const years = Math.floor(elapsedTime / 12) | ||
| setElapsedTime(years + month) | ||
| setElapsedTime(years * 12 + month) |
| selector: { | ||
| polygon_id: selectedRegion, | ||
| injection_date: injectionDate, | ||
| }, |
There was a problem hiding this comment.
Curious if you thought about the tradeoffs of showing the entire time series through the end of the timeHorizon vs. showing seasonal trends one year at a time (i.e. one chunk at a time).
I like that you can quickly glimpse the behavior over all time with the current behavior, and this seems especially useful in the context of a Download CSV button!
But in the context of this potential interaction:
should we add an interaction where you can click the line and that would set the elapsedTime?
which I think feels like a pretty natural one, the yearly data might work better (at least with the current set of time sliders). In that world, the month slider would just change the where the Circle is rendered in the time series and the year slider would allow you to view changes in seasonal trends over time.
What do you think?
There was a problem hiding this comment.
My sense is that the most interesting overall trends will be over the years, with the seasonal variability being a less significant aspect (could certainly be wrong here), so showing the full run through the years seems most insightful to me. I think not having the the full data visible all at once would make finding those longer scale trends much harder (they seem pretty subtle from what I've been able to see exploring around so far).
I just pushed a version where clicking on the line sets the elapsed time to that point (or at least the closest datapoint to the click). I think adding a vertical line that follows the mouse and letting people click anywhere on the graph might be a better solution but wanted to test this first!
There was a problem hiding this comment.
On the time series extent: this version feels like the most clear "overview," so happy with what we have for now! As the store2 array grows in size, we should just keep an eye on how much data we're fetching to render this whole thing at once. Also, might be good to check in on this question when we share the prototype out.
On the the elapsed_time selection: I like the line treatment a lot! Could be nice to add a little label at the top that reads OCT YEAR 1 or similar? The delta between the click point at the closest datapoint can feel a little jumpy in some cases (see below). Does it feel choppy to just render the line over the elapsed_time step nearest to the mouse?
components/timeseries.js
Outdated
| const [mousePosition, setMousePosition] = useState(null) | ||
| const [isHovering, setIsHovering] = useState(false) | ||
|
|
||
| const animatedYLimits = useSpring({ |
There was a problem hiding this comment.
Okay on viewing it, I actually find this animation rather disorienting haha. What do you think about dropping the animation on the Chart and just using CSS transitions for the Plot elements (as mentioned in this comment)
For the point locations, the lines, and the Rects, we could consider just using a basic CSS transition. I think that got us pretty far in animating the year-to-year changes in the CMIP6 time series for monthly data.
Main things here are making the timeseries graph into a reusable component and implementing the regionpicker/graphing the data!
Paired with carbonplan/maps#105
Some questions:
elapsedTime?