From 1e4e09b83a02d62e0cdd281de17047945d6f5f3b Mon Sep 17 00:00:00 2001 From: hustcc Date: Wed, 16 Aug 2023 13:54:01 +0800 Subject: [PATCH 1/2] docs: add hexjson-usa demo --- site/.dumi/global.ts | 1 + site/examples/geo/geo/demo/hexjson-usa.ts | 80 +++++++++++++++++++++++ site/examples/geo/geo/demo/meta.json | 8 +++ site/package.json | 1 + 4 files changed, 90 insertions(+) create mode 100644 site/examples/geo/geo/demo/hexjson-usa.ts diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts index 4070516175..9897fc3e26 100644 --- a/site/.dumi/global.ts +++ b/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'); diff --git a/site/examples/geo/geo/demo/hexjson-usa.ts b/site/examples/geo/geo/demo/hexjson-usa.ts new file mode 100644 index 0000000000..e91bdd3cfa --- /dev/null +++ b/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(); diff --git a/site/examples/geo/geo/demo/meta.json b/site/examples/geo/geo/demo/meta.json index ab71b15069..4b73f59661 100644 --- a/site/examples/geo/geo/demo/meta.json +++ b/site/examples/geo/geo/demo/meta.json @@ -43,6 +43,14 @@ "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" } ] } diff --git a/site/package.json b/site/package.json index 881cb6803f..b9910c2fe1 100644 --- a/site/package.json +++ b/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", From a62dbac90e2e5844494c5c0c77402c06315ae674 Mon Sep 17 00:00:00 2001 From: hustcc Date: Wed, 16 Aug 2023 15:39:34 +0800 Subject: [PATCH 2/2] chore: add hexbin china map --- site/examples/geo/geo/demo/hexbin-china.ts | 47 ++++++++++++++++++++++ site/examples/geo/geo/demo/meta.json | 8 ++++ 2 files changed, 55 insertions(+) create mode 100644 site/examples/geo/geo/demo/hexbin-china.ts diff --git a/site/examples/geo/geo/demo/hexbin-china.ts b/site/examples/geo/geo/demo/hexbin-china.ts new file mode 100644 index 0000000000..703b9ae9b1 --- /dev/null +++ b/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(); diff --git a/site/examples/geo/geo/demo/meta.json b/site/examples/geo/geo/demo/meta.json index 4b73f59661..9bb11677aa 100644 --- a/site/examples/geo/geo/demo/meta.json +++ b/site/examples/geo/geo/demo/meta.json @@ -51,6 +51,14 @@ "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" } ] }