목록으로 돌아가기
OLED 연구 데이터 차트 에디터
OLED 소재 연구 데이터의 시각화와 회귀 분석을 위한 차트 에디터
연구원들이 실험 데이터를 분석하고 다항식 피팅 결과를 관리할 수 있도록 지원합니다.
1 / 4
담당 역할
기획디자인프론트엔드백엔드
기술 스택
React
TypeScript
Plotly.js
Django
Vite
React Hook Form
Bootstrap
주요 기능
- 다양한 차트 유형: Scatter, Bar, Pie, Box, Heatmap, Contour, Polar 7가지 차트 지원
- 회귀 분석: 2차/3차 다항식 피팅으로 실험 데이터 트렌드 분석 및 이상치 처리
- 이중 Y축 지원: 서로 다른 스케일의 데이터를 하나의 차트에서 비교 분석
- 실시간 미리보기: 설정 변경 시 차트가 즉시 업데이트되어 결과 확인
- 데이터 테이블 연동: 원본 데이터 선택부터 분석 결과 추출, 저장까지 일괄 처리
수행 업무
- Web Component 아키텍처: Shadow DOM을 활용해 React 앱을 커스텀 엘리먼트로 캡슐화, 기존 Django 템플릿에 스타일 충돌 없이 독립 통합
- 복잡한 폼 상태 관리: React Hook Form으로 7가지 차트 유형별 동적 옵션 패널과 중첩된 레이아웃 설정을 단일 폼으로 관리
- 순환 참조 처리: Plotly.js 레이아웃 객체의 순환 참조 문제를 flatted 라이브러리로 해결하여 안정적인 설정 저장/복원 구현
- 동적 축 구성: 이중 Y축 사용 시 overlaying/side 설정을 자동 구성하여 사용자 설정 부담 최소화
- 차트 유형별 조건부 UI: 선택된 차트 유형에 따라 관련 옵션만 표시하여 복잡한 설정 화면을 직관적으로 단순화
- 반응형 차트 리사이징: autosize 전환 시 컨테이너 크기 감지 및 colorbar 차트의 스케일링 오류 자동 방지
#데이터 시각화
#차트 에디터
#Web Component
#회귀 분석
#Plotly.js
#연구 도구