From 2594329e4e37f0a8b3fc6b09772413dd4f5b1237 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sat, 18 Mar 2023 22:07:40 -0700 Subject: [PATCH 01/18] feat(delaunay): Initial setup for the new visx-delaunay package --- packages/visx-delaunay/.npmrc | 1 + packages/visx-delaunay/Readme.md | 68 ++++++++++++++ packages/visx-delaunay/package.json | 43 +++++++++ .../src/components/VoronoiPolygon.tsx | 24 +++++ packages/visx-delaunay/src/index.ts | 2 + packages/visx-delaunay/src/voronoi.ts | 25 +++++ .../test/VoronoiPolygon.test.tsx | 35 +++++++ packages/visx-delaunay/test/tsconfig.json | 15 +++ packages/visx-delaunay/test/voronoi.test.ts | 30 ++++++ packages/visx-delaunay/tsconfig.json | 18 ++++ packages/visx-delaunay/yarn.lock | 92 +++++++++++++++++++ .../public/static/docs/visx-demo.html | 2 +- .../visx-demo/src/components/PackageList.tsx | 6 ++ packages/visx-demo/src/pages/delaunay.tsx | 26 ++++++ packages/visx-demo/src/types/index.ts | 1 + packages/visx-demo/tsconfig.json | 10 +- packages/visx-visx/tsconfig.json | 3 + 17 files changed, 397 insertions(+), 4 deletions(-) create mode 100644 packages/visx-delaunay/.npmrc create mode 100644 packages/visx-delaunay/Readme.md create mode 100644 packages/visx-delaunay/package.json create mode 100644 packages/visx-delaunay/src/components/VoronoiPolygon.tsx create mode 100644 packages/visx-delaunay/src/index.ts create mode 100644 packages/visx-delaunay/src/voronoi.ts create mode 100644 packages/visx-delaunay/test/VoronoiPolygon.test.tsx create mode 100644 packages/visx-delaunay/test/tsconfig.json create mode 100644 packages/visx-delaunay/test/voronoi.test.ts create mode 100644 packages/visx-delaunay/tsconfig.json create mode 100644 packages/visx-delaunay/yarn.lock create mode 100644 packages/visx-demo/src/pages/delaunay.tsx diff --git a/packages/visx-delaunay/.npmrc b/packages/visx-delaunay/.npmrc new file mode 100644 index 000000000..9cf949503 --- /dev/null +++ b/packages/visx-delaunay/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/packages/visx-delaunay/Readme.md b/packages/visx-delaunay/Readme.md new file mode 100644 index 000000000..797cc052b --- /dev/null +++ b/packages/visx-delaunay/Readme.md @@ -0,0 +1,68 @@ +# @visx/voronoi + + + + + +## Overview + +A Voronoi diagram partitions a two-dimensional plane into regions based on a set of input points. +Each unique input point maps to a corresponding region, where each region represents _all points +that are closer to the input point than to any other input point_. + +Not only are Voronoi diagrams 😍, but they can be used to +[improve the interactive experience of a visualization](https://www.visualcinnamon.com/2015/07/voronoi.html). +This is most often accomplished by overlaying an invisible voronoi grid on top of the visualization +to increase the target area of interaction sites such as points on a scatter plot. + +The `@visx/voronoi` package provides a wrapper around the existing +[d3-voronoi](https://github.com/d3/d3-voronoi) package with some `react`-specific utilities. + +## Installation + +``` +npm install --save @visx/voronoi +``` + +## Usage + +The `@visx/voronoi` package exports a wrapped version of the d3 `voronoi` layout for flexible usage, +as well as a `` component for rendering Voronoi regions. + +```js +import { voronoi, VoronoiPolygon } from '@visx/voronoi'; + +const points = Array(n).fill(null).map(() => ({ + x: Math.random() * innerWidth, + y: Math.random() * innerHeight, +})); + +// width + height set an extent on the voronoi +// x + y set relevant accessors depending on the shape of your data +const voronoiLayout = voronoi({ + x: d => d.x, + y: d => d.y, + width, + height, +}); + +const voronoiDiagram = voronoiLayout(data); +const polygons = voronoiDiagram.polygons(); // equivalent to voronoiLayout.polygons(points) + +return ( + + + {polygons.map((polygon) => ( + + ))} + {points.map(({ x, y }) => ( + + )} + + +) +``` + +For more advanced usage with events, see [this example](https://airbnb.io/visx/voronoi). Additional +information about the voronoi layout + diagram can be found in the +[d3-voronoi documentation](https://github.com/d3/d3-voronoi). diff --git a/packages/visx-delaunay/package.json b/packages/visx-delaunay/package.json new file mode 100644 index 000000000..4469ad668 --- /dev/null +++ b/packages/visx-delaunay/package.json @@ -0,0 +1,43 @@ +{ + "name": "@visx/delaunay", + "version": "1.0.0", + "description": "visx delaunay", + "sideEffects": false, + "main": "lib/index.js", + "module": "esm/index.js", + "types": "lib/index.d.ts", + "files": [ + "lib", + "esm" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/airbnb/visx.git" + }, + "keywords": [ + "visx", + "react", + "d3", + "visualizations", + "charts" + ], + "author": "@SheaJanke", + "license": "MIT", + "bugs": { + "url": "https://github.com/airbnb/visx/issues" + }, + "homepage": "https://github.com/airbnb/visx#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@types/d3-delaunay": "^6.0.1", + "@types/react": "*", + "classnames": "^2.3.1", + "d3-delaunay": "^6.0.2", + "prop-types": "^15.6.1" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } +} diff --git a/packages/visx-delaunay/src/components/VoronoiPolygon.tsx b/packages/visx-delaunay/src/components/VoronoiPolygon.tsx new file mode 100644 index 000000000..6d44fcea6 --- /dev/null +++ b/packages/visx-delaunay/src/components/VoronoiPolygon.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import cx from 'classnames'; + +export type VoronoiPolygonProps = { + /** Override render function which is provided polygon and generated path. */ + children?: ({ path, polygon }: { path: string; polygon: [number, number][] }) => React.ReactNode; + /** className to apply to path element. */ + className?: string; + /** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */ + polygon?: [number, number][]; +}; + +export default function VoronoiPolygon({ + polygon, + className, + children, + ...restProps +}: VoronoiPolygonProps & Omit, keyof VoronoiPolygonProps>) { + if (!polygon) return null; + const path = `M${polygon.join('L')}Z`; + if (children) return <>{children({ path, polygon })}; + + return ; +} diff --git a/packages/visx-delaunay/src/index.ts b/packages/visx-delaunay/src/index.ts new file mode 100644 index 000000000..47b8d9269 --- /dev/null +++ b/packages/visx-delaunay/src/index.ts @@ -0,0 +1,2 @@ +export { default as voronoi } from './voronoi'; +export { default as VoronoiPolygon } from './components/VoronoiPolygon'; diff --git a/packages/visx-delaunay/src/voronoi.ts b/packages/visx-delaunay/src/voronoi.ts new file mode 100644 index 000000000..0ff1a67d0 --- /dev/null +++ b/packages/visx-delaunay/src/voronoi.ts @@ -0,0 +1,25 @@ +import { Delaunay } from 'd3-delaunay'; + +const CLIP_PADDING = 1; + +interface Config { + /** The data for the voronoi layout */ + data?: Datum[]; + /** The total width of the voronoi layout. */ + width?: number; + /** The total width of the voronoi layout. */ + height?: number; + /** Set the x-value accessor function for the voronoi layout. */ + x: (d: Datum) => number; + /** Set the y-value accessor function for the voronoi layout. */ + y: (d: Datum) => number; +} + +/** + * Returns a configured d3 voronoi `layout`. calling `layout(data)` returns a voronoi *diagram*. + * Alternatively call `layout.polygons(data)`, `layout.triangles(data)`, `layout.links(data)` + */ +export default function voronoi({ data = [], width = 0, height = 0, x, y }: Config) { + const delaunay = Delaunay.from(data, x, y); + return delaunay.voronoi([-CLIP_PADDING, -CLIP_PADDING, width + CLIP_PADDING, height + CLIP_PADDING]); +} diff --git a/packages/visx-delaunay/test/VoronoiPolygon.test.tsx b/packages/visx-delaunay/test/VoronoiPolygon.test.tsx new file mode 100644 index 000000000..770dd7801 --- /dev/null +++ b/packages/visx-delaunay/test/VoronoiPolygon.test.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { VoronoiPolygon } from '../src'; + +describe('', () => { + const polygon: [number, number][] = new Array(3).fill(null).map((_, i) => [i, i]); + + const props = { polygon }; + + test('it should be defined', () => { + expect(VoronoiPolygon).toBeDefined(); + }); + + test('it should not render without a polygon', () => { + const wrapper = shallow(); + expect(wrapper.type()).toBeNull(); + }); + + test('it should render a path', () => { + const wrapper = shallow(); + expect(wrapper.find('path')).toHaveLength(1); + }); + + test('it should set a d attribute based on the polygon prop', () => { + const wrapper = shallow(); + const d = 'M0,0L1,1L2,2Z'; + expect(wrapper.find('path').props().d).toEqual(d); + }); + + test('it should add extra (non-func) props to the path element', () => { + const wrapper = shallow(); + expect(wrapper.find('path').props().fill).toBe('orange'); + }); +}); diff --git a/packages/visx-delaunay/test/tsconfig.json b/packages/visx-delaunay/test/tsconfig.json new file mode 100644 index 000000000..a59615e52 --- /dev/null +++ b/packages/visx-delaunay/test/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "composite": false, + "emitDeclarationOnly": false, + "noEmit": true, + "rootDir": "." + }, + "extends": "../../../tsconfig.options.json", + "include": ["**/*", "../types/**/*", "../../../types/**/*"], + "references": [ + { + "path": ".." + } + ] +} diff --git a/packages/visx-delaunay/test/voronoi.test.ts b/packages/visx-delaunay/test/voronoi.test.ts new file mode 100644 index 000000000..8801ce236 --- /dev/null +++ b/packages/visx-delaunay/test/voronoi.test.ts @@ -0,0 +1,30 @@ +import { voronoi } from '../src'; + +const x = () => 123; +const y = () => 123; + +describe('voronoi', () => { + test('it should be defined', () => { + expect(voronoi).toBeDefined(); + }); + + test('x param should set voronoi x', () => { + const v = voronoi({ x }); + expect(v.x()).toEqual(x); + }); + + test('y param should set voronoi y', () => { + const v = voronoi({ y }); + expect(v.y()).toEqual(y); + }); + + test('width and height params should define extent', () => { + const width = 17; + const height = 99; + const v = voronoi({ width, height }); + const extent = v.extent(); + const endCoord = extent![1]; + expect(endCoord[0]).toEqual(width + 1); + expect(endCoord[1]).toEqual(height + 1); + }); +}); diff --git a/packages/visx-delaunay/tsconfig.json b/packages/visx-delaunay/tsconfig.json new file mode 100644 index 000000000..b2c72804c --- /dev/null +++ b/packages/visx-delaunay/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "declarationDir": "lib", + "outDir": "lib", + "rootDir": "src" + }, + "exclude": [ + "lib", + "test" + ], + "extends": "../../tsconfig.options.json", + "include": [ + "src/**/*", + "types/**/*", + "../../types/**/*" + ], + "references": [] +} \ No newline at end of file diff --git a/packages/visx-delaunay/yarn.lock b/packages/visx-delaunay/yarn.lock new file mode 100644 index 000000000..176f7cf8e --- /dev/null +++ b/packages/visx-delaunay/yarn.lock @@ -0,0 +1,92 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@types/d3-delaunay@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41" + integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ== + +"@types/d3-voronoi@^1.1.9": + version "1.1.9" + resolved "https://registry.yarnpkg.com/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz#7bbc210818a3a5c5e0bafb051420df206617c9e5" + integrity sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ== + +"@types/prop-types@*": + version "15.7.5" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" + integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== + +"@types/react@*": + version "18.0.28" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065" + integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + +classnames@^2.3.1: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + +csstype@^3.0.2: + version "3.1.1" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" + integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== + +d3-delaunay@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92" + integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ== + dependencies: + delaunator "5" + +delaunator@5: + version "5.0.0" + resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b" + integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw== + dependencies: + robust-predicates "^3.0.0" + +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + +object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== + +prop-types@^15.6.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + +react-is@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + +robust-predicates@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a" + integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g== diff --git a/packages/visx-demo/public/static/docs/visx-demo.html b/packages/visx-demo/public/static/docs/visx-demo.html index 70129df3e..7e3fd2b37 100644 --- a/packages/visx-demo/public/static/docs/visx-demo.html +++ b/packages/visx-demo/public/static/docs/visx-demo.html @@ -26,7 +26,7 @@
diff --git a/packages/visx-demo/src/components/PackageList.tsx b/packages/visx-demo/src/components/PackageList.tsx index 4933234c0..4618c8187 100644 --- a/packages/visx-demo/src/components/PackageList.tsx +++ b/packages/visx-demo/src/components/PackageList.tsx @@ -159,6 +159,12 @@ export default function PackageList({ {!compact &&

Enable selection of a part of an interface

} +
  • + + delaunay + + {!compact &&

    Partition points in a chart to improve user interaction

    } +
  • drag diff --git a/packages/visx-demo/src/pages/delaunay.tsx b/packages/visx-demo/src/pages/delaunay.tsx new file mode 100644 index 000000000..965c08bbf --- /dev/null +++ b/packages/visx-demo/src/pages/delaunay.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import VoronoiChart from '../sandboxes/visx-voronoi/Example'; +import packageJson from '../sandboxes/visx-voronoi/package.json'; +import Show from '../components/Show'; +import VoronoiChartSource from '!!raw-loader!../sandboxes/visx-voronoi/Example'; + +function DelaunayPage() { + return ( + + {VoronoiChartSource} + + ); +} +export default DelaunayPage; diff --git a/packages/visx-demo/src/types/index.ts b/packages/visx-demo/src/types/index.ts index d6a8d06d0..d4255da8d 100644 --- a/packages/visx-demo/src/types/index.ts +++ b/packages/visx-demo/src/types/index.ts @@ -25,6 +25,7 @@ export type VisxPackage = | 'chord' | 'clip-path' | 'curve' + | 'delaunay' | 'drag' | 'event' | 'geo' diff --git a/packages/visx-demo/tsconfig.json b/packages/visx-demo/tsconfig.json index b4f677086..5a8a12677 100644 --- a/packages/visx-demo/tsconfig.json +++ b/packages/visx-demo/tsconfig.json @@ -14,11 +14,12 @@ "moduleResolution": "node", "composite": true, "outDir": "lib", - "resolveJsonModule": false, + "resolveJsonModule": true, "rootDir": "src", "skipLibCheck": true, "strict": false, - "target": "es5" + "target": "es5", + "noEmit": true }, "exclude": [ "lib", @@ -51,6 +52,9 @@ { "path": "../visx-curve" }, + { + "path": "../visx-delaunay" + }, { "path": "../visx-drag" }, @@ -136,4 +140,4 @@ "path": "../visx-zoom" } ] -} \ No newline at end of file +} diff --git a/packages/visx-visx/tsconfig.json b/packages/visx-visx/tsconfig.json index 2ec3dc58f..4d4c129e9 100644 --- a/packages/visx-visx/tsconfig.json +++ b/packages/visx-visx/tsconfig.json @@ -33,6 +33,9 @@ { "path": "../visx-curve" }, + { + "path": "../visx-delaunay" + }, { "path": "../visx-drag" }, From 00bdb6c112f76166330cb370f04d41e742d0c7bb Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sun, 19 Mar 2023 23:07:17 -0700 Subject: [PATCH 02/18] feat(delaunay): Working Voronoi polygon example --- .../src/components/Gallery/DelaunayTile.tsx | 25 ++++ .../visx-demo/src/pages/docs/delaunay.tsx | 22 ++++ .../exampleToVisxDependencyLookup.ts | 2 + .../src/sandboxes/visx-delaunay/Example.tsx | 117 ++++++++++++++++++ .../src/sandboxes/visx-delaunay/index.tsx | 12 ++ .../src/sandboxes/visx-delaunay/package.json | 29 +++++ .../visx-delaunay/sandbox-styles.css | 8 ++ packages/visx-demo/tsconfig.json | 5 +- packages/visx-visx/tsconfig.json | 3 - 9 files changed, 216 insertions(+), 7 deletions(-) create mode 100644 packages/visx-demo/src/components/Gallery/DelaunayTile.tsx create mode 100644 packages/visx-demo/src/pages/docs/delaunay.tsx create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay/package.json create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay/sandbox-styles.css diff --git a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx new file mode 100644 index 000000000..172d3c4fc --- /dev/null +++ b/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import Voronoi, { VoronoiProps } from '../../sandboxes/visx-delaunay/Example'; +import GalleryTile from '../GalleryTile'; + +export { default as packageJson } from '../../sandboxes/visx-delaunay/package.json'; + +const tileStyles = { + background: '#eb6d88', + borderRadius: 14, + boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px', +}; +const detailsStyles = { background: 'white', color: '#eb6d88', borderRadius: '0 0 14px 14px' }; + +export default function DelaunayTile() { + return ( + + title="Voronoi overlay" + description="" + exampleRenderer={Voronoi} + exampleUrl="/delaunay" + tileStyles={tileStyles} + detailsStyles={detailsStyles} + /> + ); +} diff --git a/packages/visx-demo/src/pages/docs/delaunay.tsx b/packages/visx-demo/src/pages/docs/delaunay.tsx new file mode 100644 index 000000000..e7280bfdb --- /dev/null +++ b/packages/visx-demo/src/pages/docs/delaunay.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import DelaunayReadme from '!!raw-loader!../../../../visx-delaunay/Readme.md'; +import VoronoiPolygon from '../../../../visx-delaunay/src/components/VoronoiPolygon'; +import voronoi from '../../../../visx-delaunay/src/voronoi'; +import DocPage from '../../components/DocPage'; +import DelaunayTile from '../../components/Gallery/DelaunayTile'; + +const components = [voronoi, VoronoiPolygon]; + +const examples = [DelaunayTile]; + +function DelaunayDocs() { + return ( + + ); +} +export default DelaunayDocs; \ No newline at end of file diff --git a/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts b/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts index 82e8c8b2d..5922cce3f 100644 --- a/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts +++ b/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts @@ -9,6 +9,7 @@ import barstackHorizontalPackageJson from './visx-barstack-horizontal/package.js import brushPackageJson from './visx-brush/package.json'; import chordPackageJson from './visx-chord/package.json'; import curvePackageJson from './visx-curve/package.json'; +import delaunayPackageJson from './visx-delaunay/package.json' import dendrogramPackageJson from './visx-dendrogram/package.json'; import dotsPackageJson from './visx-dots/package.json'; import dragIPackageJson from './visx-drag-i/package.json'; @@ -55,6 +56,7 @@ const examples = [ brushPackageJson, chordPackageJson, curvePackageJson, + delaunayPackageJson, dendrogramPackageJson, dotsPackageJson, dragIIPackageJson, diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx new file mode 100644 index 000000000..87742dd90 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx @@ -0,0 +1,117 @@ +import React, { useState, useMemo, useRef } from 'react'; +import { Group } from '@visx/group'; +import { GradientOrangeRed, GradientPinkRed } from '@visx/gradient'; +import { RectClipPath } from '@visx/clip-path'; +import { voronoi, VoronoiPolygon } from '../../../../visx-delaunay/src'; +import { localPoint } from '@visx/event'; +import { getSeededRandom } from '@visx/mock-data'; + +type Datum = { + x: number; + y: number; + id: string; +}; + +const seededRandom = getSeededRandom(0.88); + +const data: Datum[] = new Array(150).fill(null).map(() => ({ + x: seededRandom(), + y: seededRandom(), + id: Math.random().toString(36).slice(2), +})); + +const neighborRadius = 75; + +const defaultMargin = { + top: 0, + left: 0, + right: 0, + bottom: 76, +}; + +export type VoronoiProps = { + width: number; + height: number; + margin?: { top: number; right: number; bottom: number; left: number }; +}; + +function Example({ width, height, margin = defaultMargin }: VoronoiProps) { + const innerWidth = width - margin.left - margin.right; + const innerHeight = height - margin.top - margin.bottom; + + const voronoiDiagram = useMemo( + () => + voronoi({ + data, + x: (d) => d.x * innerWidth, + y: (d) => d.y * innerHeight, + width: innerWidth, + height: innerHeight, + }), + [innerWidth, innerHeight], + ); + + const polygons = Array.from(voronoiDiagram.cellPolygons()); + const svgRef = useRef(null); + const [hoveredId, setHoveredId] = useState(null); + const [neighborIds, setNeighborIds] = useState>(new Set()); + + return width < 10 ? null : ( + + + + + { + if (!svgRef.current) return; + + // find the nearest polygon to the current mouse position + const point = localPoint(svgRef.current, event); + if (!point) return; + + const closest = voronoiDiagram.delaunay.find(point.x, point.y);; + // find neighboring polygons to hightlight + if (closest && data[closest].id !== hoveredId) { + const neighbors = Array.from(voronoiDiagram.neighbors(closest)); + setNeighborIds(new Set(neighbors.map((d) => data[d].id))); + setHoveredId(data[closest].id); + } + }} + onMouseLeave={() => { + setHoveredId(null); + setNeighborIds(new Set()); + }} + > + {data.map((d, i) => ( + + ))} + {data.map(({ x, y, id }) => ( + + ))} + + + ); +} + +export default Example; diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx new file mode 100644 index 000000000..537d244f5 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import ParentSize from '@visx/responsive/lib/components/ParentSize'; + +import Example from './Example'; +import './sandbox-styles.css'; + +const root = createRoot(document.getElementById('root')!); + +root.render( + {({ width, height }) => }, +); diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/package.json b/packages/visx-demo/src/sandboxes/visx-delaunay/package.json new file mode 100644 index 000000000..6ea291b0e --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/package.json @@ -0,0 +1,29 @@ +{ + "name": "@visx/demo-delaunay", + "description": "Standalone visx delaunay demo.", + "main": "index.tsx", + "private": true, + "dependencies": { + "@babel/runtime": "^7.8.4", + "@types/react": "^18", + "@types/react-dom": "^18", + "@visx/clip-path": "latest", + "@visx/delaunay": "latest", + "@visx/event": "latest", + "@visx/gradient": "latest", + "@visx/group": "latest", + "@visx/mock-data": "latest", + "@visx/responsive": "latest", + "react": "^18", + "react-dom": "^18", + "react-scripts-ts": "3.1.0", + "typescript": "^3" + }, + "keywords": [ + "visualization", + "d3", + "react", + "visx", + "voronoi" + ] +} diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/sandbox-styles.css b/packages/visx-demo/src/sandboxes/visx-delaunay/sandbox-styles.css new file mode 100644 index 000000000..b91993723 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/sandbox-styles.css @@ -0,0 +1,8 @@ +html, +body, +#root { + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 2em; +} diff --git a/packages/visx-demo/tsconfig.json b/packages/visx-demo/tsconfig.json index 5a8a12677..3f2adc1ca 100644 --- a/packages/visx-demo/tsconfig.json +++ b/packages/visx-demo/tsconfig.json @@ -52,9 +52,6 @@ { "path": "../visx-curve" }, - { - "path": "../visx-delaunay" - }, { "path": "../visx-drag" }, @@ -140,4 +137,4 @@ "path": "../visx-zoom" } ] -} +} \ No newline at end of file diff --git a/packages/visx-visx/tsconfig.json b/packages/visx-visx/tsconfig.json index 4d4c129e9..2ec3dc58f 100644 --- a/packages/visx-visx/tsconfig.json +++ b/packages/visx-visx/tsconfig.json @@ -33,9 +33,6 @@ { "path": "../visx-curve" }, - { - "path": "../visx-delaunay" - }, { "path": "../visx-drag" }, From b27beff816953390420e01e13e9b7d65946b77ae Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Mon, 20 Mar 2023 22:03:01 -0700 Subject: [PATCH 03/18] feat(delaunay): Add delaunay triangulation example --- packages/visx-delaunay/Readme.md | 28 ++--- .../{VoronoiPolygon.tsx => Polygon.tsx} | 4 +- packages/visx-delaunay/src/delaunay.ts | 18 +++ packages/visx-delaunay/src/index.ts | 3 +- .../src/components/Gallery/DelaunayTile.tsx | 8 +- .../Gallery/DelaunayVoronoiTile.tsx | 25 ++++ .../visx-demo/src/pages/docs/delaunay.tsx | 7 +- .../visx-delaunay-voronoi/Example.tsx | 114 ++++++++++++++++++ .../sandboxes/visx-delaunay-voronoi/index.tsx | 12 ++ .../visx-delaunay-voronoi/package.json | 30 +++++ .../visx-delaunay-voronoi/sandbox-styles.css | 8 ++ .../src/sandboxes/visx-delaunay/Example.tsx | 38 +++--- .../src/sandboxes/visx-delaunay/index.tsx | 2 +- 13 files changed, 248 insertions(+), 49 deletions(-) rename packages/visx-delaunay/src/components/{VoronoiPolygon.tsx => Polygon.tsx} (85%) create mode 100644 packages/visx-delaunay/src/delaunay.ts create mode 100644 packages/visx-demo/src/components/Gallery/DelaunayVoronoiTile.tsx create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/index.tsx create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json create mode 100644 packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/sandbox-styles.css diff --git a/packages/visx-delaunay/Readme.md b/packages/visx-delaunay/Readme.md index 797cc052b..16fe0921e 100644 --- a/packages/visx-delaunay/Readme.md +++ b/packages/visx-delaunay/Readme.md @@ -1,7 +1,7 @@ -# @visx/voronoi +# @visx/delaunay - - + + ## Overview @@ -15,22 +15,22 @@ Not only are Voronoi diagrams 😍, but they can be used to This is most often accomplished by overlaying an invisible voronoi grid on top of the visualization to increase the target area of interaction sites such as points on a scatter plot. -The `@visx/voronoi` package provides a wrapper around the existing -[d3-voronoi](https://github.com/d3/d3-voronoi) package with some `react`-specific utilities. +The `@visx/delaunay` package provides a wrapper around the existing +[d3-delaunay](https://github.com/d3/d3-delaunay) package with some `react`-specific utilities. ## Installation ``` -npm install --save @visx/voronoi +npm install --save @visx/delaunay ``` ## Usage -The `@visx/voronoi` package exports a wrapped version of the d3 `voronoi` layout for flexible usage, -as well as a `` component for rendering Voronoi regions. +The `@visx/delaunay` package exports a wrapped version of the d3 `voronoi` and `delaunay` layouts for flexible usage, +as well as a `` component for rendering Voronoi and Delaunay regions. ```js -import { voronoi, VoronoiPolygon } from '@visx/voronoi'; +import { voronoi, Polygon } from '@visx/delaunay'; const points = Array(n).fill(null).map(() => ({ x: Math.random() * innerWidth, @@ -39,21 +39,21 @@ const points = Array(n).fill(null).map(() => ({ // width + height set an extent on the voronoi // x + y set relevant accessors depending on the shape of your data -const voronoiLayout = voronoi({ +const voronoiDiagram = voronoi({ + data, x: d => d.x, y: d => d.y, width, height, }); -const voronoiDiagram = voronoiLayout(data); -const polygons = voronoiDiagram.polygons(); // equivalent to voronoiLayout.polygons(points) +const polygons = Array.from(voronoiDiagram.cellPolygons()); return ( {polygons.map((polygon) => ( - + ))} {points.map(({ x, y }) => ( @@ -63,6 +63,6 @@ return ( ) ``` -For more advanced usage with events, see [this example](https://airbnb.io/visx/voronoi). Additional +For more advanced usage with events, see [this example](https://airbnb.io/visx/delaunay). Additional information about the voronoi layout + diagram can be found in the [d3-voronoi documentation](https://github.com/d3/d3-voronoi). diff --git a/packages/visx-delaunay/src/components/VoronoiPolygon.tsx b/packages/visx-delaunay/src/components/Polygon.tsx similarity index 85% rename from packages/visx-delaunay/src/components/VoronoiPolygon.tsx rename to packages/visx-delaunay/src/components/Polygon.tsx index 6d44fcea6..c31d04113 100644 --- a/packages/visx-delaunay/src/components/VoronoiPolygon.tsx +++ b/packages/visx-delaunay/src/components/Polygon.tsx @@ -10,7 +10,7 @@ export type VoronoiPolygonProps = { polygon?: [number, number][]; }; -export default function VoronoiPolygon({ +export default function Polygon({ polygon, className, children, @@ -20,5 +20,5 @@ export default function VoronoiPolygon({ const path = `M${polygon.join('L')}Z`; if (children) return <>{children({ path, polygon })}; - return ; + return ; } diff --git a/packages/visx-delaunay/src/delaunay.ts b/packages/visx-delaunay/src/delaunay.ts new file mode 100644 index 000000000..c6a7c60a8 --- /dev/null +++ b/packages/visx-delaunay/src/delaunay.ts @@ -0,0 +1,18 @@ +import { Delaunay } from 'd3-delaunay'; + +interface Config { + /** The data for the voronoi layout */ + data?: Datum[]; + /** Set the x-value accessor function for the delaunay layout. */ + x: (d: Datum) => number; + /** Set the y-value accessor function for the delaunay layout. */ + y: (d: Datum) => number; +} + +/** + * Returns a configured d3 voronoi `layout`. calling `layout(data)` returns a voronoi *diagram*. + * Alternatively call `layout.polygons(data)`, `layout.triangles(data)`, `layout.links(data)` + */ +export default function delaunay({ data = [], x, y }: Config) { + return Delaunay.from(data, x, y); +} diff --git a/packages/visx-delaunay/src/index.ts b/packages/visx-delaunay/src/index.ts index 47b8d9269..0cbb1a47f 100644 --- a/packages/visx-delaunay/src/index.ts +++ b/packages/visx-delaunay/src/index.ts @@ -1,2 +1,3 @@ +export { default as delaunay } from './delaunay'; export { default as voronoi } from './voronoi'; -export { default as VoronoiPolygon } from './components/VoronoiPolygon'; +export { default as Polygon } from './components/Polygon'; diff --git a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx index 172d3c4fc..a72cc18bd 100644 --- a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx +++ b/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Voronoi, { VoronoiProps } from '../../sandboxes/visx-delaunay/Example'; +import Delaunay, { VoronoiProps } from '../../sandboxes/visx-delaunay/Example'; import GalleryTile from '../GalleryTile'; export { default as packageJson } from '../../sandboxes/visx-delaunay/package.json'; @@ -14,9 +14,9 @@ const detailsStyles = { background: 'white', color: '#eb6d88', borderRadius: '0 export default function DelaunayTile() { return ( - title="Voronoi overlay" - description="" - exampleRenderer={Voronoi} + title="Delaunay Triangulation" + description="" + exampleRenderer={Delaunay} exampleUrl="/delaunay" tileStyles={tileStyles} detailsStyles={detailsStyles} diff --git a/packages/visx-demo/src/components/Gallery/DelaunayVoronoiTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayVoronoiTile.tsx new file mode 100644 index 000000000..3d1d6f1ac --- /dev/null +++ b/packages/visx-demo/src/components/Gallery/DelaunayVoronoiTile.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import Voronoi, { VoronoiProps } from '../../sandboxes/visx-delaunay-voronoi/Example'; +import GalleryTile from '../GalleryTile'; + +export { default as packageJson } from '../../sandboxes/visx-delaunay-voronoi/package.json'; + +const tileStyles = { + background: '#eb6d88', + borderRadius: 14, + boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px', +}; +const detailsStyles = { background: 'white', color: '#eb6d88', borderRadius: '0 0 14px 14px' }; + +export default function DelaunayTile() { + return ( + + title="Voronoi Overlay" + description="" + exampleRenderer={Voronoi} + exampleUrl="/delaunay-voronoi" + tileStyles={tileStyles} + detailsStyles={detailsStyles} + /> + ); +} diff --git a/packages/visx-demo/src/pages/docs/delaunay.tsx b/packages/visx-demo/src/pages/docs/delaunay.tsx index e7280bfdb..6fd6f3245 100644 --- a/packages/visx-demo/src/pages/docs/delaunay.tsx +++ b/packages/visx-demo/src/pages/docs/delaunay.tsx @@ -1,13 +1,14 @@ import React from 'react'; import DelaunayReadme from '!!raw-loader!../../../../visx-delaunay/Readme.md'; -import VoronoiPolygon from '../../../../visx-delaunay/src/components/VoronoiPolygon'; +import Polygon from '../../../../visx-delaunay/src/components/Polygon'; import voronoi from '../../../../visx-delaunay/src/voronoi'; import DocPage from '../../components/DocPage'; import DelaunayTile from '../../components/Gallery/DelaunayTile'; +import DelaunayVoronoiTile from '../../components/Gallery/DelaunayVoronoiTile'; -const components = [voronoi, VoronoiPolygon]; +const components = [voronoi, Polygon]; -const examples = [DelaunayTile]; +const examples = [DelaunayTile, DelaunayVoronoiTile]; function DelaunayDocs() { return ( diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx new file mode 100644 index 000000000..e8cbeb4d8 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx @@ -0,0 +1,114 @@ +import React, { useState, useMemo, useRef } from 'react'; +import { Group } from '@visx/group'; +import { GradientOrangeRed, GradientPinkRed } from '@visx/gradient'; +import { RectClipPath } from '@visx/clip-path'; +import { voronoi, Polygon } from '../../../../visx-delaunay/src'; +import { localPoint } from '@visx/event'; +import { getSeededRandom } from '@visx/mock-data'; + +type Datum = { + x: number; + y: number; + id: string; +}; + +const seededRandom = getSeededRandom(0.88); + +const data: Datum[] = new Array(150).fill(null).map(() => ({ + x: seededRandom(), + y: seededRandom(), + id: Math.random().toString(36).slice(2), +})); + +const defaultMargin = { + top: 0, + left: 0, + right: 0, + bottom: 76, +}; + +export type VoronoiProps = { + width: number; + height: number; + margin?: { top: number; right: number; bottom: number; left: number }; +}; + +function Example({ width, height, margin = defaultMargin }: VoronoiProps) { + const innerWidth = width - margin.left - margin.right; + const innerHeight = height - margin.top - margin.bottom; + + const voronoiDiagram = useMemo( + () => + voronoi({ + data, + x: (d) => d.x * innerWidth, + y: (d) => d.y * innerHeight, + width: innerWidth, + height: innerHeight, + }), + [innerWidth, innerHeight], + ); + + const svgRef = useRef(null); + const [hoveredId, setHoveredId] = useState(null); + const [neighborIds, setNeighborIds] = useState>(new Set()); + + return width < 10 ? null : ( + + + + + { + if (!svgRef.current) return; + + // find the nearest polygon to the current mouse position + const point = localPoint(svgRef.current, event); + if (!point) return; + + const closest = voronoiDiagram.delaunay.find(point.x, point.y);; + // find neighboring polygons to hightlight + if (closest && data[closest].id !== hoveredId) { + const neighbors = Array.from(voronoiDiagram.neighbors(closest)); + setNeighborIds(new Set(neighbors.map((d) => data[d].id))); + setHoveredId(data[closest].id); + } + }} + onMouseLeave={() => { + setHoveredId(null); + setNeighborIds(new Set()); + }} + > + {data.map((d, i) => ( + + ))} + {data.map(({ x, y, id }) => ( + + ))} + + + ); +} + +export default Example; diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/index.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/index.tsx new file mode 100644 index 000000000..537d244f5 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import ParentSize from '@visx/responsive/lib/components/ParentSize'; + +import Example from './Example'; +import './sandbox-styles.css'; + +const root = createRoot(document.getElementById('root')!); + +root.render( + {({ width, height }) => }, +); diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json new file mode 100644 index 000000000..a059f8d47 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json @@ -0,0 +1,30 @@ +{ + "name": "@visx/demo-delaunay", + "description": "Standalone visx delaunay demo.", + "main": "index.tsx", + "private": true, + "dependencies": { + "@babel/runtime": "^7.8.4", + "@types/react": "^18", + "@types/react-dom": "^18", + "@visx/clip-path": "latest", + "@visx/delaunay": "latest", + "@visx/event": "latest", + "@visx/gradient": "latest", + "@visx/group": "latest", + "@visx/mock-data": "latest", + "@visx/responsive": "latest", + "react": "^18", + "react-dom": "^18", + "react-scripts-ts": "3.1.0", + "typescript": "^3" + }, + "keywords": [ + "visualization", + "d3", + "react", + "visx", + "voronoi", + "delaunay" + ] +} diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/sandbox-styles.css b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/sandbox-styles.css new file mode 100644 index 000000000..b91993723 --- /dev/null +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/sandbox-styles.css @@ -0,0 +1,8 @@ +html, +body, +#root { + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 2em; +} diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx index 87742dd90..e96630d02 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx @@ -2,7 +2,7 @@ import React, { useState, useMemo, useRef } from 'react'; import { Group } from '@visx/group'; import { GradientOrangeRed, GradientPinkRed } from '@visx/gradient'; import { RectClipPath } from '@visx/clip-path'; -import { voronoi, VoronoiPolygon } from '../../../../visx-delaunay/src'; +import { delaunay, Polygon } from '../../../../visx-delaunay/src'; import { localPoint } from '@visx/event'; import { getSeededRandom } from '@visx/mock-data'; @@ -20,8 +20,6 @@ const data: Datum[] = new Array(150).fill(null).map(() => ({ id: Math.random().toString(36).slice(2), })); -const neighborRadius = 75; - const defaultMargin = { top: 0, left: 0, @@ -39,26 +37,23 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; - const voronoiDiagram = useMemo( + const delaunayDiagram = useMemo( () => - voronoi({ + delaunay({ data, x: (d) => d.x * innerWidth, y: (d) => d.y * innerHeight, - width: innerWidth, - height: innerHeight, }), [innerWidth, innerHeight], ); + const triangles = Array.from(delaunayDiagram.trianglePolygons()); - const polygons = Array.from(voronoiDiagram.cellPolygons()); const svgRef = useRef(null); const [hoveredId, setHoveredId] = useState(null); const [neighborIds, setNeighborIds] = useState>(new Set()); return width < 10 ? null : ( - { if (!svgRef.current) return; - // find the nearest polygon to the current mouse position + // find the nearest point to the current mouse position const point = localPoint(svgRef.current, event); if (!point) return; - const closest = voronoiDiagram.delaunay.find(point.x, point.y);; - // find neighboring polygons to hightlight + const closest = delaunayDiagram.find(point.x, point.y);; + // find neighboring points to hightlight if (closest && data[closest].id !== hoveredId) { - const neighbors = Array.from(voronoiDiagram.neighbors(closest)); + const neighbors = Array.from(delaunayDiagram.neighbors(closest)); setNeighborIds(new Set(neighbors.map((d) => data[d].id))); setHoveredId(data[closest].id); } @@ -85,18 +80,13 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { setNeighborIds(new Set()); }} > - {data.map((d, i) => ( - ( + ))} {data.map(({ x, y, id }) => ( @@ -105,7 +95,7 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { r={2} cx={x * innerWidth} cy={y * innerHeight} - fill={id === hoveredId ? 'fuchsia' : '#fff'} + fill={neighborIds.has(id) ? 'fuchsia' : '#fff'} fillOpacity={0.8} /> ))} diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx index 537d244f5..41ca62ec9 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import ParentSize from '@visx/responsive/lib/components/ParentSize'; -import Example from './Example'; +import Example from './ExampleVoronoi'; import './sandbox-styles.css'; const root = createRoot(document.getElementById('root')!); From 6ca2eb19b528b4dec65f4f7f0b8e14c15cf38f16 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Wed, 22 Mar 2023 22:20:41 -0700 Subject: [PATCH 04/18] feat(delaunay): Add examples to gallery --- packages/visx-delaunay/src/delaunay.ts | 9 ++++--- packages/visx-delaunay/src/voronoi.ts | 14 +++++------ .../src/components/Gallery/index.tsx | 4 ++++ .../visx-demo/src/pages/docs/delaunay.tsx | 3 ++- yarn.lock | 24 +++++++++++++++++++ 5 files changed, 41 insertions(+), 13 deletions(-) diff --git a/packages/visx-delaunay/src/delaunay.ts b/packages/visx-delaunay/src/delaunay.ts index c6a7c60a8..53b6fe733 100644 --- a/packages/visx-delaunay/src/delaunay.ts +++ b/packages/visx-delaunay/src/delaunay.ts @@ -1,17 +1,16 @@ import { Delaunay } from 'd3-delaunay'; interface Config { - /** The data for the voronoi layout */ + /** The data for the delaunay triangulation */ data?: Datum[]; - /** Set the x-value accessor function for the delaunay layout. */ + /** Set the x-value accessor function for the delaunay triangulation. */ x: (d: Datum) => number; - /** Set the y-value accessor function for the delaunay layout. */ + /** Set the y-value accessor function for the delaunay triangulation. */ y: (d: Datum) => number; } /** - * Returns a configured d3 voronoi `layout`. calling `layout(data)` returns a voronoi *diagram*. - * Alternatively call `layout.polygons(data)`, `layout.triangles(data)`, `layout.links(data)` + * Returns a configured d3 delaunay triangulation. See d3-delaunay for the complete API reference. */ export default function delaunay({ data = [], x, y }: Config) { return Delaunay.from(data, x, y); diff --git a/packages/visx-delaunay/src/voronoi.ts b/packages/visx-delaunay/src/voronoi.ts index 0ff1a67d0..91bfd39a2 100644 --- a/packages/visx-delaunay/src/voronoi.ts +++ b/packages/visx-delaunay/src/voronoi.ts @@ -3,21 +3,21 @@ import { Delaunay } from 'd3-delaunay'; const CLIP_PADDING = 1; interface Config { - /** The data for the voronoi layout */ + /** The data for the voronoi diagram */ data?: Datum[]; - /** The total width of the voronoi layout. */ + /** The total width of the voronoi diagram. */ width?: number; - /** The total width of the voronoi layout. */ + /** The total width of the voronoi diagram. */ height?: number; - /** Set the x-value accessor function for the voronoi layout. */ + /** Set the x-value accessor function for the voronoi diagram. */ x: (d: Datum) => number; - /** Set the y-value accessor function for the voronoi layout. */ + /** Set the y-value accessor function for the voronoi diagram. */ y: (d: Datum) => number; } /** - * Returns a configured d3 voronoi `layout`. calling `layout(data)` returns a voronoi *diagram*. - * Alternatively call `layout.polygons(data)`, `layout.triangles(data)`, `layout.links(data)` + * Returns a configured d3 voronoi diagram for the given data. See d3-delaunay + * for the complete API reference. */ export default function voronoi({ data = [], width = 0, height = 0, x, y }: Config) { const delaunay = Delaunay.from(data, x, y); diff --git a/packages/visx-demo/src/components/Gallery/index.tsx b/packages/visx-demo/src/components/Gallery/index.tsx index c941fb02a..0cf3b6602 100644 --- a/packages/visx-demo/src/components/Gallery/index.tsx +++ b/packages/visx-demo/src/components/Gallery/index.tsx @@ -15,6 +15,8 @@ import * as BarsTile from './BarsTile'; import * as BrushTile from './BrushTile'; import * as ChordTile from './ChordTile'; import * as CurvesTile from './CurvesTile'; +import * as DelaunayTile from './DelaunayTile'; +import * as DelaunayVoronoiTile from './DelaunayVoronoiTile'; import * as DendrogramsTile from './DendrogramsTile'; import * as DotsTile from './DotsTile'; import * as DragIITile from './DragIITile'; @@ -58,6 +60,8 @@ const tiltOptions = { max: 8, scale: 1 }; export const tiles = [ CurvesTile, BarsTile, + DelaunayTile, + DelaunayVoronoiTile, DotsTile, PatternsTile, AreaTile, diff --git a/packages/visx-demo/src/pages/docs/delaunay.tsx b/packages/visx-demo/src/pages/docs/delaunay.tsx index 6fd6f3245..4cad4c834 100644 --- a/packages/visx-demo/src/pages/docs/delaunay.tsx +++ b/packages/visx-demo/src/pages/docs/delaunay.tsx @@ -1,12 +1,13 @@ import React from 'react'; import DelaunayReadme from '!!raw-loader!../../../../visx-delaunay/Readme.md'; import Polygon from '../../../../visx-delaunay/src/components/Polygon'; +import delaunay from '../../../../visx-delaunay/src/delaunay'; import voronoi from '../../../../visx-delaunay/src/voronoi'; import DocPage from '../../components/DocPage'; import DelaunayTile from '../../components/Gallery/DelaunayTile'; import DelaunayVoronoiTile from '../../components/Gallery/DelaunayVoronoiTile'; -const components = [voronoi, Polygon]; +const components = [delaunay, voronoi, Polygon]; const examples = [DelaunayTile, DelaunayVoronoiTile]; diff --git a/yarn.lock b/yarn.lock index 4e1b0f741..af47be02b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3041,6 +3041,11 @@ resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.2.2.tgz#80cf7cfff7401587b8f89307ba36fe4a576bc7cf" integrity sha512-6pBxzJ8ZP3dYEQ4YjQ+NVbQaOflfgXq/JbDiS99oLobM2o72uAST4q6yPxHv6FOTCRC/n35ktuo8pvw/S4M7sw== +"@types/d3-delaunay@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41" + integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ== + "@types/d3-format@^1.3.1": version "1.3.1" resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.3.1.tgz#35bf88264bd6bcda39251165bb827f67879c4384" @@ -5462,6 +5467,13 @@ d3-color@1: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== +d3-delaunay@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92" + integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ== + dependencies: + delaunator "5" + d3-dispatch@^1.0.3: version "1.0.6" resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58" @@ -5801,6 +5813,13 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" +delaunator@5: + version "5.0.0" + resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b" + integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw== + dependencies: + robust-predicates "^3.0.0" + delayed-stream@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" @@ -12360,6 +12379,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1: hash-base "^3.0.0" inherits "^2.0.1" +robust-predicates@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a" + integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g== + rst-selector-parser@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91" From 7097b128fab7b84525aa2e037a4e1e293317ad2e Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Fri, 24 Mar 2023 21:51:30 -0700 Subject: [PATCH 05/18] feat(delaunay): Add unit tests --- babel.config.js | 2 +- jest.config.js | 2 +- ...ronoiPolygon.test.tsx => Polygon.test.tsx} | 12 +++---- packages/visx-delaunay/test/delaunay.test.ts | 26 +++++++++++++++ packages/visx-delaunay/test/voronoi.test.ts | 32 ++++++++++--------- 5 files changed, 51 insertions(+), 23 deletions(-) rename packages/visx-delaunay/test/{VoronoiPolygon.test.tsx => Polygon.test.tsx} (70%) create mode 100644 packages/visx-delaunay/test/delaunay.test.ts diff --git a/babel.config.js b/babel.config.js index 2f9bdf67d..287ad63b2 100644 --- a/babel.config.js +++ b/babel.config.js @@ -20,7 +20,7 @@ const plugins = ['babel-plugin-typescript-to-proptypes']; const ignore = [ 'coverage/', - 'node_modules/(?!(d3-(array|color|format|interpolate|scale|time|time-format)|internmap)/)', + 'node_modules/(?!(d3-(array|color|delaunay|format|interpolate|scale|time|time-format)|delaunator|internmap|robust-predicates)/)', 'public/', 'esm/', 'lib/', diff --git a/jest.config.js b/jest.config.js index 50e2bccd7..7f2687dd7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -44,6 +44,6 @@ module.exports = { verbose: false, testPathIgnorePatterns: ['/packages/visx-demo'], transformIgnorePatterns: [ - 'node_modules/(?!(d3-(array|color|format|interpolate|scale|time|time-format)|internmap)/)', + 'node_modules/(?!(d3-(array|color|delaunay|format|interpolate|scale|time|time-format)|delaunator|internmap|robust-predicates)/)', ], }; diff --git a/packages/visx-delaunay/test/VoronoiPolygon.test.tsx b/packages/visx-delaunay/test/Polygon.test.tsx similarity index 70% rename from packages/visx-delaunay/test/VoronoiPolygon.test.tsx rename to packages/visx-delaunay/test/Polygon.test.tsx index 770dd7801..b23c0d88f 100644 --- a/packages/visx-delaunay/test/VoronoiPolygon.test.tsx +++ b/packages/visx-delaunay/test/Polygon.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { VoronoiPolygon } from '../src'; +import { Polygon } from '../src'; describe('', () => { const polygon: [number, number][] = new Array(3).fill(null).map((_, i) => [i, i]); @@ -9,27 +9,27 @@ describe('', () => { const props = { polygon }; test('it should be defined', () => { - expect(VoronoiPolygon).toBeDefined(); + expect(Polygon).toBeDefined(); }); test('it should not render without a polygon', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.type()).toBeNull(); }); test('it should render a path', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('path')).toHaveLength(1); }); test('it should set a d attribute based on the polygon prop', () => { - const wrapper = shallow(); + const wrapper = shallow(); const d = 'M0,0L1,1L2,2Z'; expect(wrapper.find('path').props().d).toEqual(d); }); test('it should add extra (non-func) props to the path element', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('path').props().fill).toBe('orange'); }); }); diff --git a/packages/visx-delaunay/test/delaunay.test.ts b/packages/visx-delaunay/test/delaunay.test.ts new file mode 100644 index 000000000..3a05fe969 --- /dev/null +++ b/packages/visx-delaunay/test/delaunay.test.ts @@ -0,0 +1,26 @@ +import { delaunay } from '../src'; + +const data = [ + { x: 10, y: 10 }, + { x: 10, y: 20 }, + { x: 20, y: 20 }, + { x: 20, y: 10 }, +]; + +describe('delaunay', () => { + test('it should be defined', () => { + expect(delaunay).toBeDefined(); + }); + + test('it should find closest point', () => { + const delaunayDiagram = delaunay({ data, x: (d) => d.x, y: (d) => d.y }); + expect(delaunayDiagram.find(9, 11)).toEqual(0); + expect(delaunayDiagram.find(11, 19)).toEqual(1); + expect(delaunayDiagram.find(21, 19)).toEqual(2); + }); + + test('the delaunay triagulation of a square should contain two triangles ', () => { + const delaunayDiagram = delaunay({ data, x: (d) => d.x, y: (d) => d.y }); + expect(Array.from(delaunayDiagram.trianglePolygons()).length).toEqual(2); + }); +}); diff --git a/packages/visx-delaunay/test/voronoi.test.ts b/packages/visx-delaunay/test/voronoi.test.ts index 8801ce236..c0cd61941 100644 --- a/packages/visx-delaunay/test/voronoi.test.ts +++ b/packages/visx-delaunay/test/voronoi.test.ts @@ -8,23 +8,25 @@ describe('voronoi', () => { expect(voronoi).toBeDefined(); }); - test('x param should set voronoi x', () => { - const v = voronoi({ x }); - expect(v.x()).toEqual(x); - }); - - test('y param should set voronoi y', () => { - const v = voronoi({ y }); - expect(v.y()).toEqual(y); - }); - test('width and height params should define extent', () => { const width = 17; const height = 99; - const v = voronoi({ width, height }); - const extent = v.extent(); - const endCoord = extent![1]; - expect(endCoord[0]).toEqual(width + 1); - expect(endCoord[1]).toEqual(height + 1); + const v = voronoi({ width, height, x, y }); + expect(v.xmin).toEqual(-1); + expect(v.ymin).toEqual(-1); + expect(v.xmax).toEqual(width + 1); + expect(v.ymax).toEqual(height + 1); + }); + + test('100 random points should give 100 cell polygons', () => { + const data = []; + for (let i = 0; i < 100; i++) { + data.push({ + x: Math.random(), + y: Math.random(), + }) + } + const v = voronoi({ data, x: (d) => d.x, y: (d) => d.y }); + expect(Array.from(v.cellPolygons()).length).toEqual(100); }); }); From 88a95e9dd622e2015c87eb9fb70f4f59b036e8e5 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sat, 25 Mar 2023 17:34:19 -0700 Subject: [PATCH 06/18] feat(delaunay): Fix demo pages --- .../src/components/Gallery/DelaunayTile.tsx | 8 ++--- .../visx-demo/src/pages/delaunay-voronoi.tsx | 26 +++++++++++++++++ packages/visx-demo/src/pages/delaunay.tsx | 10 +++---- .../exampleToVisxDependencyLookup.ts | 4 ++- .../src/sandboxes/visx-delaunay/Example.tsx | 29 +++++++------------ .../src/sandboxes/visx-delaunay/index.tsx | 2 +- .../src/sandboxes/visx-delaunay/package.json | 2 +- packages/visx-demo/tsconfig.json | 3 ++ 8 files changed, 54 insertions(+), 30 deletions(-) create mode 100644 packages/visx-demo/src/pages/delaunay-voronoi.tsx diff --git a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx index a72cc18bd..24b18ee51 100644 --- a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx +++ b/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx @@ -1,19 +1,19 @@ import React from 'react'; -import Delaunay, { VoronoiProps } from '../../sandboxes/visx-delaunay/Example'; +import Delaunay, { DelaunayProps } from '../../sandboxes/visx-delaunay/Example'; import GalleryTile from '../GalleryTile'; export { default as packageJson } from '../../sandboxes/visx-delaunay/package.json'; const tileStyles = { - background: '#eb6d88', + background: 'black', borderRadius: 14, boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px', }; -const detailsStyles = { background: 'white', color: '#eb6d88', borderRadius: '0 0 14px 14px' }; +const detailsStyles = { background: 'white', color: '#5B247A', borderRadius: '0 0 14px 14px' }; export default function DelaunayTile() { return ( - + title="Delaunay Triangulation" description="" exampleRenderer={Delaunay} diff --git a/packages/visx-demo/src/pages/delaunay-voronoi.tsx b/packages/visx-demo/src/pages/delaunay-voronoi.tsx new file mode 100644 index 000000000..c31d3e40a --- /dev/null +++ b/packages/visx-demo/src/pages/delaunay-voronoi.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import VoronoiChart from '../sandboxes/visx-delaunay-voronoi/Example'; +import packageJson from '../sandboxes/visx-delaunay-voronoi/package.json'; +import Show from '../components/Show'; +import VoronoiChartSource from '!!raw-loader!../sandboxes/visx-delaunay-voronoi/Example'; + +function DelaunayVoronoiPage() { + return ( + + {VoronoiChartSource} + + ); +} +export default DelaunayVoronoiPage; diff --git a/packages/visx-demo/src/pages/delaunay.tsx b/packages/visx-demo/src/pages/delaunay.tsx index 965c08bbf..05583b780 100644 --- a/packages/visx-demo/src/pages/delaunay.tsx +++ b/packages/visx-demo/src/pages/delaunay.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import VoronoiChart from '../sandboxes/visx-voronoi/Example'; -import packageJson from '../sandboxes/visx-voronoi/package.json'; +import DelaunayChart from '../sandboxes/visx-delaunay/Example'; +import packageJson from '../sandboxes/visx-delaunay/package.json'; import Show from '../components/Show'; -import VoronoiChartSource from '!!raw-loader!../sandboxes/visx-voronoi/Example'; +import DelaunayChartSource from '!!raw-loader!../sandboxes/visx-delaunay/Example'; function DelaunayPage() { return ( @@ -14,12 +14,12 @@ function DelaunayPage() { right: 0, bottom: 0, }} - component={VoronoiChart} + component={DelaunayChart} title="Delaunay" codeSandboxDirectoryName="visx-delaunay" packageJson={packageJson} > - {VoronoiChartSource} + {DelaunayChartSource} ); } diff --git a/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts b/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts index 5922cce3f..af2642bcd 100644 --- a/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts +++ b/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts @@ -9,7 +9,8 @@ import barstackHorizontalPackageJson from './visx-barstack-horizontal/package.js import brushPackageJson from './visx-brush/package.json'; import chordPackageJson from './visx-chord/package.json'; import curvePackageJson from './visx-curve/package.json'; -import delaunayPackageJson from './visx-delaunay/package.json' +import delaunayPackageJson from './visx-delaunay/package.json'; +import delaunayVoronoiPackageJson from './visx-delaunay-voronoi/package.json'; import dendrogramPackageJson from './visx-dendrogram/package.json'; import dotsPackageJson from './visx-dots/package.json'; import dragIPackageJson from './visx-drag-i/package.json'; @@ -57,6 +58,7 @@ const examples = [ chordPackageJson, curvePackageJson, delaunayPackageJson, + delaunayVoronoiPackageJson, dendrogramPackageJson, dotsPackageJson, dragIIPackageJson, diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx index e96630d02..011c8441c 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx @@ -1,6 +1,6 @@ import React, { useState, useMemo, useRef } from 'react'; import { Group } from '@visx/group'; -import { GradientOrangeRed, GradientPinkRed } from '@visx/gradient'; +import { GradientPurpleTeal as Gradient } from '@visx/gradient'; import { RectClipPath } from '@visx/clip-path'; import { delaunay, Polygon } from '../../../../visx-delaunay/src'; import { localPoint } from '@visx/event'; @@ -27,13 +27,13 @@ const defaultMargin = { bottom: 76, }; -export type VoronoiProps = { +export type DelaunayProps = { width: number; height: number; margin?: { top: number; right: number; bottom: number; left: number }; }; -function Example({ width, height, margin = defaultMargin }: VoronoiProps) { +function Example({ width, height, margin = defaultMargin }: DelaunayProps) { const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; @@ -50,16 +50,15 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { const svgRef = useRef(null); const [hoveredId, setHoveredId] = useState(null); - const [neighborIds, setNeighborIds] = useState>(new Set()); return width < 10 ? null : ( - - + + { if (!svgRef.current) return; @@ -67,24 +66,18 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { const point = localPoint(svgRef.current, event); if (!point) return; - const closest = delaunayDiagram.find(point.x, point.y);; - // find neighboring points to hightlight - if (closest && data[closest].id !== hoveredId) { - const neighbors = Array.from(delaunayDiagram.neighbors(closest)); - setNeighborIds(new Set(neighbors.map((d) => data[d].id))); - setHoveredId(data[closest].id); - } + const closest = delaunayDiagram.find(point.x, point.y); + setHoveredId(data[closest].id); }} onMouseLeave={() => { setHoveredId(null); - setNeighborIds(new Set()); }} > {triangles.map((triangle, i) => ( @@ -92,10 +85,10 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { {data.map(({ x, y, id }) => ( ))} diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx index 41ca62ec9..537d244f5 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import ParentSize from '@visx/responsive/lib/components/ParentSize'; -import Example from './ExampleVoronoi'; +import Example from './Example'; import './sandbox-styles.css'; const root = createRoot(document.getElementById('root')!); diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/package.json b/packages/visx-demo/src/sandboxes/visx-delaunay/package.json index 6ea291b0e..51bf88d81 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/package.json +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/package.json @@ -24,6 +24,6 @@ "d3", "react", "visx", - "voronoi" + "delaunay" ] } diff --git a/packages/visx-demo/tsconfig.json b/packages/visx-demo/tsconfig.json index 3f2adc1ca..dc31921f2 100644 --- a/packages/visx-demo/tsconfig.json +++ b/packages/visx-demo/tsconfig.json @@ -52,6 +52,9 @@ { "path": "../visx-curve" }, + { + "path": "../visx-delaunay" + }, { "path": "../visx-drag" }, From 09702348b385ebf48beba8f43ba924a874ea2d72 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sat, 25 Mar 2023 22:46:51 -0700 Subject: [PATCH 07/18] feat(delaunay): Add margin to examples and fix lint errors --- package.json | 2 +- packages/sizes.json | 2 +- packages/visx-delaunay/src/voronoi.ts | 7 +- packages/visx-delaunay/test/delaunay.test.ts | 10 +- packages/visx-delaunay/test/voronoi.test.ts | 10 +- packages/visx-demo/package.json | 1 + packages/visx-demo/src/pages/delaunay.tsx | 8 +- .../visx-demo/src/pages/docs/delaunay.tsx | 4 +- .../visx-delaunay-voronoi/Example.tsx | 4 +- .../src/sandboxes/visx-delaunay/Example.tsx | 98 ++++++++++--------- packages/visx-demo/tsconfig.json | 2 +- packages/visx-visx/package.json | 1 + 12 files changed, 82 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index b45298508..68dcb71e8 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "test": "yarn run jest", "test:watch": "yarn run jest --watch", "ts": "ts-node --project ./tsconfig.node.json", - "type": "lerna exec --parallel -- tsc --build", + "type": "rm -rf ./packages/**/tsconfig.tsbuildinfo && lerna exec --parallel -- tsc --build", "type:pkg": "lerna exec --scope $PKG -- tsc --build --verbose", "type:update-refs": "yarn run ts ./scripts/updateTsReferences.ts" }, diff --git a/packages/sizes.json b/packages/sizes.json index aa52fb1a8..c63a8b314 100644 --- a/packages/sizes.json +++ b/packages/sizes.json @@ -1 +1 @@ -{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-demo":{"esm":0,"lib":36504},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-scale":{"esm":18649,"lib":30334},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":14976,"lib":21474},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178152,"lib":239950},"visx-zoom":{"esm":16077,"lib":19135}} \ No newline at end of file +{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-delaunay":{"esm":2573,"lib":3402},"visx-demo":{"esm":0,"lib":36504},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-scale":{"esm":18649,"lib":30334},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":14976,"lib":21474},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178152,"lib":239950},"visx-zoom":{"esm":16077,"lib":19135}} \ No newline at end of file diff --git a/packages/visx-delaunay/src/voronoi.ts b/packages/visx-delaunay/src/voronoi.ts index 91bfd39a2..5162d6f20 100644 --- a/packages/visx-delaunay/src/voronoi.ts +++ b/packages/visx-delaunay/src/voronoi.ts @@ -21,5 +21,10 @@ interface Config { */ export default function voronoi({ data = [], width = 0, height = 0, x, y }: Config) { const delaunay = Delaunay.from(data, x, y); - return delaunay.voronoi([-CLIP_PADDING, -CLIP_PADDING, width + CLIP_PADDING, height + CLIP_PADDING]); + return delaunay.voronoi([ + -CLIP_PADDING, + -CLIP_PADDING, + width + CLIP_PADDING, + height + CLIP_PADDING, + ]); } diff --git a/packages/visx-delaunay/test/delaunay.test.ts b/packages/visx-delaunay/test/delaunay.test.ts index 3a05fe969..e5bd5fd30 100644 --- a/packages/visx-delaunay/test/delaunay.test.ts +++ b/packages/visx-delaunay/test/delaunay.test.ts @@ -14,13 +14,13 @@ describe('delaunay', () => { test('it should find closest point', () => { const delaunayDiagram = delaunay({ data, x: (d) => d.x, y: (d) => d.y }); - expect(delaunayDiagram.find(9, 11)).toEqual(0); - expect(delaunayDiagram.find(11, 19)).toEqual(1); - expect(delaunayDiagram.find(21, 19)).toEqual(2); + expect(delaunayDiagram.find(9, 11)).toBe(0); + expect(delaunayDiagram.find(11, 19)).toBe(1); + expect(delaunayDiagram.find(21, 19)).toBe(2); }); - test('the delaunay triagulation of a square should contain two triangles ', () => { + test('the delaunay triagulation of a square should contain two triangles', () => { const delaunayDiagram = delaunay({ data, x: (d) => d.x, y: (d) => d.y }); - expect(Array.from(delaunayDiagram.trianglePolygons()).length).toEqual(2); + expect(Array.from(delaunayDiagram.trianglePolygons())).toHaveLength(2); }); }); diff --git a/packages/visx-delaunay/test/voronoi.test.ts b/packages/visx-delaunay/test/voronoi.test.ts index c0cd61941..9b7ae0ab4 100644 --- a/packages/visx-delaunay/test/voronoi.test.ts +++ b/packages/visx-delaunay/test/voronoi.test.ts @@ -12,21 +12,21 @@ describe('voronoi', () => { const width = 17; const height = 99; const v = voronoi({ width, height, x, y }); - expect(v.xmin).toEqual(-1); - expect(v.ymin).toEqual(-1); + expect(v.xmin).toBe(-1); + expect(v.ymin).toBe(-1); expect(v.xmax).toEqual(width + 1); expect(v.ymax).toEqual(height + 1); }); test('100 random points should give 100 cell polygons', () => { const data = []; - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 100; i += 1) { data.push({ x: Math.random(), y: Math.random(), - }) + }); } const v = voronoi({ data, x: (d) => d.x, y: (d) => d.y }); - expect(Array.from(v.cellPolygons()).length).toEqual(100); + expect(Array.from(v.cellPolygons())).toHaveLength(100); }); }); diff --git a/packages/visx-demo/package.json b/packages/visx-demo/package.json index 8d70892fb..50df081b3 100644 --- a/packages/visx-demo/package.json +++ b/packages/visx-demo/package.json @@ -43,6 +43,7 @@ "@visx/chord": "3.0.0", "@visx/clip-path": "3.0.0", "@visx/curve": "3.0.0", + "@visx/delaunay": "1.0.0", "@visx/drag": "3.0.1", "@visx/event": "3.0.1", "@visx/geo": "3.0.0", diff --git a/packages/visx-demo/src/pages/delaunay.tsx b/packages/visx-demo/src/pages/delaunay.tsx index 05583b780..4e7e4ca99 100644 --- a/packages/visx-demo/src/pages/delaunay.tsx +++ b/packages/visx-demo/src/pages/delaunay.tsx @@ -9,10 +9,10 @@ function DelaunayPage() { ); } -export default DelaunayDocs; \ No newline at end of file +export default DelaunayDocs; diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx index e8cbeb4d8..5f54485e1 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/Example.tsx @@ -2,7 +2,7 @@ import React, { useState, useMemo, useRef } from 'react'; import { Group } from '@visx/group'; import { GradientOrangeRed, GradientPinkRed } from '@visx/gradient'; import { RectClipPath } from '@visx/clip-path'; -import { voronoi, Polygon } from '../../../../visx-delaunay/src'; +import { voronoi, Polygon } from '@visx/delaunay'; import { localPoint } from '@visx/event'; import { getSeededRandom } from '@visx/mock-data'; @@ -69,7 +69,7 @@ function Example({ width, height, margin = defaultMargin }: VoronoiProps) { const point = localPoint(svgRef.current, event); if (!point) return; - const closest = voronoiDiagram.delaunay.find(point.x, point.y);; + const closest = voronoiDiagram.delaunay.find(point.x, point.y); // find neighboring polygons to hightlight if (closest && data[closest].id !== hoveredId) { const neighbors = Array.from(voronoiDiagram.neighbors(closest)); diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx index 011c8441c..8a1a80385 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx @@ -2,7 +2,7 @@ import React, { useState, useMemo, useRef } from 'react'; import { Group } from '@visx/group'; import { GradientPurpleTeal as Gradient } from '@visx/gradient'; import { RectClipPath } from '@visx/clip-path'; -import { delaunay, Polygon } from '../../../../visx-delaunay/src'; +import { delaunay, Polygon } from '@visx/delaunay'; import { localPoint } from '@visx/event'; import { getSeededRandom } from '@visx/mock-data'; @@ -21,10 +21,10 @@ const data: Datum[] = new Array(150).fill(null).map(() => ({ })); const defaultMargin = { - top: 0, - left: 0, - right: 0, - bottom: 76, + top: 16, + left: 16, + right: 16, + bottom: 92, }; export type DelaunayProps = { @@ -52,48 +52,56 @@ function Example({ width, height, margin = defaultMargin }: DelaunayProps) { const [hoveredId, setHoveredId] = useState(null); return width < 10 ? null : ( - - - - { - if (!svgRef.current) return; +
    + + + + { + if (!svgRef.current) return; - // find the nearest point to the current mouse position - const point = localPoint(svgRef.current, event); - if (!point) return; + // find the nearest point to the current mouse position + const point = localPoint(svgRef.current, event); + if (!point) return; - const closest = delaunayDiagram.find(point.x, point.y); - setHoveredId(data[closest].id); - }} - onMouseLeave={() => { - setHoveredId(null); - }} - > - {triangles.map((triangle, i) => ( - - ))} - {data.map(({ x, y, id }) => ( - - ))} - - + const closest = delaunayDiagram.find(point.x, point.y); + setHoveredId(data[closest].id); + }} + onMouseLeave={() => { + setHoveredId(null); + }} + > + {triangles.map((triangle, i) => ( + + ))} + {data.map(({ x, y, id }) => ( + + ))} + + + +
    ); } diff --git a/packages/visx-demo/tsconfig.json b/packages/visx-demo/tsconfig.json index dc31921f2..596ea0661 100644 --- a/packages/visx-demo/tsconfig.json +++ b/packages/visx-demo/tsconfig.json @@ -12,7 +12,7 @@ ], "module": "esnext", "moduleResolution": "node", - "composite": true, + "composite": false, "outDir": "lib", "resolveJsonModule": true, "rootDir": "src", diff --git a/packages/visx-visx/package.json b/packages/visx-visx/package.json index 64592f71f..cd06ff804 100644 --- a/packages/visx-visx/package.json +++ b/packages/visx-visx/package.json @@ -39,6 +39,7 @@ "@visx/brush": "3.0.1", "@visx/clip-path": "3.0.0", "@visx/curve": "3.0.0", + "@visx/delaunay": "1.0.0", "@visx/drag": "3.0.1", "@visx/event": "3.0.1", "@visx/geo": "3.0.0", From 893f4754231614d73a4fafe0ab3417bad9d18dac Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sat, 25 Mar 2023 23:30:30 -0700 Subject: [PATCH 08/18] feat(delaunay): Cleanup and renaming --- packages/visx-delaunay/Readme.md | 6 ++--- .../visx-delaunay/src/components/Polygon.tsx | 4 +-- packages/visx-delaunay/test/Polygon.test.tsx | 2 +- packages/visx-delaunay/test/voronoi.test.ts | 11 +++----- ...Tile.tsx => DelaunayTriangulationTile.tsx} | 12 +++++---- .../src/components/Gallery/index.tsx | 2 +- .../src/pages/delaunay-triangulation.tsx | 26 +++++++++++++++++++ packages/visx-demo/src/pages/delaunay.tsx | 26 ------------------- .../visx-demo/src/pages/docs/delaunay.tsx | 4 +-- .../exampleToVisxDependencyLookup.ts | 2 +- .../Example.tsx | 4 +-- .../index.tsx | 0 .../package.json | 7 ++--- .../sandbox-styles.css | 0 .../visx-delaunay-voronoi/package.json | 4 +-- packages/visx-demo/tsconfig.json | 7 +++-- 16 files changed, 58 insertions(+), 59 deletions(-) rename packages/visx-demo/src/components/Gallery/{DelaunayTile.tsx => DelaunayTriangulationTile.tsx} (65%) create mode 100644 packages/visx-demo/src/pages/delaunay-triangulation.tsx delete mode 100644 packages/visx-demo/src/pages/delaunay.tsx rename packages/visx-demo/src/sandboxes/{visx-delaunay => visx-delaunay-triangulation}/Example.tsx (97%) rename packages/visx-demo/src/sandboxes/{visx-delaunay => visx-delaunay-triangulation}/index.tsx (100%) rename packages/visx-demo/src/sandboxes/{visx-delaunay => visx-delaunay-triangulation}/package.json (79%) rename packages/visx-demo/src/sandboxes/{visx-delaunay => visx-delaunay-triangulation}/sandbox-styles.css (100%) diff --git a/packages/visx-delaunay/Readme.md b/packages/visx-delaunay/Readme.md index 16fe0921e..c23bebb50 100644 --- a/packages/visx-delaunay/Readme.md +++ b/packages/visx-delaunay/Readme.md @@ -40,7 +40,7 @@ const points = Array(n).fill(null).map(() => ({ // width + height set an extent on the voronoi // x + y set relevant accessors depending on the shape of your data const voronoiDiagram = voronoi({ - data, + data: points, x: d => d.x, y: d => d.y, width, @@ -64,5 +64,5 @@ return ( ``` For more advanced usage with events, see [this example](https://airbnb.io/visx/delaunay). Additional -information about the voronoi layout + diagram can be found in the -[d3-voronoi documentation](https://github.com/d3/d3-voronoi). +information about the voronoi diagram API can be found in the +[d3-delaunay documentation](https://github.com/d3/d3-delaunay#voronoi). diff --git a/packages/visx-delaunay/src/components/Polygon.tsx b/packages/visx-delaunay/src/components/Polygon.tsx index c31d04113..c0d14d4e0 100644 --- a/packages/visx-delaunay/src/components/Polygon.tsx +++ b/packages/visx-delaunay/src/components/Polygon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; -export type VoronoiPolygonProps = { +export type PolygonProps = { /** Override render function which is provided polygon and generated path. */ children?: ({ path, polygon }: { path: string; polygon: [number, number][] }) => React.ReactNode; /** className to apply to path element. */ @@ -15,7 +15,7 @@ export default function Polygon({ className, children, ...restProps -}: VoronoiPolygonProps & Omit, keyof VoronoiPolygonProps>) { +}: PolygonProps & Omit, keyof PolygonProps>) { if (!polygon) return null; const path = `M${polygon.join('L')}Z`; if (children) return <>{children({ path, polygon })}; diff --git a/packages/visx-delaunay/test/Polygon.test.tsx b/packages/visx-delaunay/test/Polygon.test.tsx index b23c0d88f..73918e176 100644 --- a/packages/visx-delaunay/test/Polygon.test.tsx +++ b/packages/visx-delaunay/test/Polygon.test.tsx @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import { Polygon } from '../src'; -describe('', () => { +describe('', () => { const polygon: [number, number][] = new Array(3).fill(null).map((_, i) => [i, i]); const props = { polygon }; diff --git a/packages/visx-delaunay/test/voronoi.test.ts b/packages/visx-delaunay/test/voronoi.test.ts index 9b7ae0ab4..bd60180d1 100644 --- a/packages/visx-delaunay/test/voronoi.test.ts +++ b/packages/visx-delaunay/test/voronoi.test.ts @@ -19,13 +19,10 @@ describe('voronoi', () => { }); test('100 random points should give 100 cell polygons', () => { - const data = []; - for (let i = 0; i < 100; i += 1) { - data.push({ - x: Math.random(), - y: Math.random(), - }); - } + const data = new Array(100).fill(null).map(() => ({ + x: Math.random(), + y: Math.random(), + })); const v = voronoi({ data, x: (d) => d.x, y: (d) => d.y }); expect(Array.from(v.cellPolygons())).toHaveLength(100); }); diff --git a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayTriangulationTile.tsx similarity index 65% rename from packages/visx-demo/src/components/Gallery/DelaunayTile.tsx rename to packages/visx-demo/src/components/Gallery/DelaunayTriangulationTile.tsx index 24b18ee51..82be75d45 100644 --- a/packages/visx-demo/src/components/Gallery/DelaunayTile.tsx +++ b/packages/visx-demo/src/components/Gallery/DelaunayTriangulationTile.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import Delaunay, { DelaunayProps } from '../../sandboxes/visx-delaunay/Example'; +import Delaunay, { + DelaunayTriangulationProps, +} from '../../sandboxes/visx-delaunay-triangulation/Example'; import GalleryTile from '../GalleryTile'; -export { default as packageJson } from '../../sandboxes/visx-delaunay/package.json'; +export { default as packageJson } from '../../sandboxes/visx-delaunay-triangulation/package.json'; const tileStyles = { background: 'black', @@ -11,13 +13,13 @@ const tileStyles = { }; const detailsStyles = { background: 'white', color: '#5B247A', borderRadius: '0 0 14px 14px' }; -export default function DelaunayTile() { +export default function DelaunayTriangulationTile() { return ( - + title="Delaunay Triangulation" description="" exampleRenderer={Delaunay} - exampleUrl="/delaunay" + exampleUrl="/delaunay-triangulation" tileStyles={tileStyles} detailsStyles={detailsStyles} /> diff --git a/packages/visx-demo/src/components/Gallery/index.tsx b/packages/visx-demo/src/components/Gallery/index.tsx index 0cf3b6602..3cf8fe1bb 100644 --- a/packages/visx-demo/src/components/Gallery/index.tsx +++ b/packages/visx-demo/src/components/Gallery/index.tsx @@ -15,7 +15,7 @@ import * as BarsTile from './BarsTile'; import * as BrushTile from './BrushTile'; import * as ChordTile from './ChordTile'; import * as CurvesTile from './CurvesTile'; -import * as DelaunayTile from './DelaunayTile'; +import * as DelaunayTile from './DelaunayTriangulationTile'; import * as DelaunayVoronoiTile from './DelaunayVoronoiTile'; import * as DendrogramsTile from './DendrogramsTile'; import * as DotsTile from './DotsTile'; diff --git a/packages/visx-demo/src/pages/delaunay-triangulation.tsx b/packages/visx-demo/src/pages/delaunay-triangulation.tsx new file mode 100644 index 000000000..1d2149011 --- /dev/null +++ b/packages/visx-demo/src/pages/delaunay-triangulation.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import DelaunayTriangulation from '../sandboxes/visx-delaunay-triangulation/Example'; +import packageJson from '../sandboxes/visx-delaunay-triangulation/package.json'; +import Show from '../components/Show'; +import DelaunayTriangulationSource from '!!raw-loader!../sandboxes/visx-delaunay-triangulation/Example'; + +function DelaunayTriangulationPage() { + return ( + + {DelaunayTriangulationSource} + + ); +} +export default DelaunayTriangulationPage; diff --git a/packages/visx-demo/src/pages/delaunay.tsx b/packages/visx-demo/src/pages/delaunay.tsx deleted file mode 100644 index 4e7e4ca99..000000000 --- a/packages/visx-demo/src/pages/delaunay.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import DelaunayChart from '../sandboxes/visx-delaunay/Example'; -import packageJson from '../sandboxes/visx-delaunay/package.json'; -import Show from '../components/Show'; -import DelaunayChartSource from '!!raw-loader!../sandboxes/visx-delaunay/Example'; - -function DelaunayPage() { - return ( - - {DelaunayChartSource} - - ); -} -export default DelaunayPage; diff --git a/packages/visx-demo/src/pages/docs/delaunay.tsx b/packages/visx-demo/src/pages/docs/delaunay.tsx index 807114482..b400c6743 100644 --- a/packages/visx-demo/src/pages/docs/delaunay.tsx +++ b/packages/visx-demo/src/pages/docs/delaunay.tsx @@ -4,12 +4,12 @@ import Polygon from '../../../../visx-delaunay/src/components/Polygon'; import delaunay from '../../../../visx-delaunay/src/delaunay'; import voronoi from '../../../../visx-delaunay/src/voronoi'; import DocPage from '../../components/DocPage'; -import DelaunayTile from '../../components/Gallery/DelaunayTile'; +import DelaunayTriangulationTile from '../../components/Gallery/DelaunayTriangulationTile'; import DelaunayVoronoiTile from '../../components/Gallery/DelaunayVoronoiTile'; const components = [delaunay, voronoi, Polygon]; -const examples = [DelaunayVoronoiTile, DelaunayTile]; +const examples = [DelaunayVoronoiTile, DelaunayTriangulationTile]; function DelaunayDocs() { return ( diff --git a/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts b/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts index af2642bcd..78dccd499 100644 --- a/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts +++ b/packages/visx-demo/src/sandboxes/exampleToVisxDependencyLookup.ts @@ -9,7 +9,7 @@ import barstackHorizontalPackageJson from './visx-barstack-horizontal/package.js import brushPackageJson from './visx-brush/package.json'; import chordPackageJson from './visx-chord/package.json'; import curvePackageJson from './visx-curve/package.json'; -import delaunayPackageJson from './visx-delaunay/package.json'; +import delaunayPackageJson from './visx-delaunay-triangulation/package.json'; import delaunayVoronoiPackageJson from './visx-delaunay-voronoi/package.json'; import dendrogramPackageJson from './visx-dendrogram/package.json'; import dotsPackageJson from './visx-dots/package.json'; diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx similarity index 97% rename from packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx rename to packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx index 8a1a80385..b227f5b1f 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx @@ -27,13 +27,13 @@ const defaultMargin = { bottom: 92, }; -export type DelaunayProps = { +export type DelaunayTriangulationProps = { width: number; height: number; margin?: { top: number; right: number; bottom: number; left: number }; }; -function Example({ width, height, margin = defaultMargin }: DelaunayProps) { +function Example({ width, height, margin = defaultMargin }: DelaunayTriangulationProps) { const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/index.tsx similarity index 100% rename from packages/visx-demo/src/sandboxes/visx-delaunay/index.tsx rename to packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/index.tsx diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/package.json b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/package.json similarity index 79% rename from packages/visx-demo/src/sandboxes/visx-delaunay/package.json rename to packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/package.json index 51bf88d81..a917a1beb 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay/package.json +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/package.json @@ -1,6 +1,6 @@ { - "name": "@visx/demo-delaunay", - "description": "Standalone visx delaunay demo.", + "name": "@visx/demo-delaunay-triangulation", + "description": "Standalone visx delaunay triangulation demo.", "main": "index.tsx", "private": true, "dependencies": { @@ -24,6 +24,7 @@ "d3", "react", "visx", - "delaunay" + "delaunay", + "triangulation" ] } diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay/sandbox-styles.css b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/sandbox-styles.css similarity index 100% rename from packages/visx-demo/src/sandboxes/visx-delaunay/sandbox-styles.css rename to packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/sandbox-styles.css diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json index a059f8d47..c56e3815e 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-voronoi/package.json @@ -1,6 +1,6 @@ { - "name": "@visx/demo-delaunay", - "description": "Standalone visx delaunay demo.", + "name": "@visx/demo-delaunay-voronoi", + "description": "Standalone @visx/delaunay voronoi demo.", "main": "index.tsx", "private": true, "dependencies": { diff --git a/packages/visx-demo/tsconfig.json b/packages/visx-demo/tsconfig.json index 596ea0661..47aeec244 100644 --- a/packages/visx-demo/tsconfig.json +++ b/packages/visx-demo/tsconfig.json @@ -12,14 +12,13 @@ ], "module": "esnext", "moduleResolution": "node", - "composite": false, + "composite": true, "outDir": "lib", - "resolveJsonModule": true, + "resolveJsonModule": false, "rootDir": "src", "skipLibCheck": true, "strict": false, - "target": "es5", - "noEmit": true + "target": "es5" }, "exclude": [ "lib", From bf4b1d81b768397d6eeb5df5affa43109080f21e Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sun, 26 Mar 2023 13:00:43 -0700 Subject: [PATCH 09/18] feat(delaunay); Update TS references --- packages/visx-visx/tsconfig.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/visx-visx/tsconfig.json b/packages/visx-visx/tsconfig.json index 2ec3dc58f..4d4c129e9 100644 --- a/packages/visx-visx/tsconfig.json +++ b/packages/visx-visx/tsconfig.json @@ -33,6 +33,9 @@ { "path": "../visx-curve" }, + { + "path": "../visx-delaunay" + }, { "path": "../visx-drag" }, From f7dbabc5a69a1d281ac3eff1781ad4c06886429a Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sun, 26 Mar 2023 20:04:49 -0700 Subject: [PATCH 10/18] feat(delaunay): Add ESM-only dependencies to next.config.ts --- packages/visx-demo/next.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/visx-demo/next.config.js b/packages/visx-demo/next.config.js index 85fee3638..13c6c586a 100644 --- a/packages/visx-demo/next.config.js +++ b/packages/visx-demo/next.config.js @@ -9,11 +9,14 @@ const isProd = process.env.NODE_ENV === 'production'; const withTM = transpileModules([ 'd3-array', 'd3-color', + 'd3-delaunay', 'd3-format', 'd3-interpolate', 'd3-time', 'd3-time-format', + 'delaunator', 'internmap', + 'robust-predicates' ]); const nextConfig = withTM({ From fb063353ddc497485f80e60a5368b03a93d880f1 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sun, 26 Mar 2023 20:04:49 -0700 Subject: [PATCH 11/18] feat(delaunay): Add ESM-only dependencies to next.config.ts --- packages/visx-demo/next.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-demo/next.config.js b/packages/visx-demo/next.config.js index 13c6c586a..56b1c224e 100644 --- a/packages/visx-demo/next.config.js +++ b/packages/visx-demo/next.config.js @@ -16,7 +16,7 @@ const withTM = transpileModules([ 'd3-time-format', 'delaunator', 'internmap', - 'robust-predicates' + 'robust-predicates', ]); const nextConfig = withTM({ From 6d38e8047b0b429c37e3bd27955f6760db84042b Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Sun, 14 May 2023 12:39:15 -0700 Subject: [PATCH 12/18] Trigger build 1 --- packages/visx-delaunay/Readme.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/visx-delaunay/Readme.md b/packages/visx-delaunay/Readme.md index c23bebb50..0fd48f47a 100644 --- a/packages/visx-delaunay/Readme.md +++ b/packages/visx-delaunay/Readme.md @@ -63,6 +63,5 @@ return ( ) ``` -For more advanced usage with events, see [this example](https://airbnb.io/visx/delaunay). Additional -information about the voronoi diagram API can be found in the +Additional information about the voronoi diagram API can be found in the [d3-delaunay documentation](https://github.com/d3/d3-delaunay#voronoi). From 62f944e5da31c57521ccaf54750f04b08b71e2bc Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Wed, 5 Jul 2023 22:19:27 -0700 Subject: [PATCH 13/18] feat(delaunay): Address pull request comments * Change d3-delaunay references to @visx/vendor package. * Delete unnecessary yarn.lock file and visx-demo.html --- packages/sizes.json | 2 +- packages/visx-delaunay/package.json | 3 +- packages/visx-delaunay/src/delaunay.ts | 2 +- packages/visx-delaunay/src/voronoi.ts | 2 +- packages/visx-delaunay/yarn.lock | 92 ------------------- .../public/static/docs/visx-demo.html | 45 --------- packages/visx-vendor/package.json | 2 + yarn.lock | 12 +-- 8 files changed, 12 insertions(+), 148 deletions(-) delete mode 100644 packages/visx-delaunay/yarn.lock delete mode 100644 packages/visx-demo/public/static/docs/visx-demo.html diff --git a/packages/sizes.json b/packages/sizes.json index de188fdde..251799c34 100644 --- a/packages/sizes.json +++ b/packages/sizes.json @@ -1 +1 @@ -{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-demo":{"esm":0,"lib":36504},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-scale":{"esm":18649,"lib":30334},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":15233,"lib":21734},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178152,"lib":239950},"visx-zoom":{"esm":16239,"lib":19297}} +{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-delaunay":{"esm":2599,"lib":3428},"visx-demo":{"esm":0,"lib":36731},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-sankey":{"esm":15079,"lib":18842},"visx-scale":{"esm":18870,"lib":30555},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":15233,"lib":21734},"visx-vendor":{"esm":2257,"lib":2446},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178204,"lib":240002},"visx-zoom":{"esm":16239,"lib":19297}} \ No newline at end of file diff --git a/packages/visx-delaunay/package.json b/packages/visx-delaunay/package.json index 4469ad668..fb5f793df 100644 --- a/packages/visx-delaunay/package.json +++ b/packages/visx-delaunay/package.json @@ -31,10 +31,9 @@ "access": "public" }, "dependencies": { - "@types/d3-delaunay": "^6.0.1", "@types/react": "*", + "@visx/vendor": "3.2.0", "classnames": "^2.3.1", - "d3-delaunay": "^6.0.2", "prop-types": "^15.6.1" }, "peerDependencies": { diff --git a/packages/visx-delaunay/src/delaunay.ts b/packages/visx-delaunay/src/delaunay.ts index 53b6fe733..de9a4244f 100644 --- a/packages/visx-delaunay/src/delaunay.ts +++ b/packages/visx-delaunay/src/delaunay.ts @@ -1,4 +1,4 @@ -import { Delaunay } from 'd3-delaunay'; +import { Delaunay } from '@visx/vendor/d3-delaunay'; interface Config { /** The data for the delaunay triangulation */ diff --git a/packages/visx-delaunay/src/voronoi.ts b/packages/visx-delaunay/src/voronoi.ts index 5162d6f20..d8e870df0 100644 --- a/packages/visx-delaunay/src/voronoi.ts +++ b/packages/visx-delaunay/src/voronoi.ts @@ -1,4 +1,4 @@ -import { Delaunay } from 'd3-delaunay'; +import { Delaunay } from '@visx/vendor/d3-delaunay'; const CLIP_PADDING = 1; diff --git a/packages/visx-delaunay/yarn.lock b/packages/visx-delaunay/yarn.lock deleted file mode 100644 index 176f7cf8e..000000000 --- a/packages/visx-delaunay/yarn.lock +++ /dev/null @@ -1,92 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -"@types/d3-delaunay@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41" - integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ== - -"@types/d3-voronoi@^1.1.9": - version "1.1.9" - resolved "https://registry.yarnpkg.com/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz#7bbc210818a3a5c5e0bafb051420df206617c9e5" - integrity sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ== - -"@types/prop-types@*": - version "15.7.5" - resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" - integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== - -"@types/react@*": - version "18.0.28" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065" - integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - -"@types/scheduler@*": - version "0.16.2" - resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" - integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== - -classnames@^2.3.1: - version "2.3.2" - resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" - integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== - -csstype@^3.0.2: - version "3.1.1" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" - integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== - -d3-delaunay@^6.0.2: - version "6.0.2" - resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92" - integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ== - dependencies: - delaunator "5" - -delaunator@5: - version "5.0.0" - resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b" - integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw== - dependencies: - robust-predicates "^3.0.0" - -"js-tokens@^3.0.0 || ^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" - integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== - -loose-envify@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" - integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== - dependencies: - js-tokens "^3.0.0 || ^4.0.0" - -object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== - -prop-types@^15.6.1: - version "15.8.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" - integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== - dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.13.1" - -react-is@^16.13.1: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" - integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== - -robust-predicates@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a" - integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g== diff --git a/packages/visx-demo/public/static/docs/visx-demo.html b/packages/visx-demo/public/static/docs/visx-demo.html deleted file mode 100644 index 7e3fd2b37..000000000 --- a/packages/visx-demo/public/static/docs/visx-demo.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - -
    -
    -
    - - - Star -
    -
    -
    -
    -
    - -
    -
    -

    @visx/demo

    -

    https://airbnb.io/visx/gallery

    -

    - - - -

    - - -
    -
    - - \ No newline at end of file diff --git a/packages/visx-vendor/package.json b/packages/visx-vendor/package.json index acbde173c..e0e319736 100644 --- a/packages/visx-vendor/package.json +++ b/packages/visx-vendor/package.json @@ -15,6 +15,7 @@ "dependencies": { "@types/d3-array": "3.0.3", "@types/d3-color": "3.1.0", + "@types/d3-delaunay": "6.0.1", "@types/d3-format": "3.0.1", "@types/d3-interpolate": "3.0.1", "@types/d3-scale": "4.0.2", @@ -22,6 +23,7 @@ "@types/d3-time-format": "2.1.0", "d3-array": "3.2.1", "d3-color": "3.1.0", + "d3-delaunay": "6.0.2", "d3-format": "3.1.0", "d3-interpolate": "3.0.1", "d3-scale": "4.0.2", diff --git a/yarn.lock b/yarn.lock index 50d1b2fa8..fea3903ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2678,16 +2678,16 @@ resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-1.2.2.tgz#80cf7cfff7401587b8f89307ba36fe4a576bc7cf" integrity sha512-6pBxzJ8ZP3dYEQ4YjQ+NVbQaOflfgXq/JbDiS99oLobM2o72uAST4q6yPxHv6FOTCRC/n35ktuo8pvw/S4M7sw== -"@types/d3-delaunay@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41" - integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ== - "@types/d3-color@3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4" integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA== +"@types/d3-delaunay@6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41" + integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ== + "@types/d3-format@3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d" @@ -5091,7 +5091,7 @@ d3-color@1: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== -d3-delaunay@^6.0.2: +d3-delaunay@6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92" integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ== From 260de7ad6b284f66658754e7b2fc79d450f8d516 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Wed, 5 Jul 2023 22:35:18 -0700 Subject: [PATCH 14/18] Update tsconfig references. --- packages/visx-delaunay/tsconfig.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/visx-delaunay/tsconfig.json b/packages/visx-delaunay/tsconfig.json index b2c72804c..484b21590 100644 --- a/packages/visx-delaunay/tsconfig.json +++ b/packages/visx-delaunay/tsconfig.json @@ -14,5 +14,9 @@ "types/**/*", "../../types/**/*" ], - "references": [] + "references": [ + { + "path": "../visx-vendor" + } + ] } \ No newline at end of file From 593097e198aa69c29cfaf781ed1c495afb8cf412 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Thu, 6 Jul 2023 17:47:59 -0700 Subject: [PATCH 15/18] Fix delaunay triangulation closest point calculation. --- .../src/sandboxes/visx-delaunay-triangulation/Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx index b227f5b1f..66abcf506 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx @@ -67,7 +67,7 @@ function Example({ width, height, margin = defaultMargin }: DelaunayTriangulatio const point = localPoint(svgRef.current, event); if (!point) return; - const closest = delaunayDiagram.find(point.x, point.y); + const closest = delaunayDiagram.find(point.x - margin.left, point.y - margin.top); setHoveredId(data[closest].id); }} onMouseLeave={() => { From 81892669cf7121be4b5ebdaa51df322fe0c74add Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Thu, 6 Jul 2023 17:51:42 -0700 Subject: [PATCH 16/18] Update packages sizes. --- packages/sizes.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sizes.json b/packages/sizes.json index 251799c34..a407abdb0 100644 --- a/packages/sizes.json +++ b/packages/sizes.json @@ -1 +1 @@ -{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-delaunay":{"esm":2599,"lib":3428},"visx-demo":{"esm":0,"lib":36731},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-sankey":{"esm":15079,"lib":18842},"visx-scale":{"esm":18870,"lib":30555},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":15233,"lib":21734},"visx-vendor":{"esm":2257,"lib":2446},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178204,"lib":240002},"visx-zoom":{"esm":16239,"lib":19297}} \ No newline at end of file +{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-delaunay":{"esm":2599,"lib":3428},"visx-demo":{"esm":0,"lib":36731},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-scale":{"esm":18870,"lib":30555},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":15233,"lib":21734},"visx-vendor":{"esm":2257,"lib":2446},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178204,"lib":240002},"visx-zoom":{"esm":16239,"lib":19297}} \ No newline at end of file From 63d7f5e51d6be21fb27b0b6834cf5378522aee61 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Mon, 10 Jul 2023 20:12:38 -0700 Subject: [PATCH 17/18] Remove Voronoi tile from gallery and update jest config. --- jest.config.js | 2 +- packages/sizes.json | 2 +- packages/visx-demo/src/components/Gallery/index.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/jest.config.js b/jest.config.js index 7f2687dd7..bd632fc5b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -44,6 +44,6 @@ module.exports = { verbose: false, testPathIgnorePatterns: ['/packages/visx-demo'], transformIgnorePatterns: [ - 'node_modules/(?!(d3-(array|color|delaunay|format|interpolate|scale|time|time-format)|delaunator|internmap|robust-predicates)/)', + 'node_modules/(?!(d3-(array|color|format|interpolate|scale|time|time-format)|delaunator|internmap|robust-predicates)/)', ], }; diff --git a/packages/sizes.json b/packages/sizes.json index a407abdb0..136460f86 100644 --- a/packages/sizes.json +++ b/packages/sizes.json @@ -1 +1 @@ -{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-delaunay":{"esm":2599,"lib":3428},"visx-demo":{"esm":0,"lib":36731},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-scale":{"esm":18870,"lib":30555},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":15233,"lib":21734},"visx-vendor":{"esm":2257,"lib":2446},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178204,"lib":240002},"visx-zoom":{"esm":16239,"lib":19297}} \ No newline at end of file +{"visx-annotation":{"esm":31002,"lib":43431},"visx-axis":{"esm":21699,"lib":26304},"visx-bounds":{"esm":2948,"lib":3371},"visx-brush":{"esm":54136,"lib":58297},"visx-chord":{"esm":3478,"lib":4691},"visx-clip-path":{"esm":4524,"lib":6062},"visx-curve":{"esm":323,"lib":1462},"visx-demo":{"esm":0,"lib":36517},"visx-drag":{"esm":12756,"lib":14402},"visx-event":{"esm":3878,"lib":5194},"visx-geo":{"esm":13515,"lib":16741},"visx-glyph":{"esm":15177,"lib":19992},"visx-gradient":{"esm":18202,"lib":22847},"visx-grid":{"esm":18982,"lib":22665},"visx-group":{"esm":1648,"lib":2267},"visx-heatmap":{"esm":7394,"lib":8731},"visx-hierarchy":{"esm":12093,"lib":17910},"visx-legend":{"esm":26944,"lib":34024},"visx-marker":{"esm":9152,"lib":11350},"visx-mock-data":{"esm":326040,"lib":329480},"visx-network":{"esm":4674,"lib":6809},"visx-pattern":{"esm":11689,"lib":15763},"visx-point":{"esm":1003,"lib":1818},"visx-react-spring":{"esm":14000,"lib":17725},"visx-responsive":{"esm":12972,"lib":16175},"visx-scale":{"esm":18870,"lib":30555},"visx-shape":{"esm":86912,"lib":108820},"visx-stats":{"esm":13738,"lib":15320},"visx-text":{"esm":8567,"lib":10114},"visx-threshold":{"esm":2907,"lib":3806},"visx-tooltip":{"esm":15233,"lib":21734},"visx-vendor":{"esm":2002,"lib":2170},"visx-visx":{"esm":1524,"lib":4487},"visx-voronoi":{"esm":2314,"lib":3021},"visx-wordcloud":{"esm":2620,"lib":3455},"visx-xychart":{"esm":178370,"lib":240169},"visx-zoom":{"esm":16239,"lib":19297}} \ No newline at end of file diff --git a/packages/visx-demo/src/components/Gallery/index.tsx b/packages/visx-demo/src/components/Gallery/index.tsx index 3cf8fe1bb..d54d24e4b 100644 --- a/packages/visx-demo/src/components/Gallery/index.tsx +++ b/packages/visx-demo/src/components/Gallery/index.tsx @@ -46,7 +46,6 @@ import * as ThresholdTile from './ThresholdTile'; import * as TooltipTile from './TooltipTile'; import * as TreemapTile from './TreemapTile'; import * as TreesTile from './TreesTile'; -import * as VoronoiTile from './VoronoiTile'; import * as WordcloudTile from './WordcloudTile'; import * as XYChartTile from './XYChartTile'; import * as ZoomITile from './ZoomITile'; @@ -102,7 +101,6 @@ export const tiles = [ TextTile, TooltipTile, TreesTile, - VoronoiTile, WordcloudTile, ]; From 6023a254b22f02495a09e00ce504389968535378 Mon Sep 17 00:00:00 2001 From: Shea Janke Date: Mon, 10 Jul 2023 20:25:58 -0700 Subject: [PATCH 18/18] Retrigger build --- .../src/sandboxes/visx-delaunay-triangulation/Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx index 66abcf506..72e13d20d 100644 --- a/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-delaunay-triangulation/Example.tsx @@ -63,7 +63,7 @@ function Example({ width, height, margin = defaultMargin }: DelaunayTriangulatio onMouseMove={(event) => { if (!svgRef.current) return; - // find the nearest point to the current mouse position + // find the nearest point to the current mouse position. const point = localPoint(svgRef.current, event); if (!point) return;