Vega (문법): 두 판 사이의 차이

잔글 (불필요한 공백 제거)
잔글 (불필요한 공백 제거)
7번째 줄: 7번째 줄:
   "width": 500,
   "width": 500,
   "height": 300,
   "height": 300,
   "data": [
   "data": [
     {
     {
111번째 줄: 110번째 줄:
     }
     }
   ],
   ],
   "signals": [
   "signals": [
     {"name": "minYear", "init": 1955},
     {"name": "minYear", "init": 1955},
244번째 줄: 242번째 줄:
     }
     }
   ],
   ],
   "scales": [
   "scales": [
     {
     {
273번째 줄: 270번째 줄:
     }
     }
   ],
   ],
   "axes": [
   "axes": [
     {
     {
288번째 줄: 284번째 줄:
     }
     }
   ],
   ],
   "legends": [{
   "legends": [{
     "fill": "c",
     "fill": "c",
298번째 줄: 293번째 줄:
     }
     }
   }],
   }],
   "marks": [
   "marks": [
     {
     {

2021년 6월 16일 (수) 03:05 판

Vega 프로젝트 로고.svg

Vega(베가)는 그래프·차트와 같은 자료 시각화를 위한 문법이다. Vega를 통해 웹 페이지상에서 캔버스 및 SVG 차트를 생성할 수 있으며, 막대·꺾은선과 같은 그래프 외에도 반응형(인터랙티브) 차트, 지도와 같은 배경 기반의 차트를 생성할 수 있다.

반응형 Vega 차트의 예시. 각 점을 끌어 변화를 확인할 수 있다.[1]

리브레 위키에서의 사용

2018년 12월 22일 업데이트를 통해 그래프 확장 기능이 추가되어 리브레 위키에서 Vega를 사용해 문서에 차트를 삽입할 수 있게 되었다.[2] <graph></graph> 태그 안에서 Vega 2[3] 문법을 입력하는 것으로 사용할 수 있다.

분류:그래프가 있는 문서에서는 리브레 위키 내 그래프가 사용된 문서를 확인할 수 있으며, 그래프 연습장에서는 코드 편집기로 입력된 차트를 실시간으로 보며 편집할 수 있다. 미디어위키 위키의 Extension:GraphExtension:Graph/Demo에서는 미디어위키 위키에서 활용된 예제를 확인할 수 있다.

사용 방법

  • 데이터는 항목별로 Vega 문법상에서 적는 values, JSON 혹은 CSV 파일과 같은 URL을 가져오는 url, 파생된 값인 source를 사용할 수 있다.
    • 필요에 따라 문법에 포함된 values의 값([])을 URL 링크로 분리하거나, URL로 링크된 값을 values로 통합할 수 있다.
  • scales 내에 "round": true를 삽입하면 차트의 가장자리가 픽셀 경계에 스냅되므로 수치에 따라 흐릿하게 보이지 않는다.

관련 사이트

각주

  1. Vega Editor. BSD 3-Clause "New" or "Revised" License. Based on DimpVis by Brittany Kondo and Christopher Collins. University of Ontario Institute of Technology (2014).
  2. 위키방 - 리브레 위키 2018년 12월 22일 업데이트, 2018.12.22.
  3. 2020년 3월 기준. 최신 Vega는 확장 기능상에서 추후 지원된 이후 사용할 수 있다.
  4. ⚓ T223026 Add Vega 4 support to MediaWiki Graph extension