Social Network Analysis - Graph Visualizer

사회 관계망 데이터를 쉽게 시각화하고 분석할 수 있는 웹 기반 도구입니다.

주요 기능

이 프로젝트는 세 가지 방법으로 데이터를 입력받아 그래프를 시각화합니다:

1. CSV 파일 업로드 (from-csv.html)

CSV 파일을 업로드하여 그래프를 생성합니다.

• 데이터 형식: CSV 파일의 각 열은 Source1, Source2, Weight 형식이어야 합니다
• 인코딩 지원: UTF-8, EUC-KR 등 다양한 인코딩 형식 지원
• 기능:
  • CSV 파일 선택 및 업로드
  • 업로드된 데이터 미리보기 (테이블 형태)
  • 데이터 검증 및 오류 메시지 표시
  • 그래프 시각화

2. 예시 데이터 사용 (from-sample.html)

미리 저장된 예시 데이터를 활용하여 그래프를 생성합니다.

• 제공 데이터:
  • Data 1: 마블 영화(~2019년)에 출연한 배우들의 네트워크
  • Data 2: 시흥 맛집 네트워크
  • Data 3: 별 그래프
  • Data 4: 마블 캐릭터 네트워크
  • Data 5: 왕좌의 게임 등장인물 네트워크
• 기능:
  • 버튼 클릭으로 예시 데이터 로드
  • 각 데이터에 대한 상세 설명 제공
  • 데이터 미리보기
  • 그래프 시각화

3. 테이블 직접 입력 (from-table.html)

웹 페이지에서 직접 데이터를 입력하여 그래프를 생성합니다.

• 기능:
  • 동적 테이블에 Source1, Source2, Weight 입력
  • 행 추가/삭제 기능
  • Tab 키로 빠른 입력 지원
  • 입력한 데이터를 CSV 파일로 다운로드
  • 실시간 그래프 업데이트

그래프 시각화 기능

모든 데이터 입력 방식에서 공통으로 제공되는 기능:

기본 시각화

• Force Atlas 2 레이아웃: 그래프 노드를 최적화된 위치에 배치
• 노드 크기 조정: 연결 중심성(Degree Centrality)에 따라 노드 크기 자동 조정
• 엣지 두께: 가중치(Weight)에 따라 엣지 두께 조정
• 인터랙티브 기능:
  • 노드에 마우스 오버 시 해당 노드와 이웃 노드 하이라이트
  • 드래그로 그래프 이동 및 확대/축소
• 전체화면 모드: 그래프를 전체 화면에서 확인
• PNG 저장: 그래프를 PNG 이미지로 저장

커뮤니티 탐지 (Communities Detection)

• Louvain 알고리즘: 네트워크 내 커뮤니티 자동 탐지
• 커뮤니티 시각화: 각 커뮤니티를 서로 다른 색상으로 표시
• 커뮤니티 조정: 해상도(Resolution) 파라미터 조정으로 커뮤니티 수 증가/감소
• 커뮤니티 라벨: 그래프에 커뮤니티 ID 표시
• 커뮤니티 테이블: 각 커뮤니티에 속한 노드 목록 표시

중심성 분석 (Centrality Analysis)

• Degree Centrality (연결 중심성): 각 노드의 연결 개수를 계산
• Eigenvector Centrality (고유벡터 중심성): 연결된 노드의 중요성까지 고려한 중심성 계산
• 중심성 테이블: 모든 노드의 중심성 값 표시
• 정렬 기능: Degree Centrality 또는 Eigenvector Centrality 기준으로 정렬

기술 스택

• 그래프 라이브러리:
  • graphology: 그래프 데이터 구조 및 알고리즘
  • sigma.js: 그래프 시각화
• 레이아웃 알고리즘:
  • graphology-layout-forceatlas2: Force Atlas 2 레이아웃
  • graphology-layout/circular: 원형 레이아웃
• 분석 알고리즘:
  • graphology-communities-louvain: Louvain 커뮤니티 탐지
  • graphology-metrics: 중심성 계산
• 데이터 처리:
  • papaparse: CSV 파싱
  • file-saver: 파일 다운로드
• 색상 생성: iwanthue: 커뮤니티 색상 생성

파일 구조

sna-vis-tool/
├── from-csv.html          # CSV 파일 업로드 페이지
├── from-sample.html       # 예시 데이터 페이지
├── from-table.html        # 테이블 직접 입력 페이지
├── 1_dataViewer.js        # CSV 데이터 파싱 및 표시
├── 2_graphVisualizer.js   # 그래프 시각화 및 분석 기능
├── 3_sampleDataLoader.js  # 예시 데이터 로더
├── 4_diyData.js           # 테이블 입력 데이터 처리
├── styles.css             # 스타일시트
└── sample-data/           # 예시 데이터 파일들

사용 방법

1. CSV 파일로 그래프 생성

1. from-csv.html 페이지 접속
2. CSV 파일 선택 (열: Source1, Source2, Weight)
3. "Load CSV" 버튼 클릭하여 데이터 확인
4. "Draw a Graph!" 버튼 클릭하여 그래프 생성

2. 예시 데이터로 그래프 생성

1. from-sample.html 페이지 접속
2. 원하는 예시 데이터 버튼 클릭 (Data 1~5)
3. 데이터 설명 및 미리보기 확인
4. "Draw a Graph!" 버튼 클릭하여 그래프 생성

3. 테이블 입력으로 그래프 생성

1. from-table.html 페이지 접속
2. 테이블에 Source1, Source2, Weight 입력
3. "Add Row" 버튼으로 행 추가, "X" 버튼으로 행 삭제
4. "Draw a Graph!" 버튼 클릭하여 그래프 생성
5. (선택) "Download Data" 버튼으로 입력한 데이터를 CSV로 저장

추가 기능 사용법

커뮤니티 탐지

1. 그래프 생성 후 "Communities Detection ON" 버튼 클릭
2. "Identify Communities" 버튼으로 커뮤니티 식별
3. "Label Communities" 버튼으로 커뮤니티 라벨 표시
4. "Communities +" / "Communities -" 버튼으로 커뮤니티 수 조정

중심성 분석

1. 그래프 생성 후 "Compute Centrality" 버튼 클릭
2. 각 노드의 Degree Centrality와 Eigenvector Centrality 확인
3. "Sort by Degree Centrality" 또는 "Sort by Eigenvector Centrality" 버튼으로 정렬

버전 정보

현재 버전: 1.5

문의 및 피드백

• 이메일: eduwang1010.dev@gmail.com
• 개발자: Hyowon Wang

라이선스

이 프로젝트는 개인 프로젝트입니다.