The hexbin series enables the easy creation of aggregated and binned data. This can be useful if you have a lot of overlapping data or if you simply want to provide a courser representation of data to your user. Unlike many other series this one performs the aggregation computation, simply provide a scatterplot like collection of data (points in linear x and y space) and your off!
Points are binned into hexagonal containers, which are then rendered as svg paths. These svg hexes can encode their counts through color and size! It can be particularly effective to pair this series with a border element.
<XYPlot
xDomain={[40, 100]}
yDomain={[1.5, 8]}
width={300}
getX={d => d.waiting}
getY={d => d.eruptions}
onMouseLeave={() => this.setState({hoveredNode: null})}
height={300}>
<HexbinSeries
animation
className="hexbin-example"
style={{
stroke: '#125C77',
strokeLinejoin: 'round'
}}
onValueMouseOver={d => this.setState({hoveredNode: d})}
colorRange={['white', 'black']}
radius={radius}
data={data}/>
</XYPlot>Type: Boolean
See the Animation's animation section for more information.
Type: string
Provide an additional class name for the series.
Type: Array of two numbers
Provide the specific counts to the hexagon binning between. If not provided defaults to [0, ].
Type: Array of two strings
Provide the colors for hexagons to interpolate between.
Type: Array<Object>
Array of data for the series. Follows the usual pattern of an array of objects formatted with x and y coordinates, [{x: 0, y: 0}, ...].
Type: Number
The maximum size of the hexagon, specified in pixels.
Type: object
A list of CSS properties to style the series outside of the explicitly set properties. These style elements are applied directly to each individual hexagon. Note that it will override all other properties (ie fill, stroke, opacity, color). See style for more information.
Type: Boolean
Size the hexagons based on the number of values in side of the hexagon. Ranges between [0, ].
Type: Number
Default: 0
Size of aggregation offset form base value, this enables fine tuning along the x axis.
Type: Number
Default: 0
Size of aggregation offset form base value, this enables fine tuning along the y axis.
Type: function
Default: none
This handler is triggered either when the user clicks on a mark. The handler passes two arguments, the corresponding datapoint and the actual event.
<HexbinSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
Type: function
Default: none
This handler is triggered either when the user's mouse leaves a mark. The handler passes two arguments, the corresponding datapoint and the actual event.
<HexbinSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
Type: function
Default: none
This handler is triggered either when the user's mouse enters a mark. The handler passes two arguments, the corresponding datapoint and the actual event.
<HexbinSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
Type: function
Default: none
This handler is triggered either when the user right-clicks on a mark. The handler passes two arguments, the corresponding datapoint and the actual event.
<HexbinSeries
...
onValueRightClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.