Bias-chart

d3.js 기반 React 라이브러리 입니다.
npm package : https://www.npmjs.com/package/acryl-bias-chart
git-pages : https://dawson-park.github.io/bias-chart/

Installation

npm i acryl-bias-chart

Usage

Import

import { Bar } from "acryl-bias-chart";

Props

| Name | Type | Default | Description | |---------|--------------|-------------|--------------------| | data | number[][] | | 그래프를 나타내는데 사용될 데이터 | | id | string | undefined | 차트의 id | | xDomain | string[] | undefined | x축의 이름 | | zDomain | string[] | undefined | 데이터 그룹의 이름 | | width | string | '100%' | 차트의 너비 | | height | string | '100%' | 차트의 높이 | | label | string | undefined | y축의 라벨 |

Single Graph

const data = [
  [59, 84, 78, 63, 87, 89]
];

<div>
  <Bar id={"bar"} data={data} />
</div>

id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.

Multiple Graph

const data = [
  [59, 84, 78, 63, 87, 89],
  [66, 16, 60, 30, 130, 62],
];

<div>
  <Bar id={"bar"} data={data} />
</div>

xDomain 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
    
<div>
  <Bar id={"bar"} data={data} xDomain={xDomain} />
</div>

xDomain의 length는 data 1차원 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain 요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n으로 표시됩니다.

zDomain 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const zDomain = [ "Florida" ];
    
<div>
  <Bar id={"bar"} data={data} zDomain={zDomain} />
</div>

zDomain의 length는 반드시 data의 1차원 배열 수와 같아야합니다. 만약 그래프의 수가 위처럼 하나라면 zDomain 역시 하나여야합니다. 이보다 많거나 적다면 기본값인 Series n으로 표시됩니다.

label 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const label = "강우확률(%)";
    
<div>
  <Bar id={"bar"} data={data} label={label} />
</div>

width, height의 사용

<div>
  <Bar id={"bar"} data={data} width={"360px"} height={"400px"} />
</div>

width와 height에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.

Import

import { Line } from "acryl-bias-chart";

Props

| Name | Type | Default | Description | |---------|--------------|-------------|--------------------| | data | number[][] | | 그래프를 나타내는데 사용될 데이터 | | id | string | undefined | 차트의 id | | xDomain | string[] | undefined | x축의 이름 | | zDomain | string[] | undefined | 데이터 그룹의 이름 | | width | string | '100%' | 차트의 너비 | | height | string | '100%' | 차트의 높이 | | label | string | undefined | y축의 라벨 |

Single Graph

const data = [
  [59, 84, 78, 63, 87, 89]
];

<div>
  <Line id={"line"} data={data} />
</div>

id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.

Multiple Graph

const data = [
  [59, 84, 78, 63, 87, 89],
  [66, 16, 60, 30, 130, 62],
];

<div>
  <Line id={"line"} data={data} />
</div>

xDomain 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
    
<div>
  <Line id={"line"} data={data} xDomain={xDomain} />
</div>

xDomain의 length는 data 1차원 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain 요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n으로 표시됩니다.

zDomain 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const zDomain = [ "Florida" ];
    
<div>
  <Line id={"line"} data={data} zDomain={zDomain} />
</div>

zDomain의 length는 반드시 data의 1차원 배열 수와 같아야합니다. 만약 그래프의 수가 위처럼 하나라면 zDomain 역시 하나여야합니다. 이보다 많거나 적다면 기본값인 Series n으로 표시됩니다.

label 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const label = "강우확률(%)";
    
<div>
  <Line id={"line"} data={data} label={label} />
</div>

width, height의 사용

<div>
  <Line id={"line"} data={data} width={"360px"} height={"400px"} />
</div>

width와 height에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.

Import

import { Pie } from "acryl-bias-chart";

Props

| Name | Type | Default | Description | |---------|------------|-------------|--------------------| | data | number[] | | 그래프를 나타내는데 사용될 데이터 | | id | string | undefined | 차트의 id | | xDomain | string[] | undefined | x축의 이름 | | width | string | '100%' | 차트의 너비 | | height | string | '100%' | 차트의 높이 | | label | string | undefined | y축의 라벨 |

Single Graph

const data = [
    59, 84, 78, 63, 87, 89
];

<div>
  <Pie id={"pie"} data={data} />
</div>

id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.

xDomain 사용

const data = [
    59, 84, 78, 63, 87, 89
];

const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
    
<div>
  <Pie id={"pie"} data={data} xDomain={xDomain} />
</div>

xDomain의 length는 data 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain 요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n으로 표시됩니다.

label 사용

const data = [
    59, 84, 78, 63, 87, 89
];

const label = "강우확률(%)";
    
<div>
  <Pie id={"pie"} data={data} label={label} />
</div>

width, height의 사용

<div>
  <Pie id={"pie"} data={data} width={"360px"} height={"400px"} />
</div>

width와 height에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.

Import

import { Spider } from "acryl-bias-chart";

Props

| Name | Type | Default | Description | |---------|--------------|-------------|--------------------| | data | number[][] | | 그래프를 나타내는데 사용될 데이터 | | id | string | undefined | 차트의 id | | xDomain | string[] | undefined | x축의 이름 | | zDomain | string[] | undefined | 데이터 그룹의 이름 | | width | string | '100%' | 차트의 너비 | | height | string | '100%' | 차트의 높이 | | label | string | undefined | y축의 라벨 |

Single Graph

const data = [
  [59, 84, 78, 63, 87, 89]
];

<div>
  <Spider id={"spider"} data={data} />
</div>

id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.

Multiple Graph

const data = [
  [59, 84, 78, 63, 87, 89],
  [66, 16, 60, 30, 130, 62],
];

<div>
  <Spider id={"spider"} data={data} />
</div>

xDomain 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
    
<div>
  <Spider id={"spider"} data={data} xDomain={xDomain} />
</div>

xDomain의 length는 data 1차원 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain 요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n으로 표시됩니다.

zDomain 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const zDomain = [ "Florida" ];
    
<div>
  <Spider id={"spider"} data={data} zDomain={zDomain} />
</div>

zDomain의 length는 반드시 data의 1차원 배열 수와 같아야합니다. 만약 그래프의 수가 위처럼 하나라면 zDomain 역시 하나여야합니다. 이보다 많거나 적다면 기본값인 Series n으로 표시됩니다.

label 사용

const data = [
  [59, 84, 78, 63, 87, 89]
];

const label = "강우확률(%)";
    
<div>
  <Spider id={"spider"} data={data} label={label} />
</div>

width, height의 사용

<div>
  <Spider id={"spider"} data={data} width={"360px"} height={"400px"} />
</div>

width와 height에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.