larsvers / d3-hexgrid

Regular hexagon tessellation with edge cover detection.
BSD 3-Clause "New" or "Revised" License
153 stars 17 forks source link

hexgrid(data[, names]) example #8

Closed spandl closed 5 years ago

spandl commented 5 years ago

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!

spandl commented 5 years ago

Found the solution: Variables must be passed in an array this.hex = hexgrid(this.dataset, ['electrical_capacity'])

That was kind of obvious....