웹에서 수학을 시각화하기 위해 grafar를 만들었습니다.

수학적(및 데이터) 시각화를 위해 내 라이브러리를 오픈소스화했습니다grafar. 브라우저에서 함수를 플롯해야 하거나 많은 데이터가 포함된 차트를 그려야 하는 경우 유용할 수 있으며 그 이유는 다음과 같습니다.

WebGL을 통한 전체 3D 지원

단순 API

손쉬운 애니메이션 및 상호 작용을 위한 반응형 계산

시작하는 것이 얼마나 쉬운지 보여주기 위해 parametric helix을 함께 플로팅합니다. a codesandbox에서 함께 연주할 수 있습니다.

파라메트릭 표면에는 2개의 매개변수가 있습니다. 이를 p와 q라고 합니다.

const p = grafar.range(-2, 2, 500).select();
const q = grafar.range(0, 1, 2).select();

각각을 범위로 정의합니다: [-2, 2]의 p, [0, 1]의 q. A 이 점, p 및 q는 기본적으로 숫자 배열을 보유하며 그다지 멋진 것은 없습니다.

이제 이러한 매개변수를 일반 x,y,z 좌표에 매핑합니다.

const xp = grafar.map([p, q], (p, q) => Math.cos(8 * p) * q);
const yp = grafar.map([p, q], (p, q) => Math.sin(8 * p) * q);

여기서 깔끔한 것은 grafar가 p와 q가 모두 자유도를 나타내고 p와 q의 모든 조합에 대해 함수를 호출한다는 것을 아는 방법입니다. z는 어떻습니까? p와 같으므로 그럴 필요가 없습니다map.

이제 페이지에 그래프만 그리면 됩니다. 이를 위해 일부 DOM 노드에 panel를 생성한 다음 pin 우리의 (x,y,z)를 생성합니다.

const container = document.getElementById("app");
const panel = grafar.panel(container);
grafar.pin([xp, yp, p], panel);

7줄의 코드로 얻은 결과는 다음과 같습니다.



관심 있는? 자세히 알아보기in the docs