Closed jotasolano closed 5 years ago
If we do choose to go this way, we'll probably have to put the legend and axis in a separate div on top of the actual chart, so that the axis is always visible regardless of where you are scrolling
I think the idea of internal scroll is great.
Not sure how the best way to implement the multiple-div design, i'd definitely do it all within a single useEffect
hook as if we ever implement a horizontal scrubbing feature -- I think somewhat likely for a heatmap-style table -- then keeping all the D3 logic in a single function will make things much simpler. Not sure if it's best to pass three different (dom) refs to that function (i.e. 3 useRef
calls), or do that from d3.
Related to this is the sizing of the charts themselves. In the prototype as implemented I paid no attention to this (they're hardcoded). They should grow to fit the available space, with sensible max/mins. This doesn't alleviate the need for proper internal scroll, but perhaps using better vertical sizing with the scroll as currently implemented (i.e. legend / axis obscured) would be ok temporarily.
Is this now taken care of by the recent merge to master?
@tsibley yes! Sorry, I completely forgot to close this issue. This was merged to master in https://github.com/seattleflu/genomic-incidence-tracker/pull/11. Closing this now
@jameshadfield This is an idea I had (we don't really have to implement it), but when we have a lot of regions (e.g. CRAs, Census Tracts) then the bars and labels get very compressed and hard to read. Instead, we could implement a
d3.scaleBand()
just like in the Observable sketch and set the content of the container div to scroll vertically.If you run this branch you'll see the idea https://github.com/seattleflu/genomic-incidence-tracker/tree/expandable-container (I created this a couple of days ago so it's already behind the master branch)