Search code examples
deck.glh3

Get resulting hex data from Hexagon layer in h3

I've been using the deck.HexagonLayer with great success. Here is a screenshot of how we display http requests on a weekly basis:

image

Currently its an array of weeks data = new Array(51).fill(randomLatitiude(), randomLongitude()) and we simply recreate the layer based on what week we want to show, like data[weekNumber]

This is great however I'd like to show change based on the total average. An example result would be something like this Google Calendar chart, but using the Hexagon layer, showing percentage difference from the average:

enter image description here

The way this is calculated is simply getting the average per day and assigning the percentage difference to the value for each day, either +% or -%.

With the hexagon layer its a bit trickier, you'll need to get an average per weekNumber however each value assinged to the hex_id should be an average value, not a count. Now I can't find a way to extract the resulting data when a layer is created new deck.HexagonLayer({ id: 'hexgaon-log-layer', data: hex_locations[week], ...}) which would allow me to do it manually.

Is my only option to recreate the data per hex_id and then create the layer? Or is there an easier to way to either extract the resulting data or set some options to do this?

Doing it manually might require to a loop with h3.geo_to_h3(latitude, longitude, level), which i'd like to avoid if possible

Solution

  • I think there may be some confusion here - HexagonLayer is a viewport-based hexbin layer, and does not use H3 - it's drawing hexagons on the map, but these hexagons are created on the fly, and don't have H3 ids. The H3HexagonLayer uses H3, and takes H3 indexes as input. I don't think Deck.gl has a layer (yet) that bins lat/lng to H3 addresses for you.

    I think you do in fact need to do what you're describing:

    • Index all rows in your data with h3.geoToH3. Even in the browser, this is generally on the order of 100s of 1000s of ops/sec, so it may be less expensive than you think.
    • Calculate the overall average of your metric column, then calculate deviation from the average to each row.
    • Pass the precalculated data to Deck.gl for rendering.