larsvers / d3-hexgrid Goto Github PK

An unrounded width value over here as in:

image[Math.floor(center[0]) + Math.floor(center[1]) * w]

can lead to non-detected indeces. Replace with:

image[Math.floor(center[0]) + Math.floor(center[1]) * Math.floor(w)]

• Update rollup and babel
• Run, fix and update required packages post npm audit
• Update linting rules and attend to lint warnings and errors

Hi, D3-hexgrid is a perfect data visualization solution!

Here only a suggestion to include a function or method to return cell identifiers based in fractal indexing (space-filling curve), and its base7 or base49 alphanumeric representations.

See this 2019's article about the theme and showing algorithms for "Hierarchical Hexagonal Clustering and Indexing with hexagonal grids". There are also good solutions for equal-area grid over the globe... A function for recursive covering (like this) can be defined also, over these cell-indexing systems.

If you judge it interesting we can discuss, and maybe implement something; otherwise feel free to close without reply.

Would it be possible to get an example how to integrate the optional 'names' when calling the hexgrid function?

I am trying to base the colour scheme of the map on the total "electrical capacity" and not only on the point density. But to do so, I would need this information in the hex grid layout.

I have working map, everything works fine, but as soon as I add a second parameter I get an error (see below).

This section in the documentation seemed to answer my need, but I am not sure what I am doing wrong. Assuming you want to visualise restaurants on a map and have a restaurant dataset containing the variables website and opening_times you can say:

My dataset looks like this:

{
    electrical_capacity: 65.30000000000003, 
    Latitude: "52.93956242", 
    Longitude: "7.67540297"
}

And I call the function like this

const hexgrid = d3
            .hexgrid()
            .hexRadius(this.hexradius, this.unit)
            .extent([
                this.dimensions.boundedWidth,
                this.dimensions.boundedHeight
            ])
            .geography(geo)
            .projection(this.projection)
            .pathGenerator(this.geoPath);

        // // Get the hexbin generator and the layout.
        // this.hex = hexgrid(this.dataset); // This line works
        this.hex = hexgrid(this.dataset, 'electrical_capacity'); // This line fails
        // // Get the hexbin generator and the layout.

Error message

TypeError: variables.forEach is not a function
    at /Users/ralph/Documents/Websites/repos/Data Studio Community Component /node_modules/d3-hexgrid/src/prepUserData.js:50:1
    at Array.map (<anonymous>)
    at /Users/ralph/Documents/Websites/repos/Data Studio Community Component /node_modules/d3-hexgrid/src/prepUserData.js:43:1
    at hexgrid (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /node_modules/d3-hexgrid/src/hexgrid.js:105:41)
    at HexbinMap.getProjection (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/src/hexbin-obj.js:102:1)
    at HexbinMap.draw (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/src/hexbin-obj.js:110:1)
    at drawViz (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/hexbin-map.js:85:1)
    at draw (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/hexbin-map.js:96:1)
    at hexbinmap (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/hexbin-map.js:176:1)
prepUserData.js:50
TypeError: Cannot read property 'grid' of undefined
    at HexbinMap.drawHexbin (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/src/hexbin-drawContent.js:24:1)
    at HexbinMap.draw (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/src/hexbin-obj.js:118:1)
    at drawViz (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/hexbin-map.js:85:1)
    at draw (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/hexbin-map.js:96:1)
    at hexbinmap (/Users/ralph/Documents/Websites/repos/Data Studio Community Component /hexbin-map/hexbin-map.js:176:1)

Thanks!

Hello,

I found a warning message from the console:

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
getCover_default @ d3-hexgrid.js?v=5cd79255:1213
(anonymous) @ d3-hexgrid.js?v=5cd79255:1389
hexgrid @ d3-hexgrid.js?v=5cd79255:1388
...

Looking into your code, by modifying /getImageData.js on line 22 from:

const context = canvas.getContext('2d');

to:

const context = canvas.getContext('2d', { willReadFrequently: true });

The same was applied in /getEdgeTools.js. This has led to big performance improvement (>10x) for a world map with a radius of 3.

I'll let you try and see if it's a good solution that should be applied.

I see the document, in the example part use myPointLocationData veriable and I didn't how to declare this.
I'm nubby on generate map and hexagon

I want to create a glob map that cover with the hexagon with 50km area, and I didn't how should I do this with hexgrid?

The point density calculation partly breaks when a floating number with more than one decimal place is passed to .hexRadius. extentPointDensity[1] returns NaN and consequently extentPointsWeighted returns [NaN, NaN]. As a temporary work around, instead of:

d3.hexgrid()
  // ...
  .hexRadius(4.5678)

use

d3.hexgrid()
  // ...
  .hexRadius(Math.round(4.5678 * 10) / 10)

So far hexRadius() needs to be set in pixel.