How to draw (hexbin) hexagonal binning using D3 js V6. My object has a string and an integer-CodePudding

My object for the hexagonal binning chart is an array of similar objects like below:

{
    "doorname": "iSTAR Door2-Simulator637788736992214062 iSTAReX",
    "total_swipe_count": 319,
    "date": "03/31/2022 07:01:38"
}

How can I show below on hexagon. In every example they take x and y integer values or generate x and y values randomly and show.

I have an array of above objects. How can I give x, y in my "hexbin" chart?

CodePudding user response：

add two more parameters to the object something like x and y, these coordinates needs to be created either randomly (or) in some specific format like concentrating high density ones at the center.

Then you can push something like below:

 this.data.forEach((d) => {
        inputForHexbinFun.push( [x(d.x), y(d.y),d.total_swipe_count,d.date,d.doorname] )
    });