docs: add hex bin demo

site/.dumi/global.ts

@@ -13,6 +13,7 @@ if (window) {
   (window as any).d3Regression = require('d3-regression');
   (window as any).d3GeoProjection = require('d3-geo-projection');
   (window as any).d3Random = require('d3-random');
+  (window as any).d3Hexjson = require('d3-hexjson');
   (window as any).topojson = require('topojson');
   (window as any).gLottiePlayer = require('@antv/g-lottie-player');
   (window as any).gPattern = require('@antv/g-pattern');

site/examples/geo/geo/demo/hexbin-china.ts

@@ -0,0 +1,47 @@
+import { Chart } from '@antv/g2';
+import DataSet from '@antv/data-set';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .polygon()
+  .data({
+    type: 'fetch',
+    value: 'https://assets.antv.antgroup.com/g2/hexbin-china.json',
+    transform: [
+      {
+        type: 'custom',
+        callback: (data) => {
+          const dv = new DataSet.View().source(data).transform({
+            type: 'bin.hexagon',
+            fields: ['longitude', 'latitude'],
+            binWidth: [2, 3],
+            as: ['longitude', 'latitude', 'count'],
+          });
+          return dv.rows;
+        },
+      },
+    ],
+  })
+  .encode('x', 'longitude')
+  .encode('y', 'latitude')
+  .encode('color', 'count')
+  .scale('color', {
+    range: '#BAE7FF-#1890FF-#0050B3',
+  })
+  .style('lineWidth', 5)
+  .style('stroke', '#fff')
+  .axis(false)
+  .legend(false)
+  .tooltip({
+    field: 'count',
+  })
+  .state('active', { fill: 'orange' })
+  .state('inactive', { opacity: 0.8 })
+  .interaction('elementHighlight', true);
+
+chart.render();

site/examples/geo/geo/demo/hexjson-usa.ts

@@ -0,0 +1,80 @@
+/**
+ * A recreation of this demo: http://blog.apps.npr.org/2015/05/11/hex-tile-maps.html
+ */
+import { Chart, register } from '@antv/g2';
+import { getGridForHexJSON, renderHexJSON } from 'd3-hexjson';
+
+function processRow(row) {
+  row.cx = row.x;
+  row.cy = row.y;
+  row.x = [];
+  row.y = [];
+  row.vertices.forEach((v) => {
+    row.x.push(v.x + row.cx);
+    row.y.push(v.y + row.cy);
+  });
+  return row;
+}
+
+register('data.hexbin', ({ width = 1, height = 1 }) => {
+  return (data) => renderHexJSON(data, width, height).map(processRow);
+});
+
+register('data.hexgird', ({ width = 1, height = 1 }) => {
+  return (data) =>
+    renderHexJSON(getGridForHexJSON(data), width, height).map(processRow);
+});
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/antvdemo/assets/data/us-states.hex.json',
+  })
+  .axis(false);
+
+chart
+  .polygon()
+  .data({
+    transform: [{ type: 'hexgird' }],
+  })
+  .encode('x', 'x')
+  .encode('y', 'y')
+  .style('fill', 'grey')
+  .style('opacity', 0.2)
+  .style('lineWidth', 2)
+  .style('stroke', '#fff')
+  .style('pointerEvents', 'none')
+  .tooltip(false);
+
+chart
+  .polygon()
+  .data({
+    transform: [{ type: 'hexbin' }],
+  })
+  .encode('x', 'x')
+  .encode('y', 'y')
+  .style('fill', '#5B8FF9')
+  .style('lineWidth', 5)
+  .style('stroke', '#fff')
+  .label({
+    text: 'key',
+    fontSize: 16,
+    fontWeight: 500,
+    position: 'inside',
+    pointerEvents: 'none',
+  })
+  .tooltip({
+    field: 'capital',
+  })
+  .state('active', { fill: 'orange' })
+  .state('inactive', { opacity: 0.5 })
+  .interaction('elementHighlight', true);
+
+chart.render();

site/examples/geo/geo/demo/meta.json

@@ -43,6 +43,22 @@
         "en": "Projection Comparison"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eM7qSrDEZcYAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "hexjson-usa.ts",
+      "title": {
+        "zh": "六边形美国地图",
+        "en": "Hexbin USA Map"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BAtYRoaNsp4AAAAAAAAAAAAADmJ7AQ/fmt.webp"
+    },
+    {
+      "filename": "hexbin-china.ts",
+      "title": {
+        "zh": "六边形中国地图",
+        "en": "Hexbin China Map"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*T0WkT5NCw7UAAAAAAAAAAAAADmJ7AQ/fmt.webp"
     }
   ]
 }

site/package.json

@@ -20,6 +20,7 @@
     "antd": "^4.23.5",
     "d3-array": "^3.2.0",
     "d3-geo-projection": "^4.0.0",
+    "d3-hexjson": "^1.1.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
     "d3-random": "^3.0.1",