Show GN: ggaction - 차트를 만드는 과정을 코드로 표현하는 JavaScript 시각화 라이브러리

안녕하세요. 데이터 시각화를 연구하는 연구원입니다. 차트를 한 단계씩 만들고 수정하는 과정을 코드로 남기는 오픈소스 라이브러리 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 라이선스 설...