관찰 가능한 그래프: Neo4j로 GraphRAG 성능 극대화하기

gram을 사용해서 그래프를 만들고ObservableHQ에서 공유하거나,d3-gram을 사용해서 어디서든 그래프를 SVG로 렌더링 해보세요.

Gram을 사용하면 (a)–>(b)<–(c) 처럼 쉽게 그래프를 만들 수 있어요. 그런데 이걸로 뭘 할 수 있을까요? 그래프는 시각적인 데이터 구조잖아요. 당연히 d3.js를 사용해서 시각화할 수 있겠죠!

Gram: 데이터 그래프 형식

다음과 같이 편리한 통합 기능도 있답니다: d3그램. ObservableHQ에서 한번 연습해 볼까요?

제가 설명하는 대로 따라해 보세요

먼저 Observable이 뭔지 짧은 동영상을 시청해 보세요.

https://www.youtube.com/watch?v=FXZrX3nzKdo&feature=youtu.be

그리고 를 하려면 ObservableHQ에 로그인해야 해요. 진짜로 해보세요!

Observable – 함께 데이터로 세상을 이해하세요 / Observable

가장 먼저 노트북을 만들어야겠죠?

1. 오른쪽 상단에 있는 "새로 만들기" 버튼을 클릭하세요.
2. '# Observable Graph by ABK' 처럼 멋진 제목을 붙여주세요.

다음으로, gram을 파싱하고 그래프를 렌더링하는 `graphOf` 함수를 가져올 거예요.

1. '+' 버튼을 사용해서 새 블록을 만드세요.
2. 다음 코드를 복사해서 붙여넣으세요.
3. Shift-Return을 누르거나 실행 버튼을 눌러서 가져오기를 실행하세요.

import {graphOf} from “@akollegger/그래프 입력”

이제 그래프 시각화를 만드는 건 `graphOf` 함수를 호출하고 Cypher 쿼리 같은 gram 패턴을 전달하는 것만큼 쉬워요. 새 블록을 추가하고 다음을 시도해 보세요.

abc = graphOf("(a)-->(b)<--(c)");

깔끔하죠? `zoom` 수준과 `height`를 추가해서 시각화를 조금 더 조정할 수도 있어요.

abc = graphOf("(a)-->(b)<--(c)", {zoom:4, height: 60})

그래프 관찰하기

ABC가 뭘까요? `graphOf` 함수는 Observable View, 즉 현재 값을 가진 입력 요소에요. 슬라이더나 텍스트 입력 필드처럼 그래프 시각화를 사용할 수 있다는 뜻이죠.

`viewof`를 앞에 추가해서 `graphOf` 블록을 수정해 볼게요.

viewof abc = graphOf("(a)-->(b)<--(c)", {zoom:4, height: 60})

이번에는 `abc`만 포함하는 다른 블록을 추가해 보세요.

abc

해당 블록을 실행하면 결과가 객체라는 걸 알 수 있을 거예요. 이게 바로 입력 요소의 현재 값이죠. 여기에는 모든 `node`의 배열, `link` 배열, 그리고 현재 선택된 항목의 배열이 포함되어 있어요. Shift 키를 누른 채 그래프를 클릭하면 "선택된" 배열에 여러 `node`가 추가될 거예요.

Object {
 nodes: Array(3) [Object, Object, Object]
 links: Array(2) [Object, Object]
 selected: Array(1) [Object]
}

배열 요소는 원본 그래프 데이터와 함께 x, y 좌표와 같은 d3-js 속성을 혼합하는 객체에요. 그래프 데이터에 집중하기 위해서 다른 블록을 추가해 볼게요.

selectedNode = abc.selected.length == 0 ? {} : Object.getPrototypeOf(abc.selected[0])

훨씬 보기 좋죠? 이제 그래프 시각화에 영향을 주고 `selectedNode`에 표시되는 세부 정보를 그래프에 추가할 수 있어요.

이걸 한번 시도해 보세요:

viewof abc = graphOf("(a:Person {name:'ABK'})-->(b)<--(c)", 
  {zoom:4, height: 60})

이 모든 게 준비되면 graphOf()에 전달된 gram 문자열을 편집해서 여러분만의 그래프를 만들 수 있어요. 아니면 다음 링크에서 텍스트 필드를 추가할 수도 있고요. 양식 입력. 첨부된 파일이나 URL에서 로드하는 방법도 있답니다.

재미로 위키피디아 내용을 다시 만들어 봤는데, 한번 명명된 그래프 갤러리에서 확인해 보세요.

gram이 정말 유용하죠? 재미있게 사용해 보세요! 🙂

참고 자료:

d3그램 — d3로 렌더링을 구동하는 js 통합 라이브러리
ABK의 관찰 가능한 그래프 — 이 글에서 설명하는 전체 노트북
그래프의 그램 — gram과 그래프에 대한 노트 모음
@akollegger/그래프 입력 — 이 글에 사용된 유틸리티 기능을 제공하는 ObservableHQ 노트북

• d3그램
• ABK의 관찰 가능한 그래프

“ABK의 Observable Graph”는 Observable Notebook에서 Gram을 사용합니다.

---

• d3gram
• d3js
• gram
• ObservableHQ
• 관찰 가능 항목

---

에이치시스템즈의 LogTree는 Neo4j 기반 GraphRAG 플랫폼으로, 데이터를 자동으로 지식그래프화하고 자연어 질의로 즉시 답을 제공합니다.

👉 에이치시스템즈 홈페이지