도움말:그래프

큰숲백과에서는 Graph 확장기능을 사용해서 위키 내부에 그래프를 그릴 수 있습니다. 이 확장기능은 <graph> 태그를 이용해서 그리며, 그래프의 정보를 JSON 문자열을 통해 표현합니다. 따라서 그래프를 그릴 때에는 Sublime Text나 Visual Studio Code와 같은 텍스트 편집기를 활용하는 것도 도움이 됩니다. 그래프 확장기능은 Vega 기반으로 작성되었습니다. Vega Editor에서도 직접 그래프를 작성할 수 있습니다.

분류:그래프가 있는 문서에는 그래프가 사용된 문서가 표시되며, 그래프 연습장에서 편집되는 그래프를 실시간으로 미리보며 연습할 수 있습니다. 참고로 이 확장기능은 Vega 2 기반으로 최신 버전의 Vega와는 호환되지 않습니다. 따라서 Visual Studio Code의 확장기능을 이용해서 검사하는 것은 도움이 되지 않습니다.

그래프의 구성 요소

Vega Editor 막대그래프 예제에서 구성요소가 무엇인지 대략적으로 분석할 수 있습니다. 엄밀히 말해서는 막대그래프 유형을 지정하는 것은 아닌 data 오브젝트가 좌표값을 지정하고 scales 오브젝트가 데이터를 표현하는 모양을 지정합니다.

그래프 태그 설명

조건명	데이터 형식	설명
width	숫자	그래프의 가로 길이 픽셀값을 지정합니다.
height	숫자	그래프의 세로 길이 픽셀값을 지정합니다.
padding	오브젝트(키값 top, bottom, left, right)	그래프의 안쪽 여백 크기를 지정합니다.
data	리스트(하위 오브젝트는 아래 참조)	데이터 꾸러미의 값을 지정합니다. 데이터 꾸러미의 하위 오브젝트 형식은 아래 참조.
scales	리스트(하위 오브젝트는 아래 참조)	데이터 꾸러미의 형식을 지정합니다.
axes	리스트(하위 오브젝트는 아래 참조)	x축, y축의 디자인을 지정합니다.
legends	리스트(하위 오브젝트는 아래 참조)	범례 디자인을 지정합니다.
marks	리스트(하위 오브젝트는 아래 참조)	가장 중요한 부분으로 그래프의 디자인을 결정합니다.

data

그래프에서 사용하는 데이터값을 지정합니다. 리스트 형식으로 표현하며, 각 리스트에서는 다음과 같은 오브젝트를 원소로 지정합니다.

{
   "name" : "(데이터 이름)",
    "values": [(데이터를 저장한 리스트)],
    "source": (다른 데이터를 기반으로 변형할 때 다른 데이터 이름을 입력합니다.),
  "transform": [(변형시 사용하는 리스트)]
}

예제

vega editor에서 예제 설명. 예제를 통해 데이터의 의미를 설명합니다.

Falkensee시 인구

꺾은선그래프와 영역

그래프 모듈을 사용하는 방법

모듈:Graph와 이 모듈을 이용하는 틀인 {{차트}}, {{지도}}를 이용해서도 그래프를 작성할 수 있습니다.