Liebesfreud (토론 | 기여) 잔글 (다크 모드 대응) |
Text-Justify (토론 | 기여) (→사용 방법) |
||
404번째 줄: | 404번째 줄: | ||
== 사용 방법 == | == 사용 방법 == | ||
*[https://vega.github.io/vega/examples/ Example Gallery]와 [https://vega.github.io/vega/tutorials/ Tutorials]에서 최신 Vega 예제를 확인할 수 있으며 [https://vega.github.io/editor/#/ Vega Editor]에서 연습할 수 있다. | *[https://vega.github.io/vega/examples/ Example Gallery]와 [https://vega.github.io/vega/tutorials/ Tutorials]에서 최신 Vega 예제를 확인할 수 있으며 [https://vega.github.io/editor/#/ Vega Editor]에서 연습할 수 있다. | ||
*[[리브레 위키]]에서 사용하기 위해서는 확장 기능이 2020년 3월 기준 Vega 2를 지원하므로<ref>[https://phabricator.wikimedia.org/T223026 ⚓ T223026 Add Vega 4 support to MediaWiki Graph extension]</ref> Vega 2 [https://vega.github.io/vega-editor/ Vega Editor]를 참조·사용해야 한다. | *[[리브레 위키]]에서 사용하기 위해서는 확장 기능이 2020년 3월 기준 Vega 2를 지원하므로<ref>[https://phabricator.wikimedia.org/T223026 ⚓ T223026 Add Vega 4 support to MediaWiki Graph extension]</ref> Vega 2 [https://vega.github.io/vega-editor/ Vega Editor]와 [https://github.com/nyurik/vega/wiki 문서]를 참조·사용해야 한다. | ||
*데이터는 항목별로 Vega 문법상에서 적는 <code>values</code>, [[JSON]] 혹은 CSV 파일과 같은 [[URL]]을 가져오는 <code>url</code>, 파생된 값인 <code>source</code>를 사용할 수 있다. | *데이터는 항목별로 Vega 문법상에서 적는 <code>values</code>, [[JSON]] 혹은 CSV 파일과 같은 [[URL]]을 가져오는 <code>url</code>, 파생된 값인 <code>source</code>를 사용할 수 있다. | ||
**필요에 따라 문법에 포함된 <code>values</code>의 값(<code><nowiki>[</nowiki></code><code><nowiki>]</nowiki></code>)을 URL 링크로 분리하거나, URL로 링크된 값을 <code>values</code>로 통합할 수 있다. | **필요에 따라 문법에 포함된 <code>values</code>의 값(<code><nowiki>[</nowiki></code><code><nowiki>]</nowiki></code>)을 URL 링크로 분리하거나, URL로 링크된 값을 <code>values</code>로 통합할 수 있다. |
2020년 11월 11일 (수) 22:49 판
Vega(베가)는 그래프·차트와 같은 자료 시각화를 위한 문법이다. Vega를 통해 웹 페이지상에서 캔버스 및 SVG 차트를 생성할 수 있으며, 막대·꺾은선과 같은 그래프 외에도 반응형(인터랙티브) 차트, 지도와 같은 배경 기반의 차트를 생성할 수 있다.
반응형 Vega 차트의 예시. 각 점을 끌어 변화를 확인할 수 있다.[1] |
리브레 위키에서의 사용
2018년 12월 22일 업데이트를 통해 그래프 확장 기능이 추가되어 리브레 위키에서 Vega를 사용해 문서에 차트를 삽입할 수 있게 되었다.[2] <graph></graph>
태그 안에서 Vega 2[3] 문법을 입력하는 것으로 사용할 수 있다.
분류:그래프가 있는 문서에서는 리브레 위키 내 그래프가 사용된 문서를 확인할 수 있으며, 그래프 연습장에서는 코드 편집기로 입력된 차트를 실시간으로 보며 편집할 수 있다. 미디어위키 위키의 Extension:Graph와 Extension:Graph/Demo에서는 미디어위키 위키에서 활용된 예제를 확인할 수 있다.
사용 방법
- Example Gallery와 Tutorials에서 최신 Vega 예제를 확인할 수 있으며 Vega Editor에서 연습할 수 있다.
- 리브레 위키에서 사용하기 위해서는 확장 기능이 2020년 3월 기준 Vega 2를 지원하므로[4] Vega 2 Vega Editor와 문서를 참조·사용해야 한다.
- 데이터는 항목별로 Vega 문법상에서 적는
values
, JSON 혹은 CSV 파일과 같은 URL을 가져오는url
, 파생된 값인source
를 사용할 수 있다.- 필요에 따라 문법에 포함된
values
의 값([
]
)을 URL 링크로 분리하거나, URL로 링크된 값을values
로 통합할 수 있다.
- 필요에 따라 문법에 포함된
scales
내에"round": true
를 삽입하면 차트의 가장자리가 픽셀 경계에 스냅되므로 수치에 따라 흐릿하게 보이지 않는다.
관련 사이트
- 웹사이트
- Vega Editor
- Vega Editor(Vega 2, Vega-Lite 1)
- GitHub
각주
- ↑ 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).
- ↑ 위키방 - 리브레 위키 2018년 12월 22일 업데이트, 2018.12.22.
- ↑ 2020년 3월 기준. 최신 Vega는 확장 기능상에서 추후 지원된 이후 사용할 수 있다.
- ↑ ⚓ T223026 Add Vega 4 support to MediaWiki Graph extension