안녕하세요. 데이터 시각화를 연구하는 연구원입니다.
차트를 한 단계씩 만들고 수정하는 과정을 코드로 남기는 오픈소스 라이브러리 ggaction을 소개합니다.
차트를 만들다 보면 처음부터 완성된 그림을 정하기보다는, "산점도를 그려보자 --> 그룹별로 색을 나누자 --> 점을 반투명하게 하자 --> 회귀선을 추가하자"처럼 생각이 이어집니다. 그런데 이런 작은 변경을 코드에 반영하려면 기존 명세의 여러 부분을 오가며 수정해야 할 때가 있습니다. 이런 문제는 사람이 코드를 짤 때는 물론, LLM 코딩 에이전트가 코드를 짤때도 속도를 느리게 만들고 정확도를 떨어뜨리는 문제입니다.
ggaction은 이 수정 과정 자체를 시각화 문법으로 표현해 보자는 시도입니다. ggplot2나 Vega-Lite가 주로 완성된 차트의 구조를 기술한다면, ggaction은 차트를 만드는 행동을 순서대로 연결합니다.
어떻게 쓰나요?
아래는 자동차 데이터로 산점도를 만들고, 점의 투명도를 바꾼 뒤 회귀선을 추가하는 흐름입니다. cars
는 데이터 행 객체들의 배열입니다.
import { chart } from "ggaction";
const program = chart()
.createData({ values: cars })
.createScatterPlot({
x: "Displacement",
y: "Acceleration",
color: "Origin",
guides: false
})
.editPointMark({ opacity: 0.35 })
.createRegression()
.createGuides();
기존 방식과 다른 점
차트 단위와 세부 요소 단위를 오갈 수 있습니다.createScatterPlot
으로 시작한 뒤, 점의 모양이나 축 눈금처럼 필요한 부분만 별도 행동으로 수정할 수 있습니다.**결과뿐 아니라 만드는 과정도 남습니다.**각 행동은 이전 상태를 바꾸지 않고 새 상태를 만들며, 고수준 행동이 내부에서 실행한 하위 행동도 추적할 수 있습니다. 차트가 어떤 단계를 거쳐 만들어졌는지 살펴볼 수 있는 구조입니다.**AI와 주고받으며 수정하는 흐름에도 유용합니다.**매번 전체 차트 명세를 다시 쓰는 대신 필요한 행동을 이어 붙이는 방식입니다. 이를 통해 AI도 쉽게 코드를 수정 및 이해할 수 있습니다.
써보기 / 현재 한계
-
설치:
npm install ggaction
-
문서와 차트 예제
-
GitHub · MIT 라이선스
-
설계 배경과 평가를 정리한 논문
현재 공개 버전은 0.0.17입니다. 기존 시각화 도구를 모두 대체하기보다는, 차트를 점진적으로 만들고 수정하는 또 다른 방식을 제안하는 프로젝트입니다. 한번 써보시고 피드백 남겨주시면 감사하겠습니다!