JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
		integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
		crossorigin="anonymous" />
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<script src="https://unpkg.com/@asymmetrik/leaflet-d3@4/dist/leaflet-d3.js" charset="utf-8"></script>
</head>

<body>
	<h2>Leaflet d3 Hexbin Example</h2>
	<p>Demonstrates advanced functionality</p>

	<!-- The map element -->
	<div id="map" style="width: 600px; height: 400px; border: 1px solid #ccc"></div>
	<br />

	<input id="countInput" type="text" value="1000"><button onclick="generateData()">Generate Data</button>

</body>

</html>

CSS

.hexbin-hexagon {
			stroke: #000;
			stroke-width: .5px;
		}

		.hexbin-container:hover .hexbin-hexagon {
			transition: 200ms;
			stroke: orange;
			stroke-width: 1px;
			stroke-opacity: 1;
		}

		.hexbin-tooltip {
			padding: 8px;
			border-radius: 4px;
			border: 1px solid black;
			background-color: white;
		}

JavaScript

var center = [50.01,8];
		var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
		});

		var map = L.map('map', {
			layers: [layer],
			center: L.latLng(center[0], center[1]), zoom: 7
		});


		// Create the hexlayer
		var hexLayer = L.hexbinLayer({ duration: 200, radiusRange: [2, 20] })
			.radiusValue(function (d) {
				var posts_sum = d.reduce(function (acc, obj) { return acc + obj["o"][3]; }, 0);
				return posts_sum
			})
			.colorValue(function (d, i) {
				var users_sum = d.reduce(function (acc, obj) { return acc + obj["o"][2]; }, 0);
				return users_sum
			})
			.hoverHandler(L.HexbinHoverHandler.compound({
				handlers: [
					L.HexbinHoverHandler.resizeFill(),
					L.HexbinHoverHandler.tooltip()
				]
			}));

		hexLayer.addTo(map);

		// Set up events
		hexLayer.dispatch()
			.on('click', function (d, i) {
				console.log({ type: 'click', event: d, index: i, context: this });
			});


		// Random data generators
		var latFn = d3.randomNormal(center[0], 1);
		var longFn = d3.randomNormal(center[1], 1);

		var users = d3.randomNormal(1, 100)
		var posts = d3.randomNormal(1, 1000)

		function generateData() {
			var count = document.getElementById('countInput').value;

			var data = [];
			for (var i = 0; i < count; i++) {
				data.push([longFn(),latFn(), users(), posts()]);
			}
			hexLayer.data(data);
		};

		generateData();