airbnb / visx

🐯 visx | visualization components
https://airbnb.io/visx
MIT License
19.34k stars 709 forks source link

Adding hooks to @visx/geo #921

Open nschnierer opened 3 years ago

nschnierer commented 3 years ago

Hey folks,

long time no see (added the geo package long time ago). Nice to see the progress of this project 💯

Regarding to #880 it's very complicated to get access to the GeoProjection interface of d3-geo. Maybe this could be solved with a hook even better, like the following idea:

  const { features, projection } = useProjection({
    projection: geoMercator,
    data: usa.features,
    scale: 1.0 // defaultScale
  });

Right now, I'm not sure how to handle projection updates (changing scale etc.). So any thoughts? Are there already similar approaches in other packages?

BTW: This hook could used therefore by <Mercator /> etc., I think these components will be there for easier usage.

Inspiration: https://github.com/downshift-js/downshift/tree/master/src/hooks/useSelect

williaster commented 3 years ago

Hey @nschnierer 👋 sorry this slipped through without a quick reply.

Adding a useProjection hook sounds like a great addition, as hooks have become more popular we've been adding them as needed, often refactoring the component implementation to use the hook as you mentioned. Definitely happy to review a PR for this if you (or someone else) is interested in the addition!

Regrading projection updates, if you're thinking about animation, @techniq implemented an animated scale in his repo here (demo here), a similar approach might work for updating a projection. We've mostly still tried to stay un-opinionated on animations so app consumers can use what they like, but added a @visx/react-spring package with a few things in it because the animated primitives aren't always straight forward to implement / there's utility in abstracting them (and react-spring is as good as it gets perf-wise).

Curious to hear your thoughts.

danielimmke commented 3 years ago

Wanted to +1 this. You need this ability to do anything like placing custom markers or labels etc... Maybe it could even be exposed to the children of the <Projection /> HOC, where it imports and passes the appropriate function based on the projection being used instead of having to redeclare a hook and pass the projection name in again.

williaster commented 3 years ago

I don't have the bandwidth to add this at the moment but think it's a great request and would happily review a PR if someone wants to take a shot!

danielimmke commented 3 years ago

I can take it. I will add it to my TODO list.